ExtJS Data Package এবং Stores

Web Development - এক্সটিজেএস (ExtJS) -

ExtJS তে Data Package এবং Stores হল ডেটা ম্যানেজমেন্টের জন্য অত্যন্ত গুরুত্বপূর্ণ উপাদান। এগুলি ডেটা সংগ্রহ, সংরক্ষণ, এবং সঠিকভাবে প্রদর্শন করার জন্য ব্যবহৃত হয়। Data Package একটি সমন্বিত প্যাকেজ যা ডেটার মডেল, স্টোর, প্রক্সি, এবং রিডারসহ অন্যান্য ডেটা ম্যানিপুলেশন কনফিগারেশন অন্তর্ভুক্ত করে।

ExtJS Data Package

ExtJS Data Package একটি গ্রুপ যা ডেটা ম্যানিপুলেশন এবং ম্যানেজমেন্টের জন্য ব্যবহার হয়। এর মধ্যে সাধারণত থাকে:

Model: ডেটার কাঠামো এবং বৈশিষ্ট্য নির্ধারণ করে।
Store: ডেটা সংগ্রহ এবং সঞ্চয় করে এবং মডেলগুলি লোড এবং ম্যানিপুলেট করে।
Proxy: ডেটা রিট্রিভ করার বা সেভ করার জন্য সার্ভারের সাথে যোগাযোগ করে।
Reader/Writer: ডেটা রিড বা রাইট করার জন্য ব্যবহৃত হয়, যেমন JSON বা XML ডেটা ফরম্যাট থেকে ডেটা অ্যাক্সেস করা।

এই সমস্ত উপাদান একত্রে কাজ করে এবং ডেটার মাধ্যমে ব্যবহৃত ইউজার ইন্টারফেস (UI) এর সাথে সমন্বিত হয়।

১. Model (মডেল)

মডেল ডেটার কাঠামো এবং তার বৈশিষ্ট্য সংজ্ঞায়িত করে। এটি ডেটা সঞ্চালন এবং গঠন করতে ব্যবহৃত হয়।

মডেল উদাহরণ:

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

fields: এখানে id, name, email, age ফিল্ডগুলোর সংজ্ঞা দেওয়া হয়েছে।
type: প্রতিটি ফিল্ডের ডেটা টাইপ নির্ধারণ করা হয়েছে।

২. Store (স্টোর)

স্টোর হল ডেটার একটি সংগ্রহ, যা একটি নির্দিষ্ট মডেলের ডেটা ধারণ করে। স্টোর ডেটা লোড, সেভ এবং আপডেট করতে ব্যবহৃত হয়। এটি প্রায়ই মডেল এবং প্রক্সি ব্যবহার করে সার্ভারের সাথে যোগাযোগ করে ডেটা লোড এবং স্টোর করতে।

স্টোর উদাহরণ:

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

model: স্টোরে কোন মডেল ব্যবহার হবে তা নির্ধারণ করে।
proxy: ডেটা সার্ভার থেকে লোড বা সেভ করার জন্য ব্যবহৃত।
- type: এখানে ajax ব্যবহার করা হয়েছে, যা সার্ভারের সাথে যোগাযোগের জন্য AJAX কল ব্যবহার করে।
- reader: JSON রিডার ব্যবহার করা হয়েছে ডেটা রিড করার জন্য।
autoLoad: স্টোর যখন তৈরি হবে, তখন এটি স্বয়ংক্রিয়ভাবে ডেটা লোড করবে।

৩. Proxy (প্রক্সি)

প্রক্সি একটি গুরুত্বপূর্ণ উপাদান যা স্টোরের সাথে সার্ভারের যোগাযোগ পরিচালনা করে। এটি ডেটা লোড এবং সেভ করার জন্য সার্ভারের এন্ডপয়েন্টের সাথে যোগাযোগ স্থাপন করে। ExtJS তে সাধারণত ajax, rest, memory, ইত্যাদি ধরনের প্রক্সি ব্যবহৃত হয়।

AJAX Proxy উদাহরণ:

proxy: {
    type: 'ajax',
    url: '/users',
    reader: {
        type: 'json',
        rootProperty: 'data'
    }
}

url: সার্ভারের এন্ডপয়েন্ট যেখানে ডেটা থেকে রিড বা সেভ করা হবে।
reader: JSON ডেটা রিডারের মাধ্যমে ডেটা রিড করা হয়।

৪. Reader/Writer (রিডার/রাইটার)

