ExtJS একটি শক্তিশালী ফ্রেমওয়ার্ক যা ডেটা-ড্রিভেন অ্যাপ্লিকেশন তৈরি করতে বিশেষভাবে উপযোগী। এর মধ্যে Grid Panel এবং Data Management এর একটি গুরুত্বপূর্ণ ভূমিকা রয়েছে। Grid Panel ডেটা প্রদর্শনের জন্য একটি শক্তিশালী টুল, এবং Data Management ডেটা স্টোর, মডেল, এবং প্রক্সি ব্যবহার করে ডেটা পরিচালনা করে।
এই গাইডে আমরা Grid Panel এবং Data Management এর মধ্যে সম্পর্ক, কার্যকারিতা এবং কিভাবে এগুলো ব্যবহার করা যায় তা বিস্তারিতভাবে দেখবো।
Grid Panel ExtJS এর একটি অন্যতম জনপ্রিয় কম্পোনেন্ট, যা ডেটাকে টেবিল আকারে প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি একটি কাঠামোবদ্ধ এবং ইন্টারেক্টিভ ডেটা ভিউ প্রদান করে, যেখানে ডেটা সোর্টিং, ফিল্টারিং, এবং পেজিনেশন সহ বিভিন্ন কার্যকলাপ সম্পাদন করা যায়।
Ext.create('Ext.grid.Panel', {
title: 'User List',
store: {
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' }
]
},
columns: [
{ text: 'ID', dataIndex: 'id', flex: 1 },
{ text: 'Name', dataIndex: 'name', flex: 2 },
{ text: 'Email', dataIndex: 'email', flex: 3 }
],
renderTo: Ext.getBody()
});
এখানে, একটি Grid Panel তৈরি করা হয়েছে যেখানে ডেটা store থেকে আসছে এবং columns এর মাধ্যমে তা প্রদর্শিত হচ্ছে।
ExtJS এ ডেটা ম্যানেজমেন্টে কয়েকটি গুরুত্বপূর্ণ কম্পোনেন্ট ব্যবহৃত হয়:
Store একটি ExtJS কম্পোনেন্ট যা ডেটা সংরক্ষণ এবং পরিচালনা করে। এটি মডেলের ডেটা ধারণ করে এবং সার্ভার থেকে ডেটা লোড, সেভ এবং আপডেট করতে ব্যবহৃত হয়। Proxy এর মাধ্যমে স্টোর সার্ভারের সাথে যোগাযোগ করে।
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 }
]
});
Proxy একটি কম্পোনেন্ট যা ডেটা সুত্রের সাথে স্টোরের যোগাযোগ সহজ করে। এটি সাধারণত AJAX অথবা REST এর মাধ্যমে ডেটা ফেচিং এবং সেভিং এর কাজ করে।
Proxy উদাহরণ:
Ext.create('Ext.data.Store', {
model: 'MyApp.model.User',
proxy: {
type: 'ajax',
url: 'users.json', // ডেটা ফেচ করার URL
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true // স্টোর স্বয়ংক্রিয়ভাবে লোড হবে
});
এখানে Proxy AJAX মাধ্যমে ডেটা লোড করে এবং Reader JSON ডেটা থেকে data রুট প্রপার্টি পড়ে।
Grid Panel এর সাথে ডেটা ম্যানেজমেন্ট একত্রে ব্যবহার করার জন্য, Store, Model, এবং Proxy সমন্বিতভাবে কাজ করে। এখানে, আমরা একটি Grid Panel তৈরি করব যা একটি Store থেকে ডেটা লোড করবে।
Ext.create('Ext.grid.Panel', {
title: 'User List',
store: Ext.create('Ext.data.Store', {
model: 'MyApp.model.User',
proxy: {
type: 'ajax',
url: 'users.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
autoLoad: true
}),
columns: [
{ text: 'ID', dataIndex: 'id', flex: 1 },
{ text: 'Name', dataIndex: 'name', flex: 2 },
{ text: 'Email', dataIndex: 'email', flex: 3 }
],
renderTo: Ext.getBody()
});
এখানে, Grid Panel এর ডেটা Store এর মাধ্যমে লোড হচ্ছে এবং Proxy এর মাধ্যমে ডেটা সার্ভার থেকে আনা হচ্ছে। এই গ্রিডে autoLoad কনফিগারেশন ব্যবহার করা হয়েছে, যার মাধ্যমে স্টোরটি শুরুতেই ডেটা লোড করবে।
ExtJS গ্রিডে Sorting, Filtering, এবং Paging অন্তর্ভুক্ত করা সম্ভব।
columns: [
{ text: 'ID', dataIndex: 'id', sortable: true },
{ text: 'Name', dataIndex: 'name', sortable: true },
{ text: 'Email', dataIndex: 'email', sortable: true }
]
এখানে, sortable: true কনফিগারেশন দ্বারা গ্রিডের কলামগুলোতে সোর্টিং সক্ষম করা হয়েছে।
Ext.create('Ext.grid.Panel', {
title: 'User List',
store: Ext.create('Ext.data.Store', {
model: 'MyApp.model.User',
proxy: {
type: 'ajax',
url: 'users.json',
reader: {
type: 'json',
rootProperty: 'data'
}
},
filters: [
{ property: 'name', value: 'John' }
]
}),
columns: [
{ text: 'ID', dataIndex: 'id', flex: 1 },
{ text: 'Name', dataIndex: 'name', flex: 2 },
{ text: 'Email', dataIndex: 'email', flex: 3 }
],
renderTo: Ext.getBody()
});
এখানে, filters কনফিগারেশন ব্যবহার করে গ্রিডে ফিল্টারিং করা হয়েছে, যেখানে শুধুমাত্র name এর মধ্যে 'John' থাকা রেকর্ডগুলি দেখানো হবে।
paging: true,
bbar: {
xtype: 'pagingtoolbar',
store: store,
displayInfo: true
}
এখানে, pagingtoolbar ব্যবহার করে গ্রিডে পেজিনেশন যোগ করা হয়েছে।
ExtJS গ্রিড এবং ডেটা ম্যানেজমেন্টের মাধ্যমে আপনি খুব সহজে স্কেলেবল এবং কার্যকরী ডেটা-ড্রিভেন অ্যাপ্লিকেশন তৈরি করতে পারেন।
Grid Panel একটি খুব শক্তিশালী এবং সাধারণত ব্যবহৃত কম্পোনেন্ট ExtJS এর মধ্যে, যা বড় ডেটাসেট দেখানোর জন্য উপযুক্ত। Grid Panel ব্যবহার করে আপনি সিম্পল টেবিল থেকে শুরু করে জটিল ডেটা-ড্রিভেন অ্যাপ্লিকেশনও তৈরি করতে পারেন। Data Binding এর মাধ্যমে আপনি গ্রিডে প্রদর্শিত ডেটার সাথে সরাসরি ইন্টারঅ্যাকশন করতে পারবেন। এটি ডেটা ম্যানিপুলেশন এবং প্রদর্শন করার জন্য একটি খুব কার্যকর পদ্ধতি।
ExtJS তে Grid Panel তৈরি করতে প্রথমে আপনাকে store, columns, এবং অন্যান্য কনফিগারেশন সেট করতে হবে। Grid Panel কম্পোনেন্ট সাধারণত একটি ডেটা স্টোরের সাথে যুক্ত থাকে, যা ডেটা ধারণ করে এবং সেটি গ্রিডে প্রদর্শিত হয়।
store: এটি Grid Panel এর ডেটা উৎস, যা মডেল, API বা লোকাল ডেটা থেকে ডেটা নিয়ে আসে।columns: গ্রিডের কলাম গুলো সংজ্ঞায়িত করে।renderTo: এটি ইউআই উপাদানকে নির্দিষ্ট HTML এলিমেন্টে রেন্ডার করতে ব্যবহৃত হয়।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 ExtJS তে এমন একটি প্রক্রিয়া যা ডেটাকে UI কম্পোনেন্টের সাথে সংযুক্ত করে, যার মাধ্যমে ডেটা পরিবর্তন হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়। ExtJS এ Data Binding সাধারণত store এবং model এর মাধ্যমে কাজ করে, যেখানে store ডেটা ধারণ করে এবং model ডেটার কাঠামো সংজ্ঞায়িত করে।
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 মডেল ব্যবহার করে ডেটা ধারণ করে, যা গ্রিডে প্রদর্শিত হয়।
ExtJS এর store এবং model এর মাধ্যমে আপনি গ্রিডের মধ্যে ডেটার ডাইনামিক আপডেট করতে পারবেন। যখন ডেটা পরিবর্তিত হয়, তখন গ্রিড স্বয়ংক্রিয়ভাবে সেই পরিবর্তন প্রতিফলিত করবে।
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 অবজেক্টটি স্টোরে যোগ করার মাধ্যমে গ্রিডে স্বয়ংক্রিয়ভাবে আপডেট হয়ে যাবে।
store এবং columns ব্যবহার করে ডেটা শো করা হয়।model এর সাথে কাজ করে।ExtJS এর Grid Panel এবং Data Binding এর মাধ্যমে আপনি ডেটা ম্যানিপুলেশন এবং ডিসপ্লে সহজেই পরিচালনা করতে পারবেন, যা ডেটা-ড্রিভেন অ্যাপ্লিকেশন তৈরিতে কার্যকরী ভূমিকা পালন করে।
ExtJS তে Grid একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজেবল UI কম্পোনেন্ট যা ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। Grid Columns এবং Custom Renderers ব্যবহার করে আপনি ডেটাকে আরও রিচ এবং ইন্টারেক্টিভভাবে উপস্থাপন করতে পারেন। গ্রিডের প্রতিটি কলাম ডেটার একটি নির্দিষ্ট অংশ উপস্থাপন করে এবং Custom Renderer ব্যবহার করে সেই কলামের ডেটাকে কাস্টমাইজ করা যায়।
Grid Columns হলো সেই অংশ যা গ্রিডের ভেতরে ডেটা প্রদর্শন করে। প্রতিটি কলাম একটি নির্দিষ্ট ডেটা ফিল্ডের জন্য তৈরি হয় এবং dataIndex এর মাধ্যমে যে ফিল্ডের ডেটা ওই কলামে প্রদর্শিত হবে তা নির্ধারণ করা হয়।
text: কলামের শিরোনাম বা লেবেল।dataIndex: মডেল বা স্টোরের ফিল্ড যার মাধ্যমে ডেটা কলামে প্রদর্শিত হবে।flex: কলামের প্রস্থকে স্বয়ংক্রিয়ভাবে সামঞ্জস্য করতে ব্যবহার হয়।width: কলামের দৈর্ঘ্য নির্ধারণ করে।sortable: কলামের মধ্যে সোর্টিং সক্ষম করে।গ্রিড কলাম উদাহরণ:
Ext.create('Ext.grid.Panel', {
title: 'User List',
store: {
fields: ['id', 'name', 'email'],
data: [
{id: 1, name: 'John', email: 'john@example.com'},
{id: 2, name: 'Jane', email: 'jane@example.com'}
]
},
columns: [
{ text: 'ID', dataIndex: 'id', width: 50 },
{ text: 'Name', dataIndex: 'name', flex: 1 },
{ text: 'Email', dataIndex: 'email', flex: 2 }
],
renderTo: Ext.getBody()
});
এখানে, columns এর মধ্যে তিনটি কলাম ডিফাইন করা হয়েছে: ID, Name, এবং Email। dataIndex দ্বারা প্রতিটি কলাম নির্দিষ্ট ডেটা ফিল্ডের সাথে সংযুক্ত।
Custom Renderer ব্যবহার করে আপনি গ্রিড কলামে প্রদর্শিত ডেটাকে কাস্টমাইজ করতে পারেন। এটি একটি ফাংশন যা কলামের ডেটা প্রদর্শনের আগে কাজ করে, এবং আপনি চাইলে ডেটা ফরম্যাট, রঙ, আইকন, বা অন্যান্য কাস্টম UI এলিমেন্ট যুক্ত করতে পারেন।
renderer: এটি একটি ফাংশন যা কলামের ডেটাকে কাস্টমাইজ করে।Custom Renderer উদাহরণ:
Ext.create('Ext.grid.Panel', {
title: 'User List',
store: {
fields: ['id', 'name', 'email', 'status'],
data: [
{id: 1, name: 'John', email: 'john@example.com', status: 'Active'},
{id: 2, name: 'Jane', email: 'jane@example.com', status: 'Inactive'}
]
},
columns: [
{ text: 'ID', dataIndex: 'id', width: 50 },
{ text: 'Name', dataIndex: 'name', flex: 1 },
{ text: 'Email', dataIndex: 'email', flex: 2 },
{
text: 'Status',
dataIndex: 'status',
renderer: function(value) {
if (value === 'Active') {
return '<span style="color:green;">' + value + '</span>';
} else {
return '<span style="color:red;">' + value + '</span>';
}
}
}
],
renderTo: Ext.getBody()
});
এখানে, Status কলামের জন্য একটি custom renderer ব্যবহার করা হয়েছে যা Active স্ট্যাটাসকে সবুজ এবং Inactive স্ট্যাটাসকে লাল রঙে প্রদর্শন করবে।
renderer ফাংশনটি সাধারণত তিনটি প্যারামিটার গ্রহণ করে:
value: কলামে প্রদর্শিত হওয়া ডেটার মান।metaData: ডেটার মেটাডেটা, যেমন সেলটি কোথায় রেন্ডার হবে, সেল ক্লাস ইত্যাদি।record: সেই রেকর্ডের তথ্য যেটি কলামের জন্য প্রদর্শিত হচ্ছে।আপনি এই প্যারামিটারগুলো ব্যবহার করে কলামের ডেটা কাস্টমাইজ করতে পারবেন।
উদাহরণ:
{
text: 'Status',
dataIndex: 'status',
renderer: function(value, metaData, record) {
if (value === 'Active') {
metaData.tdStyle = 'background-color: green; color: white;';
return value;
} else {
metaData.tdStyle = 'background-color: red; color: white;';
return value;
}
}
}
এখানে, কলামের রেন্ডারিং এর সময় metaData এর মাধ্যমে সেলটির ব্যাকগ্রাউন্ড এবং ফন্ট কালার কাস্টমাইজ করা হচ্ছে।
HTML ফরম্যাটিং: কলামে ডেটাকে HTML ট্যাগের মাধ্যমে ফরম্যাট করা।
উদাহরণ:
renderer: function(value) {
return '<b>' + value + '</b>'; // ডেটা বোল্ড ফন্টে প্রদর্শিত হবে
}
আইকন ব্যবহার: কলামের ডেটাতে আইকন বা চিত্র যোগ করা।
উদাহরণ:
renderer: function(value) {
if (value === 'Active') {
return '<img src="active_icon.png" /> ' + value;
} else {
return '<img src="inactive_icon.png" /> ' + value;
}
}
কাস্টম স্টাইল: কলামের সেল বা টেক্সট কাস্টম স্টাইল করতে CSS স্টাইল যোগ করা।
উদাহরণ:
renderer: function(value) {
return '<span style="color:blue; font-weight:bold;">' + value + '</span>';
}
dataIndex দ্বারা নির্দিষ্ট ডেটা ফিল্ডের সাথে যুক্ত করা হয়।এভাবে, ExtJS গ্রিডে Grid Columns এবং Custom Renderers ব্যবহার করে আপনি আপনার ডেটা প্রদর্শনকে আরও রিচ, ইন্টারেক্টিভ এবং কাস্টমাইজড করতে পারেন।
ExtJS একটি শক্তিশালী ইউজার ইন্টারফেস ফ্রেমওয়ার্ক, যা ব্যবহারকারীদের ডেটা সম্পাদনা করার জন্য বিভিন্ন কাস্টমাইজেবল অপশন সরবরাহ করে। Inline Editing, Cell Editing, এবং Row Editing এর মাধ্যমে ডেটা সরাসরি গ্রিডে সম্পাদনা করা সম্ভব হয়, যা অ্যাপ্লিকেশনগুলিকে আরও ইন্টারেক্টিভ এবং ইউজার-ফ্রেন্ডলি করে তোলে। এই ফিচারগুলো ব্যবহারকারীকে সহজে ডেটা সম্পাদনা করার সুবিধা দেয়।
Inline Editing হলো একটি সহজ পদ্ধতি যেখানে কম্পোনেন্টের ভিতরে থাকা ডেটা সরাসরি সম্পাদনা করা হয়। উদাহরণস্বরূপ, যদি আপনি একটি গ্রিডে কিছু ডেটা দেখতে পান, তবে আপনি সরাসরি ওই ডেটাতে ক্লিক করে পরিবর্তন করতে পারবেন। এখানে ব্যবহারকারী ডেটা পরিবর্তন করার জন্য নতুন উইন্ডো বা পপ-আপে যেতে হবে না।
উদাহরণ:
Ext.create('Ext.grid.Panel', {
title: 'Inline Editing Example',
store: {
fields: ['name', 'email'],
data: [
{ name: 'John', email: 'john@example.com' },
{ name: 'Jane', email: 'jane@example.com' }
]
},
columns: [
{ text: 'Name', dataIndex: 'name', editor: 'textfield' },
{ text: 'Email', dataIndex: 'email', editor: 'textfield' }
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
renderTo: Ext.getBody()
});
editor: এটি যেকোনো ফর্ম ফিল্ডকে কল করতে ব্যবহার করা হয়, যেমন textfield, numberfield, ইত্যাদি।plugins: CellEditing প্লাগিন ব্যবহার করে গ্রিডের মধ্যে ইনলাইন এডিটিং সক্ষম করা হয়।clicksToEdit: এটি নির্ধারণ করে কত বার ক্লিক করলে ইনলাইন এডিটিং শুরু হবে।Cell Editing এ, নির্দিষ্ট একটি সেলের মধ্যে ডেটা সম্পাদনা করা হয়, তবে সম্পূর্ণ রো বা কলামের পরিবর্তে শুধুমাত্র ঐ সেলটি এডিট করা হয়। এটি সাধারণত একটি CellEditing Plugin ব্যবহার করে সম্পাদনা করা হয়, যা সেল এডিট করতে সহজ এবং দ্রুত পদ্ধতি সরবরাহ করে।
উদাহরণ:
Ext.create('Ext.grid.Panel', {
title: 'Cell Editing Example',
store: {
fields: ['name', 'email'],
data: [
{ name: 'John', email: 'john@example.com' },
{ name: 'Jane', email: 'jane@example.com' }
]
},
columns: [
{ text: 'Name', dataIndex: 'name', editor: 'textfield' },
{ text: 'Email', dataIndex: 'email', editor: 'textfield' }
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
renderTo: Ext.getBody()
});
clicksToEdit: একটি সেলে ক্লিক করার পর কতবার ক্লিক করলে এডিটিং শুরু হবে তা নির্ধারণ করে।Row Editing এ, একটি সম্পূর্ণ রো একসাথে সম্পাদনা করা হয়। এর মাধ্যমে একাধিক সেলের ডেটা সম্পাদনা করা যায়, যেখানে সেলগুলি একই রো-তে থাকে। এটি সাধারণত একটি RowEditing Plugin ব্যবহার করে সম্পাদন করা হয়, যা একযোগে সেলের পরিবর্তন পরিচালনা করতে সহায়তা করে।
উদাহরণ:
Ext.create('Ext.grid.Panel', {
title: 'Row Editing Example',
store: {
fields: ['name', 'email'],
data: [
{ name: 'John', email: 'john@example.com' },
{ name: 'Jane', email: 'jane@example.com' }
]
},
columns: [
{ text: 'Name', dataIndex: 'name', editor: 'textfield' },
{ text: 'Email', dataIndex: 'email', editor: 'textfield' }
],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2
})
],
renderTo: Ext.getBody()
});
RowEditing প্লাগিন ব্যবহার করা হয়।clicksToEdit: এটি নির্ধারণ করে কতবার ক্লিক করলে রো এডিটিং শুরু হবে।| Feature | Inline Editing | Cell Editing | Row Editing |
|---|---|---|---|
| Editing Scope | Single cell editing | Single cell editing | Whole row editing |
| Activation | Single click on the cell | Single click on the cell | Double click on a row |
| Use Case | Quick edit for individual cell | Editing specific cells in the grid | Editing a set of cells at once |
| Plugin Used | CellEditing Plugin | CellEditing Plugin | RowEditing Plugin |
| Example | Name or Email in a cell | Edit Name or Email individually | Edit the entire row |
এই তিনটি এডিটিং পদ্ধতি ExtJS এর গ্রিড বা টেবিল কম্পোনেন্টে ইন্টারঅ্যাকটিভ ডেটা সম্পাদনা সুবিধা প্রদান করে এবং ইউজার এক্সপিরিয়েন্সে উন্নতি ঘটায়। ডেভেলপাররা তাদের প্রয়োজন অনুযায়ী এগুলির মধ্যে নির্বাচন করতে পারেন এবং বিভিন্ন প্লাগইন ব্যবহার করে ব্যবহারকারী ইন্টারফেসে ইফেক্টিভ ডেটা এডিটিং প্রদান করতে পারেন।
ExtJS তে গ্রিড (Grid) একটি খুবই শক্তিশালী কম্পোনেন্ট, যা ডেটা প্রদর্শনের জন্য ব্যবহৃত হয়। গ্রিডের মধ্যে ডেটা ফিল্টারিং এবং সোর্টিং করার মাধ্যমে ইউজারদের জন্য ডেটা বিশ্লেষণ এবং ম্যানিপুলেশন করা সহজ হয়। ExtJS গ্রিডে ফিল্টারিং এবং সোর্টিং ফিচারগুলো বিল্ট-ইন ভাবে প্রদান করে, যা দ্রুত এবং কার্যকরভাবে কাজ করতে সহায়ক।
গ্রিডে ফিল্টারিং করার মাধ্যমে আপনি ডেটার মধ্যে নির্দিষ্ট মান বা শর্ত অনুযায়ী তথ্য প্রদর্শন করতে পারেন। ExtJS গ্রিড ফিল্টারিংয়ের জন্য একটি filters প্লাগইন ব্যবহার করে, যা গ্রিডের মধ্যে ইউজারদের জন্য একাধিক ফিল্টার অপশন তৈরি করতে সহায়ক।
Ext.grid.Panel এর জন্য filters প্লাগইন ব্যবহার করে গ্রিডের মধ্যে ফিল্টারিং সক্রিয় করা হয়। এর মাধ্যমে, আপনি গ্রিডের কলামগুলোর উপর ফিল্টার অ্যাপ্লাই করতে পারেন।
Ext.create('Ext.grid.Panel', {
title: 'User List with Filtering',
renderTo: Ext.getBody(),
store: {
fields: ['id', 'name', 'email', 'age'],
data: [
{ id: 1, name: 'John Doe', email: 'john@example.com', age: 28 },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 34 },
{ id: 3, name: 'Sam Green', email: 'sam@example.com', age: 45 },
{ id: 4, name: 'Anna Blue', email: 'anna@example.com', age: 25 }
]
},
plugins: [
{
ptype: 'gridfilters', // ফিল্টার প্লাগইন ব্যবহার
filters: [
{ dataIndex: 'name', type: 'string' }, // নামের জন্য স্ট্রিং ফিল্টার
{ dataIndex: 'age', type: 'numeric' } // বয়সের জন্য নাম্বার ফিল্টার
]
}
],
columns: [
{ text: 'ID', dataIndex: 'id', flex: 1 },
{ text: 'Name', dataIndex: 'name', flex: 2, filter: 'string' },
{ text: 'Email', dataIndex: 'email', flex: 3 },
{ text: 'Age', dataIndex: 'age', flex: 1, filter: 'numeric' }
]
});
plugins: [{ ptype: 'gridfilters' }]: এখানে gridfilters প্লাগইন ব্যবহার করে গ্রিডে ফিল্টারিং সক্রিয় করা হয়েছে।filters: প্রতিটি কলামের জন্য ফিল্টার টাইপ নির্ধারণ করা হয়েছে, যেমন string ফিল্টার (নাম কলামের জন্য) এবং numeric ফিল্টার (বয়স কলামের জন্য)।গ্রিডের কলামগুলোর উপর ডেটা সোর্ট করতে, ExtJS sortable কনফিগারেশন ব্যবহার করে। এর মাধ্যমে আপনি কলামের হেডারে ক্লিক করলেই ডেটা সোর্ট করতে পারবেন, এবং এটি ASCENDING (বর্ধমান) বা DESCENDING (হ্রাসমান) অর্ডারে সজ্জিত হবে।
Ext.create('Ext.grid.Panel', {
title: 'User List with Sorting',
renderTo: Ext.getBody(),
store: {
fields: ['id', 'name', 'email', 'age'],
data: [
{ id: 1, name: 'John Doe', email: 'john@example.com', age: 28 },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 34 },
{ id: 3, name: 'Sam Green', email: 'sam@example.com', age: 45 },
{ id: 4, name: 'Anna Blue', email: 'anna@example.com', age: 25 }
]
},
columns: [
{ text: 'ID', dataIndex: 'id', flex: 1, sortable: true }, // ID কলামে সোর্টিং সক্ষম
{ text: 'Name', dataIndex: 'name', flex: 2, sortable: true }, // Name কলামে সোর্টিং সক্ষম
{ text: 'Email', dataIndex: 'email', flex: 3 },
{ text: 'Age', dataIndex: 'age', flex: 1, sortable: true } // Age কলামে সোর্টিং সক্ষম
]
});
sortable: true: এই কনফিগারেশনটি প্রতিটি কলামে সজ্জিত করা হয়েছে যাতে ঐ কলামে ক্লিক করার মাধ্যমে সorting সম্ভব হয়।যখন আপনি ফিল্টারিং এবং সorting একত্রে ব্যবহার করেন, এটি ইউজারকে গ্রিডের ডেটা আরও বিস্তারিতভাবে অনুসন্ধান এবং সজ্জিত করার সুযোগ দেয়। নিচের উদাহরণে, আমরা একসাথে ফিল্টার এবং সorting উভয় ফিচারই ব্যবহার করছি।
Ext.create('Ext.grid.Panel', {
title: 'User List with Filtering and Sorting',
renderTo: Ext.getBody(),
store: {
fields: ['id', 'name', 'email', 'age'],
data: [
{ id: 1, name: 'John Doe', email: 'john@example.com', age: 28 },
{ id: 2, name: 'Jane Smith', email: 'jane@example.com', age: 34 },
{ id: 3, name: 'Sam Green', email: 'sam@example.com', age: 45 },
{ id: 4, name: 'Anna Blue', email: 'anna@example.com', age: 25 }
]
},
plugins: [
{
ptype: 'gridfilters',
filters: [
{ dataIndex: 'name', type: 'string' },
{ dataIndex: 'age', type: 'numeric' }
]
}
],
columns: [
{ text: 'ID', dataIndex: 'id', flex: 1, sortable: true },
{ text: 'Name', dataIndex: 'name', flex: 2, filter: 'string', sortable: true },
{ text: 'Email', dataIndex: 'email', flex: 3 },
{ text: 'Age', dataIndex: 'age', flex: 1, filter: 'numeric', sortable: true }
]
});
এখানে, filters প্লাগইন এবং sortable: true একসাথে ব্যবহার করা হয়েছে যাতে ইউজাররা কলামগুলির মাধ্যমে ডেটা ফিল্টার এবং সজ্জিত করতে পারে।
gridfilters প্লাগইন ব্যবহার করতে হয়, যা বিভিন্ন ধরনের ফিল্টার (যেমন স্ট্রিং, নাম্বার) সমর্থন করে।sortable: true কনফিগারেশন ব্যবহার করা হয়।এভাবে, ExtJS গ্রিডের মাধ্যমে আপনি খুব সহজেই ফিল্টারিং এবং সorting ফিচার যোগ করে ইউজারদের একটি ইন্টারঅ্যাকটিভ এবং ডেটা-বিষ্লেষণকারী ইন্টারফেস প্রদান করতে পারেন।
Pagination এবং Infinite Scrolling দুটি জনপ্রিয় পদ্ধতি যা বড় ডেটাসেট হ্যান্ডল করার জন্য ব্যবহৃত হয়। এটি অ্যাপ্লিকেশনগুলির পারফরম্যান্স বাড়াতে এবং ব্যবহারকারীর জন্য ডেটা প্রদর্শন প্রক্রিয়াকে সহজ করে তোলে। ExtJS এই দুটি বৈশিষ্ট্য সমর্থন করে, যা ডেটার বড় পরিমাণ সহজে এবং কার্যকরভাবে প্রদর্শন করতে সাহায্য করে।
Pagination একটি পদ্ধতি যা ডেটার বড় সেটকে ছোট ছোট পৃষ্ঠায় ভাগ করে প্রদর্শন করে। এটি ব্যবহারকারীকে একটি নির্দিষ্ট পরিমাণ ডেটা একসাথে প্রদর্শন করতে দেয়, এবং পরবর্তীতে অন্যান্য পৃষ্ঠায় চলে যেতে সাহায্য করে। ExtJS তে pagination সাধারণত store এবং pagingtoolbar ব্যবহার করে করা হয়।
pageSize প্রপার্টি ব্যবহার করা হয়।pagingtoolbar ব্যবহার করা হয়।Ext.create('Ext.data.Store', {
model: 'MyApp.model.User',
pageSize: 20, // প্রতি পৃষ্ঠায় ২০টি আইটেম
proxy: {
type: 'ajax',
url: '/users', // ডেটার উৎস
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'total' // মোট রেকর্ড সংখ্যা
}
},
autoLoad: true
});
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 }
],
bbar: {
xtype: 'pagingtoolbar', // পেজিনেশন টুলবার
store: 'Users', // স্টোরের রেফারেন্স
displayInfo: true // তথ্য প্রদর্শন
},
renderTo: Ext.getBody()
});
pageSize: প্রতি পৃষ্ঠায় কতটি রেকর্ড দেখানো হবে।proxy: AJAX এর মাধ্যমে ডেটা সার্ভার থেকে লোড করা হয়।pagingtoolbar: পেজিনেশন কন্ট্রোল যোগ করার জন্য ব্যবহৃত।এখানে, প্রতি পৃষ্ঠায় ২০টি রেকর্ড দেখানো হবে এবং পেজ নেভিগেশন কন্ট্রোল (যেমন: আগের, পরের, পেজ নম্বর) নিচে প্রদর্শিত হবে।
Infinite Scrolling হলো এমন একটি পদ্ধতি যেখানে ডেটা শুধু তখনই লোড হয় যখন ব্যবহারকারী স্ক্রোল ডাউন করেন, অর্থাৎ একটি নির্দিষ্ট ডেটা সীমা না থাকলে নতুন ডেটা স্বয়ংক্রিয়ভাবে লোড হয়। এটি সাধারণত bufferedrenderer এবং infinite scrolling ব্যবহৃত হয়, এবং ডেটার বড় পরিমাণে লোড করার সময় এটি পারফরম্যান্স উন্নত করতে সহায়ক।
buffered লোডিং কনফিগারেশন ব্যবহার করা হয়।Ext.create('Ext.data.Store', {
model: 'MyApp.model.User',
pageSize: 50, // একবারে কতটি রেকর্ড লোড হবে
proxy: {
type: 'ajax',
url: '/users',
reader: {
type: 'json',
rootProperty: 'data',
totalProperty: 'total'
}
},
remoteSort: true,
buffered: true, // ইনফিনিট স্ক্রোলিং সক্ষম করা
autoLoad: true
});
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 }
],
features: [{
ftype: 'bufferedrenderer', // ইনফিনিট স্ক্রোলিং সক্ষম করতে
threshold: 200 // স্ক্রল করার পর ডেটা লোড হবে
}],
renderTo: Ext.getBody()
});
buffered: true: এটি ইনফিনিট স্ক্রোলিং সক্ষম করতে ব্যবহৃত হয়।bufferedrenderer: এটি একটি বিশেষ ধরনের রেন্ডারিং যেটি ইনফিনিট স্ক্রোলিং ব্যবহারের সময় ডেটা প্রক্রিয়া করে।threshold: এটি স্ক্রোলিং এর জন্য কতটা স্ক্রল হওয়ার পর ডেটা লোড হবে তা নির্ধারণ করে।এখানে, ব্যবহারকারী যখন স্ক্রল করবেন, নতুন ডেটা অনায়াসে লোড হবে। প্রতি স্ক্রল সেশনে ৫০টি নতুন রেকর্ড লোড হবে।
| বৈশিষ্ট্য | Pagination | Infinite Scrolling |
|---|---|---|
| ডেটা লোডিং | এক পৃষ্ঠায় নির্দিষ্ট পরিমাণ ডেটা | স্ক্রল করলে স্বয়ংক্রিয়ভাবে নতুন ডেটা লোড হয় |
| পারফরম্যান্স | কম পারফরম্যান্সের প্রয়োজন | বড় ডেটা সিস্টেমে পারফরম্যান্স বাড়ায় |
| ব্যবহার | পৃষ্ঠার মধ্যে স্যুইচিং করা | স্ক্রলিং সহ ধারাবাহিক ডেটা লোড করা |
| ইউজার ইন্টারফেস | পেজ নেভিগেশন বার সহ | স্ক্রলিং অভিজ্ঞতা |
pagingtoolbar ব্যবহার করে পেজ নেভিগেশন কন্ট্রোল যোগ করা হয়।bufferedrenderer এবং buffered: true কনফিগারেশন ব্যবহার করে এটি কার্যকরী হয়।এটি আপনার অ্যাপ্লিকেশনের প্রয়োজনের উপর ভিত্তি করে Pagination বা Infinite Scrolling বেছে নেওয়ার জন্য সহায়ক হতে পারে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
