ExtJS ডেটা-ড্রিভেন অ্যাপ্লিকেশন তৈরির জন্য একটি আদর্শ ফ্রেমওয়ার্ক। এর ডেটা ম্যানেজমেন্ট সিস্টেম (Data Management System), গ্রিড (Grid), চার্ট (Chart) এবং স্টোর (Store) ব্যবহার করে উন্নত ডেটা-ইনটেনসিভ অ্যাপ্লিকেশন তৈরি করা যায়।
মডেল হল ডেটার কাঠামো নির্ধারণের জন্য ব্যবহৃত একটি উপাদান। এতে ডেটার ফিল্ড এবং ভ্যালিডেশন ডিফাইন করা হয়।
উদাহরণ:
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' }
]
});
স্টোর ডেটা সংগ্রহ এবং ম্যানেজ করার জন্য ব্যবহৃত হয়। এটি মডেলের ডেটা ধরে রাখে এবং ফিল্টার, সোর্টিং, ও লোডিং সাপোর্ট করে।
উদাহরণ:
Ext.define('MyApp.store.Users', {
extend: 'Ext.data.Store',
model: 'MyApp.model.User',
proxy: {
type: 'ajax',
url: '/users', // ডেটা লোড করার এন্ডপয়েন্ট
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true
});
ভিউ ব্যবহারকারীর কাছে ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। ExtJS এর গ্রিড প্যানেল (Grid Panel) বা চার্ট ডেটা ভিজুয়ালাইজ করার জন্য সবচেয়ে বেশি ব্যবহৃত হয়।
উদাহরণ: গ্রিড প্যানেল:
Ext.define('MyApp.view.UserGrid', {
extend: '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: 2 },
{ text: 'Age', dataIndex: 'age', flex: 1 }
]
});
উদাহরণ: চার্ট:
Ext.create('Ext.chart.CartesianChart', {
renderTo: Ext.getBody(),
store: {
type: 'Users'
},
axes: [{
type: 'numeric',
position: 'left',
title: 'Age'
}, {
type: 'category',
position: 'bottom',
title: 'Name'
}],
series: [{
type: 'bar',
xField: 'name',
yField: 'age',
label: {
display: 'insideEnd',
field: 'age'
}
}]
});
কন্ট্রোলার ভিউ এবং মডেলের মধ্যে সমন্বয় ঘটায় এবং ইভেন্ট হ্যান্ডলিং করে।
উদাহরণ:
Ext.define('MyApp.controller.UserController', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'usergrid': {
itemclick: this.onUserClick
}
});
},
onUserClick: function(grid, record) {
Ext.Msg.alert('User Selected', 'Name: ' + record.get('name'));
}
});
ExtJS একটি শক্তিশালী ডেটা-ড্রিভেন ফ্রেমওয়ার্ক যা জটিল ডেটা ম্যানিপুলেশন এবং প্রদর্শনের জন্য আদর্শ। এর মাধ্যমে ডেভেলপাররা স্কেলেবল এবং কার্যক্ষম অ্যাপ্লিকেশন তৈরি করতে পারে।