Reader এবং Writer ডেটা রিড এবং রাইটের প্রক্রিয়াকে নিয়ন্ত্রণ করে।

Reader: ডেটাকে ফরম্যাট থেকে মডেলে রূপান্তর করে।
Writer: মডেল থেকে ডেটাকে সঠিক ফরম্যাটে রূপান্তর করে (যেমন JSON বা XML) সার্ভারে পাঠানোর জন্য।

JSON Reader উদাহরণ:

reader: {
    type: 'json',
    rootProperty: 'data' // JSON থেকে ডেটার রুট প্রপার্টি
}

৫. Store এবং Grid Integration

স্টোর এবং গ্রিড একে অপরের সাথে কাজ করে ডেটাকে ভিজ্যুয়ালাইজ করার জন্য। আপনি যখন একটি স্টোর তৈরি করবেন, তখন এটি গ্রিড কম্পোনেন্টে ডেটা প্রদর্শনের জন্য ব্যবহৃত হবে।

গ্রিড কম্পোনেন্ট উদাহরণ:

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()
});

এখানে, Users স্টোরের মাধ্যমে User মডেল লোড করে গ্রিডের মাধ্যমে ডেটা প্রদর্শন করা হয়েছে।

সারাংশ

Model: ডেটার কাঠামো এবং গঠন। মডেল ডেটা ফিল্ড এবং ভ্যালিডেশন সংজ্ঞায়িত করে।
Store: ডেটার সংগ্রহ, যা মডেল এবং প্রক্সি ব্যবহার করে সার্ভারের সাথে যোগাযোগ করে।
Proxy: সার্ভারের সাথে যোগাযোগ স্থাপন করে এবং ডেটা লোড বা সেভ করার জন্য ব্যবহৃত হয়।
Reader/Writer: ডেটা রিড এবং রাইট করার প্রক্রিয়া নিয়ন্ত্রণ করে।

ExtJS এর Data Package এবং Stores ডেটা ম্যানিপুলেশনকে সহজ এবং কার্যকর করে তোলে, যার মাধ্যমে ডেটা ইন্টারফেস এবং ইউজার ইন্টারঅ্যাকশন আরও স্মুথ এবং ফ্লুইড হয়।

Content added By

Md Azizur Rahman

ExtJS Data Package এর ভূমিকা

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

ExtJS Data Package এর মূল উপাদানসমূহ

ExtJS Data Package বিভিন্ন উপাদান নিয়ে গঠিত যা ডেটা ম্যানেজমেন্ট এবং ডেটা ফ্লো নিয়ন্ত্রণে সহায়ক:

Model (মডেল)
Store (স্টোর)
Proxy (প্রক্সি)
Reader (রিডার)
Writer (রাইটার)
Data Validation (ডেটা ভ্যালিডেশন)

১. Model (মডেল)

Model ডেটার কাঠামো এবং ফিল্ড নির্ধারণ করে। এটি ডেটার বৈশিষ্ট্য সংজ্ঞায়িত করে এবং ডেটার সাথে সম্পর্কিত বিভিন্ন ফাংশন (যেমন ভ্যালিডেশন, কনভার্সন) পরিচালনা করে।

মডেল উদাহরণ:

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

fields: মডেল ফিল্ডগুলোর ডেটা টাইপ এবং নাম সংজ্ঞায়িত করা হয়।
validations: মডেলের ডেটার জন্য ভ্যালিডেশন নিশ্চিত করা হয়।

২. Store (স্টোর)

Store ডেটাকে সংরক্ষণ এবং ম্যানেজ করার জন্য ব্যবহৃত হয়। এটি মডেলের একটি কালেকশন বা ডেটা সেট ধারণ করে এবং গ্রিড, চার্ট, বা অন্যান্য UI কম্পোনেন্টে ডেটা সরবরাহ করে। স্টোরে লোড করা ডেটা সরাসরি UI কম্পোনেন্টে প্রদর্শিত হয়।

স্টোর উদাহরণ:

Ext.define('MyApp.store.Users', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.User', // স্টোর মডেল
    proxy: {
        type: 'ajax',
        url: '/users', // ডেটা রিকোয়েস্ট করার URL
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    },
    autoLoad: true // স্টোর অটোমেটিকভাবে লোড হবে
});

model: স্টোরের সাথে সম্পর্কিত মডেল।
proxy: ডেটা রিডিং বা রাইটিংয়ের জন্য ব্যবহার করা হয়, যেমন AJAX কল।
autoLoad: স্টোর যখন লোড হবে।

