Ext.Loader এবং Ext.require ব্যবহার করে ডায়নামিক লোডিং

Web Development - এক্সটিজেএস (ExtJS) - ExtJS এর বেসিক কনফিগারেশন |

ExtJS তে ডায়নামিক লোডিং এর মাধ্যমে আপনি অ্যাপ্লিকেশনের নির্দিষ্ট অংশগুলো (যেমন: ক্লাস বা কম্পোনেন্ট) প্রয়োজনে লোড করতে পারেন। এটি অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সহায়ক, কারণ আপনি শুধুমাত্র যেগুলি প্রয়োজন, সেগুলি লোড করবেন।

ExtJS তে Ext.Loader এবং Ext.require দুটি প্রধান টুল যা ডায়নামিক লোডিং পরিচালনা করতে ব্যবহৃত হয়।


১. Ext.Loader

Ext.Loader ExtJS এর একটি বিল্ট-ইন স্ক্রিপ্ট লোডার যা ডায়নামিকভাবে ক্লাস এবং ফাইল লোড করতে সহায়ক। এটি ক্লাস লোড করার জন্য অ্যাপ্লিকেশন স্টার্টআপে ব্যবহৃত হয়, এবং এটি স্বয়ংক্রিয়ভাবে নির্ধারণ করে কোন ক্লাসগুলি লোড করতে হবে।

Ext.Loader এর ব্যবহার:

  1. লেজি লোডিং সক্ষম করা:
    Ext.Loader এর মাধ্যমে আপনাকে প্রয়োজনীয় ক্লাসগুলোকে অন দ্য ফ্লাই লোড করতে হবে। প্রথমে লোডার কনফিগার করতে হবে।
Ext.Loader.setConfig({
    enabled: true, // লোডারকে সক্ষম করা
    paths: {
        'MyApp': 'app' // 'MyApp' নেমস্পেসের জন্য ফোল্ডার পাথ নির্ধারণ
    }
});
  1. ক্লাস লোডিং:
    যখনই আপনি কোনো নির্দিষ্ট ক্লাস বা ফাইল ব্যবহার করতে চান, তখন Ext.Loader তার জন্য ক্লাসটিকে ডায়নামিকভাবে লোড করবে।
Ext.onReady(function() {
    // 'MyApp.model.User' ক্লাস লোড করার জন্য
    Ext.Loader.require('MyApp.model.User', function() {
        var user = Ext.create('MyApp.model.User', {
            id: 1,
            name: 'John Doe',
            email: 'john.doe@example.com'
        });
        console.log(user.get('name')); // 'John Doe'
    });
});
  • Ext.Loader.setConfig: এটি লোডারের কনফিগারেশন সেট করে, যেমন লোডিং সক্ষম করা এবং ক্লাসের পাথ নির্ধারণ।
  • Ext.Loader.require: এটি ডায়নামিকভাবে ক্লাস লোড করার জন্য ব্যবহৃত হয়।

২. Ext.require

Ext.require একটি সরল পদ্ধতি যা একটি বা একাধিক ক্লাস বা ফাইল লোড করার জন্য ব্যবহৃত হয়। এটি অ্যাপ্লিকেশন রেডি হওয়ার আগে নির্দিষ্ট ক্লাস বা ফাইল লোড করার জন্য ব্যবহার করা হয়। এটি ক্লাস লোড করার সাথে সাথে ডিপেনডেন্সি (অর্থাৎ, অন্যান্য ক্লাসগুলোর প্রয়োজনীয়তা) স্বয়ংক্রিয়ভাবে রেজলভ করে।

Ext.require এর ব্যবহার:

Ext.require([
    'MyApp.model.User', // মডেল ক্লাস
    'MyApp.view.UserGrid' // ভিউ ক্লাস
], function() {
    // ক্লাস লোড হওয়ার পর কোড চালানো হবে
    var grid = Ext.create('MyApp.view.UserGrid', {
        renderTo: Ext.getBody()
    });
});

এখানে, Ext.require একাধিক ক্লাসকে ডায়নামিকভাবে লোড করে এবং যখন সব ক্লাস লোড হয়ে যাবে, তখন একটি callback ফাংশন চালানো হবে।


Ext.Loader এবং Ext.require এর মধ্যে পার্থক্য

  1. Ext.Loader:
    • ব্যবহার: এটি ক্লাস লোড করার জন্য গ্লোবাল কনফিগারেশন সেট করে এবং অ্যাপ্লিকেশনের শুরুতে লোডিং কনফিগারেশন নিয়ন্ত্রণ করে।
    • ফিচার: ডায়নামিক লোডিং এর জন্য পাথ কনফিগারেশন এবং নির্দিষ্ট ক্লাস লোড করা যায়।
  2. Ext.require:
    • ব্যবহার: এটি নির্দিষ্ট ক্লাস লোড করার জন্য ফাংশন কল ব্যবহার করে, যেটি অন্যান্য ক্লাসের উপর নির্ভরশীল হতে পারে।
    • ফিচার: সিঙ্গল বা একাধিক ক্লাস লোড করার জন্য ব্যবহার করা হয় এবং callback ফাংশন দিয়ে নির্দিষ্ট কাজ করা যায়।

উদাহরণ: ডায়নামিক লোডিং

ধরা যাক, আমাদের একটি User মডেল এবং UserGrid ভিউ রয়েছে। আমরা এগুলি ডায়নামিকভাবে লোড করতে চাই।

মডেল (User.js):

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'name', type: 'string' },
        { name: 'email', type: 'string' }
    ]
});

ভিউ (UserGrid.js):

Ext.define('MyApp.view.UserGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'usergrid',
    title: 'User List',
    store: {
        model: 'MyApp.model.User',
        autoLoad: true
    },
    columns: [
        { text: 'ID', dataIndex: 'id', flex: 1 },
        { text: 'Name', dataIndex: 'name', flex: 2 },
        { text: 'Email', dataIndex: 'email', flex: 3 }
    ]
});

অ্যাপ্লিকেশন (app.js):

Ext.application({
    name: 'MyApp',
    requires: ['MyApp.model.User', 'MyApp.view.UserGrid'],

    launch: function() {
        // ডায়নামিক লোডিং করার জন্য require ব্যবহার
        Ext.require([
            'MyApp.model.User',
            'MyApp.view.UserGrid'
        ], function() {
            Ext.create('MyApp.view.UserGrid', {
                renderTo: Ext.getBody()
            });
        });
    }
});

এখানে Ext.require ব্যবহার করে আমরা User মডেল এবং UserGrid ভিউ লোড করাচ্ছি। launch ফাংশনটি চলার সময়, যখন এই ক্লাসগুলি পুরোপুরি লোড হয়ে যাবে, তখন আমরা UserGrid ভিউটি রেন্ডার করবো।


সারাংশ

  • Ext.Loader এবং Ext.require ব্যবহারের মাধ্যমে আপনি ডায়নামিক ক্লাস লোডিং করতে পারেন যা অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করে এবং অ্যাপ্লিকেশনকে দ্রুত লোড করতে সাহায্য করে।
  • Ext.Loader প্রধানত গ্লোবাল কনফিগারেশন সেট করার জন্য ব্যবহৃত হয়, যখন Ext.require নির্দিষ্ট ক্লাস বা ফাইল ডায়নামিকভাবে লোড করার জন্য ব্যবহৃত হয়।
  • এগুলি ডেভেলপারদের অ্যাপ্লিকেশনকে আরও দক্ষ এবং স্কেলেবল করতে সাহায্য করে।
Content added By
Promotion