Web Development Grid Panel তৈরি এবং Data Binding গাইড ও নোট

Grid Panel একটি খুব শক্তিশালী এবং সাধারণত ব্যবহৃত কম্পোনেন্ট ExtJS এর মধ্যে, যা বড় ডেটাসেট দেখানোর জন্য উপযুক্ত। Grid Panel ব্যবহার করে আপনি সিম্পল টেবিল থেকে শুরু করে জটিল ডেটা-ড্রিভেন অ্যাপ্লিকেশনও তৈরি করতে পারেন। Data Binding এর মাধ্যমে আপনি গ্রিডে প্রদর্শিত ডেটার সাথে সরাসরি ইন্টারঅ্যাকশন করতে পারবেন। এটি ডেটা ম্যানিপুলেশন এবং প্রদর্শন করার জন্য একটি খুব কার্যকর পদ্ধতি।

Grid Panel তৈরি করা

ExtJS তে Grid Panel তৈরি করতে প্রথমে আপনাকে store, columns, এবং অন্যান্য কনফিগারেশন সেট করতে হবে। Grid Panel কম্পোনেন্ট সাধারণত একটি ডেটা স্টোরের সাথে যুক্ত থাকে, যা ডেটা ধারণ করে এবং সেটি গ্রিডে প্রদর্শিত হয়।

Grid Panel এর মৌলিক কনফিগারেশন:

1. store: এটি Grid Panel এর ডেটা উৎস, যা মডেল, API বা লোকাল ডেটা থেকে ডেটা নিয়ে আসে।
2. columns: গ্রিডের কলাম গুলো সংজ্ঞায়িত করে।
3. renderTo: এটি ইউআই উপাদানকে নির্দিষ্ট HTML এলিমেন্টে রেন্ডার করতে ব্যবহৃত হয়।

উদাহরণ: মৌলিক Grid Panel

Ext.create('Ext.grid.Panel', {
    title: 'User List',
    store: {
        fields: ['id', 'name', 'email'],
        data: [
            { id: 1, name: 'John Doe', email: 'john@example.com' },
            { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
        ]
    },
    columns: [
        { text: 'ID', dataIndex: 'id', width: 50 },
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Email', dataIndex: 'email', flex: 1 }
    ],
    height: 200,
    renderTo: Ext.getBody()
});

এখানে, store একটি সিম্পল স্টোর ব্যবহার করে লোকাল ডেটা লোড করছে এবং columns সেট করা হয়েছে ডেটা প্রদর্শনের জন্য।

Data Binding in ExtJS

Data Binding ExtJS তে এমন একটি প্রক্রিয়া যা ডেটাকে UI কম্পোনেন্টের সাথে সংযুক্ত করে, যার মাধ্যমে ডেটা পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়। ExtJS এ Data Binding সাধারণত store এবং model এর মাধ্যমে কাজ করে, যেখানে store ডেটা ধারণ করে এবং model ডেটার কাঠামো সংজ্ঞায়িত করে।

Data Binding এর সাধারণ কনসেপ্ট:

1. Model: ডেটার কাঠামো সংজ্ঞায়িত করে। এটি জানায় কোন কোন ফিল্ড থাকবে এবং তাদের ডেটার ধরন কী হবে।
2. Store: এটি ডেটা ধরে রাখে এবং ডেটা রিডিং, আপডেট, এবং ফিল্টারিংয়ের কাজ করে।
3. Grid Panel: গ্রিডের ভিতরে ডেটা ডিসপ্লে করা হয় এবং সেটি স্টোরের সাথে বাঁধা থাকে।

উদাহরণ: Grid Panel এর Data Binding

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

Ext.create('Ext.data.Store', {
    model: 'MyApp.model.User',
    data: [
        { id: 1, name: 'John Doe', email: 'john@example.com' },
        { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'User List with Data Binding',
    store: Ext.create('Ext.data.Store', {
        model: 'MyApp.model.User',
        autoLoad: true,
        data: [
            { id: 1, name: 'John Doe', email: 'john@example.com' },
            { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
        ]
    }),
    columns: [
        { text: 'ID', dataIndex: 'id', width: 50 },
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Email', dataIndex: 'email', flex: 1 }
    ],
    height: 200,
    renderTo: Ext.getBody()
});

এই উদাহরণে, MyApp.model.User মডেলটি ডেটার কাঠামো এবং ফিল্ড সংজ্ঞায়িত করে, এবং store মডেল ব্যবহার করে ডেটা ধারণ করে, যা গ্রিডে প্রদর্শিত হয়।

Store এবং Model এর সাথে Data Binding

ExtJS এর store এবং model এর মাধ্যমে আপনি গ্রিডের মধ্যে ডেটার ডাইনামিক আপডেট করতে পারবেন। যখন ডেটা পরিবর্তিত হয়, তখন গ্রিড স্বয়ংক্রিয়ভাবে সেই পরিবর্তন প্রতিফলিত করবে।

উদাহরণ: Store এর মাধ্যমে ডেটা আপডেট করা

var userStore = Ext.create('Ext.data.Store', {
    model: 'MyApp.model.User',
    autoLoad: true,
    data: [
        { id: 1, name: 'John Doe', email: 'john@example.com' },
        { id: 2, name: 'Jane Smith', email: 'jane@example.com' }
    ]
});

var userGrid = Ext.create('Ext.grid.Panel', {
    title: 'User List with Store Binding',
    store: userStore,
    columns: [
        { text: 'ID', dataIndex: 'id', width: 50 },
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Email', dataIndex: 'email', flex: 1 }
    ],
    height: 200,
    renderTo: Ext.getBody()
});

// Update data in the store
userStore.add({ id: 3, name: 'David Johnson', email: 'david@example.com' });

এখানে, নতুন User অবজেক্টটি স্টোরে যোগ করার মাধ্যমে গ্রিডে স্বয়ংক্রিয়ভাবে আপডেট হয়ে যাবে।

সারাংশ

1. Grid Panel: ExtJS তে ডেটা প্রদর্শনের জন্য সবচেয়ে ব্যবহৃত কম্পোনেন্ট, যেখানে store এবং columns ব্যবহার করে ডেটা শো করা হয়।
2. Data Binding: ডেটা মডেল, স্টোর এবং কম্পোনেন্টের মধ্যে সংযোগ স্থাপন করে, যাতে ডেটার পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়।
3. Store: স্টোর ডেটা ধারণ করে এবং model এর সাথে কাজ করে।
4. Model: ডেটার কাঠামো এবং ফিল্ডসমূহ নির্ধারণ করে।

ExtJS এর Grid Panel এবং Data Binding এর মাধ্যমে আপনি ডেটা ম্যানিপুলেশন এবং ডিসপ্লে সহজেই পরিচালনা করতে পারবেন, যা ডেটা-ড্রিভেন অ্যাপ্লিকেশন তৈরিতে কার্যকরী ভূমিকা পালন করে।