৩. Proxy (প্রক্সি)

Proxy ডেটা রিকোয়েস্ট করার বা ডেটা আপডেট করার জন্য ব্যবহৃত হয়। এটি স্টোর থেকে ডেটা গ্রহণের এবং ডেটা ফেচিংয়ের জন্য API, সার্ভার বা অন্যান্য সোর্সের সাথে যোগাযোগ করে।

প্রক্সি উদাহরণ:

proxy: {
    type: 'ajax', // AJAX কলের মাধ্যমে ডেটা ফেচ করা হবে
    url: '/users', // API এন্ডপয়েন্ট
    reader: {
        type: 'json',
        rootProperty: 'data'
    }
}

type: প্রক্সির টাইপ যেমন ajax, jsonp, rest ইত্যাদি।
url: ডেটা সোর্সের URL।

৪. Reader (রিডার)

Reader ডেটার ফরম্যাট প্রক্রিয়া করে এবং স্টোরের মধ্যে অ্যাপ্লিকেশন-ভিত্তিক ডেটার রূপান্তর নিশ্চিত করে। এটি সাধারণত JSON বা XML ফরম্যাটে ডেটা গ্রহণের জন্য ব্যবহৃত হয়।

রিডার উদাহরণ:

reader: {
    type: 'json',
    rootProperty: 'data' // ডেটার মূল অংশ
}

type: ডেটার রিডিং ফরম্যাট যেমন json, xml।
rootProperty: ডেটার মূল অংশ বা রুট প্রপার্টি।

৫. Writer (রাইটার)

Writer ডেটা আপডেট বা সেভ করার জন্য ব্যবহৃত হয়। এটি মডেল বা স্টোর থেকে ডেটা গ্রহণ করে এবং সেগুলোকে সঠিক ফরম্যাটে রূপান্তর করে যেমন JSON, XML ইত্যাদি, যাতে সার্ভারে পাঠানো যায়।

রাইটার উদাহরণ:

writer: {
    type: 'json',
    writeAllFields: true
}

type: রাইটারের ফরম্যাট যেমন json।
writeAllFields: সমস্ত ফিল্ড লেখার জন্য।

৬. Data Validation (ডেটা ভ্যালিডেশন)

ডেটা ভ্যালিডেশন নিশ্চিত করে যে, মডেলের ডেটা সঠিক ফরম্যাটে এবং শর্তে রয়েছে। ExtJS এর ডেটা প্যাকেজে ডেটার ভ্যালিডেশন করার জন্য একটি শক্তিশালী সিস্টেম রয়েছে।

ভ্যালিডেশন উদাহরণ:

validations: [
    { type: 'length', field: 'name', min: 3 }
]

type: ভ্যালিডেশন প্রকার (যেমন length, presence, format ইত্যাদি)।
field: যে ফিল্ডে ভ্যালিডেশন প্রয়োগ করা হবে।
min: ন্যূনতম দৈর্ঘ্য বা মান।

ExtJS Data Package এর ভূমিকা

ডেটা ম্যানেজমেন্ট: ExtJS Data Package ডেটা স্টোর, মডেল, এবং প্রক্সি ব্যবহার করে ডেটার ম্যানিপুলেশন এবং ম্যানেজমেন্ট করে।
সার্ভার থেকে ডেটা ফেচ: স্টোর এবং প্রক্সি এর মাধ্যমে অ্যাপ্লিকেশন সার্ভার থেকে ডেটা ফেচ করতে সক্ষম হয়।
ডেটা প্রক্রিয়াকরণ: Reader এবং Writer ব্যবহৃত হয় ডেটা রূপান্তর এবং প্রক্রিয়াকরণের জন্য, যেমন JSON রূপে ডেটা ফেচ এবং পাঠানো।
ডেটার ভ্যালিডেশন: মডেল ভ্যালিডেশন দ্বারা নিশ্চিত করা হয় যে ডেটা সঠিক আকারে রয়েছে।
ডাইনামিক ডেটা লোডিং: ডেটা স্টোর এবং প্রক্সি ব্যবহৃত হয় ডাইনামিকভাবে ডেটা লোড করার জন্য, যা অ্যাপ্লিকেশনটি দ্রুত এবং উন্নত করে।

সারাংশ

