Store তৈরি এবং Data Binding

Web Development - এক্সটিজেএস (ExtJS) - ExtJS Data Package এবং Stores |

ExtJS এ Store এবং Data Binding দুটি গুরুত্বপূর্ণ কনসেপ্ট যা ডেটা ম্যানেজমেন্ট এবং ইউজার ইন্টারফেসের মধ্যে ডেটার একীভূত যোগাযোগ নিশ্চিত করে। Store ডেটা সংগ্রহ এবং পরিচালনার জন্য ব্যবহৃত হয়, এবং Data Binding ইউজার ইন্টারফেসে ডেটা পরিবর্তন স্বয়ংক্রিয়ভাবে আপডেট করতে সাহায্য করে।

Store তৈরি

ExtJS এ Store হল ডেটা সংরক্ষণের একটি কাঠামো যা ডেটা মডেল এবং প্রক্সি ব্যবহার করে ডেটা লোড, ফিল্টার, সোর্ট এবং রিফ্রেশ করতে সাহায্য করে। স্টোর সাধারণত একটি মডেলের উপর ভিত্তি করে তৈরি হয়, যা ডেটার কাঠামো নির্ধারণ করে।

Store তৈরি করার ধাপ

Model তৈরি করুন: Store তৈরি করার আগে, আপনি প্রথমে একটি মডেল তৈরি করবেন যা ডেটার কাঠামো এবং ফিল্ড নির্ধারণ করবে।
Store তৈরি করুন: Store ডেটার সংগ্রহ এবং পরিচালনার জন্য ব্যবহৃত হবে।

Model উদাহরণ

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

এখানে User মডেলটি ডেটার কাঠামো নির্ধারণ করছে, যেখানে id, name এবং email ফিল্ড রয়েছে।

Store উদাহরণ

Ext.define('MyApp.store.Users', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.User', // মডেল নির্ধারণ করা
    autoLoad: true,  // স্টোরটি স্বয়ংক্রিয়ভাবে লোড হবে
    proxy: {
        type: 'ajax',  // ডেটা লোড করতে AJAX ব্যবহার করা
        url: '/users',  // API URL যা ডেটা ফেচ করবে
        reader: {
            type: 'json',
            rootProperty: 'data'  // JSON ডেটা থেকে মূল ডেটা নেবো
        }
    }
});

এখানে:

model: MyApp.model.User মডেলটি স্টোরের ডেটা কাঠামো নির্ধারণ করে।
proxy: AJAX ব্যবহার করে API থেকে ডেটা লোড করা হয়।
autoLoad: true: স্টোরটি লোড হওয়ার সাথে সাথে ডেটা অটোমেটিকভাবে লোড হবে।

Data Binding (ডেটা বাইন্ডিং)

Data Binding হল একটি প্রক্রিয়া যেখানে UI কম্পোনেন্টগুলির মান স্টোরের ডেটার সাথে যুক্ত থাকে। যখন ডেটা পরিবর্তিত হয়, তখন UI স্বয়ংক্রিয়ভাবে আপডেট হয়। ExtJS এ, bind কনফিগারেশন এবং data মডিউল ব্যবহার করে ডেটা বাইন্ডিং করা হয়।

Data Binding উদাহরণ:

Ext.create('Ext.grid.Panel', {
    title: 'User List',
    store: {
        type: 'Users' // স্টোর ব্যবহার করা
    },
    columns: [
        { text: 'ID', dataIndex: 'id', flex: 1 },
        { text: 'Name', dataIndex: 'name', flex: 2 },
        { text: 'Email', dataIndex: 'email', flex: 3 }
    ],
    renderTo: Ext.getBody()
});

এখানে, grid কম্পোনেন্ট store কে ডেটার সোর্স হিসেবে ব্যবহার করছে। যখন স্টোরের ডেটা পরিবর্তিত হয়, তখন গ্রিড কম্পোনেন্টটি স্বয়ংক্রিয়ভাবে আপডেট হয়।

Data Binding with ExtJS Model

Data binding শুধুমাত্র UI কম্পোনেন্টের মধ্যে সীমাবদ্ধ নয়, এটি মডেল এবং স্টোরের সাথে সম্পর্কিত ক্ষেত্রগুলোতেও কাজ করে। উদাহরণস্বরূপ, আমরা একটি ফর্ম ফিল্ডে মডেলের ফিল্ডের সাথে বাইন্ড করতে পারি।

Ext.create('Ext.form.Panel', {
    title: 'User Form',
    width: 400,
    height: 200,
    bodyPadding: 10,
    items: [{
        xtype: 'textfield',
        name: 'name',
        fieldLabel: 'Name',
        bind: '{user.name}'  // মডেল থেকে নাম বাইন্ড করা
    }],
    viewModel: {
        data: {
            user: {
                name: 'John Doe'  // স্ট্যাটিক ডেটা দিয়ে ইনিশিয়ালাইজ করা
            }
        }
    },
    renderTo: Ext.getBody()
});

এখানে:

bind: '{user.name}': ফর্মের name ফিল্ডটি মডেলের user.name ফিল্ডের সাথে বাইন্ড করা হয়েছে। যখন মডেলের user.name পরিবর্তিত হবে, তখন ফর্মের name ফিল্ডও স্বয়ংক্রিয়ভাবে আপডেট হবে।

Store এবং Data Binding এর সুবিধা

ডেটার একীভূত ব্যবস্থাপনা: Store ব্যবহার করে আপনি ডেটা সংগ্রহ, ফিল্টার, সোর্ট এবং আপডেট করতে পারবেন।
UI এবং ডেটার মধ্যে সংযোগ: Data Binding আপনাকে UI এবং স্টোরের মধ্যে একে অপরের সাথে সিঙ্ক্রোনাইজ করতে সাহায্য করে, যাতে UI সঠিকভাবে ডেটা প্রদর্শন করে।
কমপ্লেক্স UI ডেভেলপমেন্ট সহজ: যখন আপনি বড় অ্যাপ্লিকেশন তৈরি করবেন, তখন বিভিন্ন UI কম্পোনেন্টের মধ্যে ডেটা শেয়ার করা সহজ হয়ে যাবে।

সারাংশ

Store: ExtJS এ ডেটা স্টোর করার একটি উপাদান যা মডেল ব্যবহার করে ডেটা লোড এবং পরিচালনা করে।
Data Binding: UI কম্পোনেন্ট এবং মডেল/স্টোরের মধ্যে সংযোগ স্থাপন করে, যাতে ডেটা পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়।

ExtJS এ Store এবং Data Binding এর মাধ্যমে ডেটা ম্যানেজমেন্ট এবং UI আপডেট প্রক্রিয়া সহজ এবং দক্ষ হয়।

Content added By

Md Azizur Rahman

Store তৈরি এবং Data Binding

Store তৈরি এবং Data Binding