ExtJS Data Package ডেটার সাথে সম্পর্কিত বিভিন্ন কাজকে সহজ এবং কার্যকর করে তোলে। এটি ডেটা ম্যানিপুলেশন, লোডিং, প্রক্রিয়াকরণ, এবং ফিল্টারিং পরিচালনা করার জন্য একটি শক্তিশালী এবং সমৃদ্ধ সিস্টেম প্রদান করে। মডেল, স্টোর, প্রক্সি, রিডার, এবং রাইটার ব্যবহার করে ডেটার সাথে ইন্টারঅ্যাকশন এবং পরিচালনা করা সহজ হয়। ExtJS Data Package বিশেষভাবে ডেটা-ড্রিভেন অ্যাপ্লিকেশনগুলির জন্য অপরিহার্য।

Content added By

Md Azizur Rahman

Store কী এবং কেন প্রয়োজন?

ExtJS এ Store একটি গুরুত্বপূর্ণ অংশ যা ডেটা ম্যানেজমেন্টের জন্য ব্যবহৃত হয়। এটি ডেটাকে অ্যাপ্লিকেশনে ধারণ, পরিচালনা এবং প্রদর্শন করার জন্য কাজ করে। Store একটি নির্দিষ্ট মডেল বা ডেটার কাঠামোর সাথে যুক্ত থাকে এবং ডেটাকে কন্টেইনার হিসাবে ব্যবহৃত হয়। Store এর মাধ্যমে ডেটা ফিল্টার, সোর্ট, এবং পেজিনেশন করা যায়, যা অ্যাপ্লিকেশন ডেভেলপমেন্টের সময় ডেটা ম্যানিপুলেশন অনেক সহজ করে তোলে।

Store কী?

Store হল একটি ডেটা স্ট্রাকচার যা ExtJS অ্যাপ্লিকেশনে ডেটা লোড, ম্যানিপুলেট এবং হ্যান্ডল করার জন্য ব্যবহৃত হয়। এটি মূলত Model এর সাথে সম্পর্কিত থাকে এবং ডেটা রিট্রিভ এবং স্টোরিংয়ের জন্য একাধিক টুলস এবং ফিচার সরবরাহ করে, যেমন ডেটা ফিল্টার, সোর্টিং, পেজিনেশন, এবং ডেটা রিফ্রেশ।

Store সাধারণত Ajax বা WebSocket এর মাধ্যমে সার্ভার থেকে ডেটা ফেচ করে এবং তা UI তে প্রদর্শন করতে সহায়ক হয়।

Store এর মূল কাজ

ডেটা ধারণ এবং পরিচালনা: Store ডেটার মধ্যে সিঙ্ক্রোনাইজেশন এবং ম্যানিপুলেশন পরিচালনা করে। এটি মডেলের সাথে কাজ করে ডেটা ধারণ, ফিল্টার, সোর্ট, এবং এডিট করার জন্য ব্যবহৃত হয়।
ডেটা লোডিং এবং সিঙ্ক্রোনাইজেশন: Store ডেটা রিট্রিভ করার জন্য প্রক্সি (Proxy) ব্যবহার করে। এটি সার্ভার থেকে ডেটা লোড করতে সাহায্য করে এবং ডেটা শো করার জন্য ফ্রন্টএন্ডে সিঙ্ক্রোনাইজ করে।
ফিল্টার, সোর্ট এবং পেজিনেশন: Store দ্বারা ডেটা ফিল্টার, সোর্ট এবং পেজিনেশন করা যায়, যা ইউজারের জন্য আরও সহজ এবং ইন্টারেক্টিভ এক্সপেরিয়েন্স প্রদান করে।
ডেটা রিফ্রেশ করা: Store ডেটার পরিবর্তনগুলিকে রিফ্রেশ করে UI তে আপডেট করে, যখন ডেটা পরিবর্তিত হয়। এটি রিয়েল-টাইম ডেটা আপডেট এবং লাইভ ফিড প্রদান করতে সাহায্য করে।

Store কেন প্রয়োজন?

ডেটা ম্যানেজমেন্ট:
Store ডেটাকে সিস্টেম্যাটিকভাবে ম্যানেজ করতে সাহায্য করে। এটি ডেটা অর্গানাইজ করে এবং ফিল্টার, সোর্ট, পেজিনেশন এবং অন্যান্য অপারেশন খুব সহজ করে তোলে।
ডেটা লোডিং:
Store অ্যাপ্লিকেশনকে সার্ভার থেকে ডেটা লোড করতে সহায়ক। এটি Ajax, RESTful API, বা অন্যান্য সার্ভার-কোল্যাবোরেটেড ফিচারের মাধ্যমে ডেটা ফেচ করতে পারে।
কম্পোনেন্টের সাথে একীভূতকরণ:
Store সাধারণত বিভিন্ন UI কম্পোনেন্টের সাথে কাজ করে, যেমন গ্রিড, চার্ট, এবং টেবিল, যা ডেটা প্রদর্শন করে। এটি কম্পোনেন্টগুলিকে ডেটার সাথে ইন্টিগ্রেট করে এবং সেগুলিকে রিয়েল-টাইম আপডেট করতে সহায়ক।
কমপ্লেক্স ডেটা ফিল্টারিং:
Store ডেটার উপর ফিল্টারিং করতে পারে, যা ব্যবহৃত হলে ইউজারকে ডেটা বাছাই করার অপশন দেয়।
পেজিনেশন:
বড় ডেটাসেট পরিচালনা করার সময় Store পেজিনেশন ফিচার সরবরাহ করে, যা ডেটা শুধুমাত্র নির্দিষ্ট একটি পেজে লোড করতে এবং দেখাতে সাহায্য করে।
ডেটার রিফ্রেশ এবং সিঙ্ক্রোনাইজেশন:
Store ডেটার পরিবর্তন বা আপডেট হবার পর UI তে সেগুলো স্বয়ংক্রিয়ভাবে রিফ্রেশ করতে পারে, যাতে ব্যবহারকারী সর্বশেষ ডেটা দেখতে পারে।

ExtJS Store এর উদাহরণ

এখানে একটি সাধারণ ExtJS Store উদাহরণ দেওয়া হলো, যেখানে একটি User মডেল ব্যবহার করে ডেটা লোড করা হবে।

Model (User.js):

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

Store (UsersStore.js):

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

Grid (UserGrid.js):

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

এখানে, UsersStore একটি Store যা User মডেল ব্যবহার করে এবং /users URL থেকে ডেটা লোড করে। UserGrid কম্পোনেন্ট এই Store এর ডেটা প্রদর্শন করে।

সারাংশ

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

Content added By

Md Azizur Rahman

Store তৈরি এবং Data Binding

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

Proxy এবং Data ফেচ করা (AJAX, REST, JSON)

ExtJS তে ডেটা ম্যানেজমেন্টের জন্য Proxy একটি গুরুত্বপূর্ণ উপাদান, যা ক্লায়েন্ট এবং সার্ভারের মধ্যে ডেটা বিনিময় পরিচালনা করে। এটি ডেটার লোডিং, সেভিং, আপডেটিং এবং ডিলিটিং ইত্যাদি কাজ করে। AJAX, REST এবং JSON পদ্ধতি ব্যবহার করে ডেটা ফেচ করা খুবই সহজ, এবং ExtJS এর Proxy আপনাকে এই কাজগুলো সহজভাবে সম্পন্ন করতে সহায়তা করে।

এখানে আমরা Proxy ব্যবহার করে AJAX, REST, এবং JSON পদ্ধতিতে ডেটা ফেচ করার পদ্ধতি বিস্তারিতভাবে আলোচনা করব।

১. ExtJS Proxy এর ভূমিকা

Proxy ExtJS এর একটি শক্তিশালী অংশ যা ডেটা স্টোরের সাথে যোগাযোগের মাধ্যম হিসেবে কাজ করে। এটি বিভিন্ন ধরনের ডেটা পরিবহন কৌশল যেমন AJAX, REST, এবং JSON হ্যান্ডল করতে পারে।

Proxy ডেটার সোর্সের সাথে যোগাযোগ করার জন্য বিভিন্ন টেকনিক (যেমন AJAX, REST, SOAP) ব্যবহার করে।
এটি ডেটা ফেচ এবং সেভ করার জন্য reader, writer, এবং actionMethods কনফিগারেশন ব্যবহার করে।

২. AJAX Proxy ব্যবহার করে ডেটা ফেচ করা

AJAX (Asynchronous JavaScript and XML) একটি সাধারণ প্রযুক্তি যা সার্ভারের সাথে অ্যাসিঙ্ক্রোনাস কমিউনিকেশন চালু রাখে, যার মাধ্যমে পেজ রিফ্রেশ ছাড়াই ডেটা এক্সচেঞ্জ করা সম্ভব।

AJAX Proxy উদাহরণ:

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

type: 'ajax': AJAX পদ্ধতি ব্যবহার করা হয়েছে।
url: '/users': সার্ভার থেকে ডেটা লোড করার জন্য URL দেওয়া হয়েছে।
reader: সার্ভারের JSON রেসপন্সের জন্য একটি reader কনফিগার করা হয়েছে।
autoLoad: true: স্টোরটি অ্যাপ্লিকেশন লোডের সাথে সাথেই ডেটা লোড করবে।

৩. REST Proxy ব্যবহার করে ডেটা ফেচ করা

REST (Representational State Transfer) একটি সাধারণ আর্কিটেকচারাল স্টাইল যা HTTP প্রটোকল ব্যবহার করে ডেটা ট্রান্সফার করে। এটি মূলত CRUD (Create, Read, Update, Delete) অপারেশন পরিচালনা করার জন্য ব্যবহৃত হয়।

REST Proxy উদাহরণ:

Ext.define('MyApp.store.Users', {
    extend: 'Ext.data.Store',
    model: 'MyApp.model.User',
    proxy: {
        type: 'rest', // Proxy টাইপ REST
        url: '/api/users', // সার্ভারের REST API URL
        reader: {
            type: 'json', // JSON ফরম্যাটে ডেটা রিড হবে
            rootProperty: 'users'
        },
        writer: {
            type: 'json' // JSON ফরম্যাটে ডেটা সেভ হবে
        },
        actionMethods: {
            create: 'POST', // নতুন ডেটা যুক্ত করার জন্য HTTP POST ব্যবহার
            read: 'GET',    // ডেটা পড়ার জন্য HTTP GET ব্যবহার
            update: 'PUT',  // ডেটা আপডেট করার জন্য HTTP PUT ব্যবহার
            destroy: 'DELETE' // ডেটা মুছে ফেলার জন্য HTTP DELETE ব্যবহার
        }
    },
    autoLoad: true // স্টোরটি অটোমেটিক্যালি লোড হবে
});

type: 'rest': RESTful API পদ্ধতি ব্যবহার করা হয়েছে।
url: '/api/users': REST API এর URL নির্ধারণ করা হয়েছে।
actionMethods: CRUD অপারেশন পরিচালনা করতে HTTP মেথড (GET, POST, PUT, DELETE) কনফিগার করা হয়েছে।

৪. JSON Proxy ব্যবহার করে ডেটা ফেচ করা

JSON (JavaScript Object Notation) একটি লাইটওয়েট ডেটা ইন্টারচেঞ্জ ফরম্যাট। ExtJS তে JSON ফরম্যাটে ডেটা রিড এবং রাইট করার জন্য JSON Proxy ব্যবহার করা হয়।

JSON Proxy উদাহরণ:

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

type: 'ajax': AJAX পদ্ধতি ব্যবহার করা হচ্ছে।
reader: JSON রিডারটি ডেটার মূল অংশ data থেকে ডেটা রিড করবে।
writer: JSON লেখার জন্য writer কনফিগার করা হয়েছে।

৫. Proxy ব্যবহার করে ডেটা আপডেট এবং ডিলিট করা

ExtJS এ Proxy ব্যবহার করে আপনি Create, Read, Update, এবং Delete (CRUD) অপারেশন সমর্থন করতে পারেন। নিচে একটি উদাহরণ দেওয়া হল যেটি ডেটা সেভ (UPDATE) এবং ডিলিট (DELETE) করতে ব্যবহৃত হয়।

উদাহরণ: ডেটা আপডেট (UPDATE) করা

var user = Ext.create('MyApp.model.User', {
    id: 1,
    name: 'John Doe',
    email: 'john.doe@example.com'
});

// স্টোরে ডেটা আপডেট করা
user.save({
    success: function() {
        console.log('User updated successfully');
    },
    failure: function() {
        console.log('Failed to update user');
    }
});

উদাহরণ: ডেটা ডিলিট (DELETE) করা

var user = Ext.create('MyApp.model.User', {
    id: 1
});

// ডেটা মুছে ফেলা
user.erase({
    success: function() {
        console.log('User deleted successfully');
    },
    failure: function() {
        console.log('Failed to delete user');
    }
});

সারাংশ

AJAX Proxy: সার্ভারের সাথে অ্যাসিঙ্ক্রোনাস যোগাযোগ পরিচালনা করে এবং JSON ডেটা ফেচ করে।
REST Proxy: RESTful API ব্যবহার করে HTTP মেথড (GET, POST, PUT, DELETE) মাধ্যমে ডেটা পরিচালনা করা হয়।
JSON Proxy: JSON ফরম্যাটে ডেটা পাঠানো এবং গ্রহণ করার জন্য ব্যবহৃত হয়।

ExtJS তে Proxy ব্যবহার করে আপনি সোজা এবং কার্যকরভাবে বিভিন্ন ডেটা সোর্সের সাথে যোগাযোগ করতে পারেন এবং CRUD অপারেশনগুলো খুবই সহজে পরিচালনা করতে পারেন।

Content added By

Md Azizur Rahman

Filters, Sorters, এবং Pagination

ExtJS ডেটা ম্যানেজমেন্টের জন্য শক্তিশালী টুলস প্রদান করে, যার মাধ্যমে আপনি ডেটা ফিল্টার, সোর্ট, এবং পেজিনেশন করতে পারেন। এগুলি ডেটার উপর নিয়ন্ত্রণ নিয়ে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। এই টুলগুলো ডেটা স্টোরের সাথে কাজ করে এবং ব্যবহারকারীদের জন্য কার্যকরভাবে ডেটা পরিচালনা করতে সক্ষম।

১. Filters (ফিল্টার)

Filters ডেটার মধ্যে নির্দিষ্ট মান অনুসারে ফিল্টার করার জন্য ব্যবহৃত হয়। ফিল্টারগুলি ডেটাকে একটি নির্দিষ্ট শর্তে আনা এবং কমপ্লেক্স কন্ডিশনগুলো প্রয়োগ করা সহজ করে তোলে।

Filter ব্যবহার করার উদাহরণ:

Ext.create('Ext.data.Store', {
    storeId: 'userStore',
    fields: ['id', 'name', 'email'],
    data: [
        { id: 1, name: 'John Doe', email: 'john.doe@example.com' },
        { id: 2, name: 'Jane Smith', email: 'jane.smith@example.com' },
        { id: 3, name: 'Jack White', email: 'jack.white@example.com' }
    ],
    filters: [
        {
            property: 'name',
            value: 'John' // 'John' নামের সাথে মিলবে এমন সব ডেটা ফিল্টার করবে
        }
    ]
});

এখানে, filters কনফিগারেশন ব্যবহার করা হয়েছে যেখানে name ফিল্ডে John শব্দটি থাকা সব ডেটা স্টোরে থাকা অন্য ডেটা থেকে আলাদা করা হবে।

ফিল্টার অ্যাপ্লাই করা এবং আপডেট করা:

var store = Ext.getStore('userStore');

// ফিল্টার যোগ করা
store.filter({
    property: 'email',
    value: 'example.com'  // 'example.com' ইমেইল ডোমেইন ফিল্টার করবে
});

// ফিল্টার মুছে ফেলা
store.clearFilter();

২. Sorters (সোর্টার্স)

Sorters ডেটা স্টোরে থাকা ডেটাকে একটি নির্দিষ্ট অর্ডারে সাজাতে ব্যবহৃত হয়। আপনি একাধিক সোর্টিং প্যারামিটারও ব্যবহার করতে পারেন, যেমন নাম বা বয়সের ভিত্তিতে ডেটা সোর্ট করা।

Sorter ব্যবহার করার উদাহরণ:

Ext.create('Ext.data.Store', {
    storeId: 'userStore',
    fields: ['id', 'name', 'age'],
    data: [
        { id: 1, name: 'John Doe', age: 30 },
        { id: 2, name: 'Jane Smith', age: 25 },
        { id: 3, name: 'Jack White', age: 35 }
    ],
    sorters: [
        {
            property: 'age', // 'age' এর উপর সোর্ট করা হবে
            direction: 'ASC'  // ASC (Ascending) বা DESC (Descending)
        }
    ]
});

এখানে sorters কনফিগারেশন ব্যবহার করে age ফিল্ডের উপর ASC (Ascending) অর্ডারে ডেটা সাজানো হয়েছে।

সোর্টিং পরিবর্তন এবং আপডেট করা:

var store = Ext.getStore('userStore');

// নতুন সোর্টার যোগ করা
store.sort('name', 'ASC');  // নামের উপর Ascending সোর্ট

// সোর্টিং মুছে ফেলা
store.clearSort();

৩. Pagination (পেজিনেশন)

Pagination ডেটা স্টোরের মাধ্যমে ডেটাকে বিভিন্ন পেজে ভাগ করার জন্য ব্যবহৃত হয়। এটি বড় ডেটাসেটের ক্ষেত্রে ব্যবহারকারীদের পেজিং সুবিধা দেয় যাতে তারা এক পেজে শুধু একটি নির্দিষ্ট পরিমাণ ডেটা দেখতে পারে।

Pagination ব্যবহার করার উদাহরণ:

Ext.create('Ext.data.Store', {
    storeId: 'userStore',
    fields: ['id', 'name', 'email'],
    pageSize: 10,  // প্রতি পেজে ১০টি আইটেম দেখাবে
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    },
    data: {
        'data': [
            { id: 1, name: 'John Doe', email: 'john@example.com' },
            { id: 2, name: 'Jane Smith', email: 'jane@example.com' },
            { id: 3, name: 'Jack White', email: 'jack@example.com' },
            // আরও ডেটা
        ]
    },
    autoLoad: true
});

এখানে pageSize কনফিগারেশন 10 আইটেম প্রতি পেজের জন্য সেট করা হয়েছে। যখন আপনি এই স্টোরের সাথে পেজিনেশন ব্যবহার করবেন, তখন স্টোরটি ডেটা লোড করবে এবং পেজিং কন্ট্রোল প্রদর্শিত হবে।

Pagination Control ব্যবহার করা:

Ext.create('Ext.PagingToolbar', {
    store: Ext.getStore('userStore'),
    displayInfo: true, // পেজিনেশন তথ্য প্রদর্শন করবে
    displayMsg: '{0} - {1} of {2}',
    emptyMsg: 'No data to display',
    renderTo: Ext.getBody()
});

এই PagingToolbar ব্যবহারকারীদের জন্য পেজিং কন্ট্রোল প্রদর্শন করবে, যেখানে তারা সঠিক পেজে যেতে পারবেন এবং ডেটা দেখতে পারবেন।

৪. Filters, Sorters, এবং Pagination একত্রিত করা

Filters, Sorters, এবং Pagination একত্রিত করে আরও উন্নত এবং ইন্টারঅ্যাকটিভ ডেটা ভিউ তৈরি করা যায়। আপনি এই তিনটি ফিচার একসাথে ব্যবহার করে ডেটাকে ডাইনামিকভাবে ফিল্টার, সোর্ট এবং পেজিনেট করতে পারবেন।

উদাহরণ: Filters, Sorters, এবং Pagination একত্রিত করা

Ext.create('Ext.data.Store', {
    storeId: 'userStore',
    fields: ['id', 'name', 'email', 'age'],
    pageSize: 5,
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            rootProperty: 'data'
        }
    },
    data: {
        'data': [
            { id: 1, name: 'John Doe', email: 'john@example.com', age: 30 },
            { id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 25 },
            { id: 3, name: 'Jack White', email: 'jack@example.com', age: 35 },
            { id: 4, name: 'Alice Johnson', email: 'alice@example.com', age: 28 },
            { id: 5, name: 'Bob Brown', email: 'bob@example.com', age: 40 },
            { id: 6, name: 'Charlie Green', email: 'charlie@example.com', age: 50 }
        ]
    },
    filters: [
        {
            property: 'age',
            value: 30
        }
    ],
    sorters: [
        {
            property: 'age',
            direction: 'ASC'
        }
    ],
    autoLoad: true
});

// Paging toolbar setup
Ext.create('Ext.PagingToolbar', {
    store: Ext.getStore('userStore'),
    displayInfo: true,
    displayMsg: '{0} - {1} of {2}',
    emptyMsg: 'No data to display',
    renderTo: Ext.getBody()
});

এখানে:

Filters: age 30 এর বেশি হতে হবে এমন ডেটা ফিল্টার করা হচ্ছে।
Sorters: age ফিল্ডে ASC (ascending) অর্ডারে সোর্ট করা হচ্ছে।
Pagination: প্রতি পেজে ৫টি আইটেম প্রদর্শন করছে।

সারাংশ

Filters ডেটাকে নির্দিষ্ট শর্ত অনুযায়ী ফিল্টার করতে সহায়ক।
Sorters ডেটাকে একটি নির্দিষ্ট অর্ডারে সাজাতে ব্যবহৃত হয়।
Pagination ডেটাকে পেজিনেট করে বড় ডেটাসেটকে ছোট অংশে ভাগ করে দেখানোর জন্য ব্যবহৃত হয়।

এগুলির সমন্বয়ে আপনি খুবই কার্যকরী এবং ইন্টারঅ্যাকটিভ ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন।

Content added By

Md Azizur Rahman

ExtJS Data Package এবং Stores ExtJS Data Package এর ভূমিকা Store কী এবং কেন প্রয়োজন? Store তৈরি এবং Data Binding Proxy এবং Data ফেচ করা (AJAX, REST, JSON) Filters, Sorters, এবং Pagination

ExtJS Data Package এবং Stores