ExtJS একটি শক্তিশালী ফ্রন্টএন্ড ফ্রেমওয়ার্ক, যা Drag and Drop (ড্র্যাগ এবং ড্রপ) ফিচারকে সহজে ইনটিগ্রেট করতে সহায়তা করে। Grid এবং Tree কম্পোনেন্টে ড্র্যাগ এবং ড্রপ কার্যকলাপ ব্যবহার করে ব্যবহারকারীরা ইন্টারফেসের মধ্যে ডেটা বা উপাদান স্থানান্তর করতে পারে। এই ফিচারটি বিশেষভাবে ইন্টারঅ্যাকটিভ অ্যাপ্লিকেশন, যেমন টাস্ক ম্যানেজমেন্ট, কন্টেন্ট ম্যানেজমেন্ট সিস্টেমে ব্যবহার করা হয়।
১. Grid কম্পোনেন্টে Complex Drag and Drop
ExtJS এর Grid কম্পোনেন্টে Drag and Drop ব্যবহারের মাধ্যমে ব্যবহারকারীরা একটি রেকর্ডকে একটি গ্রিড থেকে অন্য গ্রিডে সরাতে পারে বা একই গ্রিডের মধ্যে রেকর্ডগুলো স্থানান্তর করতে পারে।
Grid এর মধ্যে Drag and Drop উদাহরণ:
Ext.create('Ext.grid.Panel', {
title: 'Grid Drag and Drop',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'email'],
data: [
{ name: 'John', email: 'john@example.com' },
{ name: 'Jane', email: 'jane@example.com' }
]
}),
columns: [
{ text: 'Name', dataIndex: 'name', flex: 1 },
{ text: 'Email', dataIndex: 'email', flex: 2 }
],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'peopleGrid', // গ্রিডের জন্য ড্র্যাগ গ্রুপ
dropGroup: 'peopleGrid' // গ্রিডের জন্য ড্রপ গ্রুপ
}
},
renderTo: Ext.getBody()
});
এখানে, gridviewdragdrop প্লাগইনটি ব্যবহার করা হয়েছে, যা গ্রিডের মধ্যে ড্র্যাগ এবং ড্রপ অপারেশন সক্ষম করে। dragGroup এবং dropGroup গ্রুপের মাধ্যমে ড্র্যাগ এবং ড্রপ কার্যকর করা হয়।
গ্রিডে ড্র্যাগ এবং ড্রপ এর বৈশিষ্ট্য:
dragGroup: এটি ড্র্যাগ গ্রুপকে চিহ্নিত করে, যাতে একই গ্রুপে অন্তর্ভুক্ত গ্রিড কম্পোনেন্টগুলোর মধ্যে ড্র্যাগ এবং ড্রপ সম্ভব হয়।dropGroup: এটি ড্রপ গ্রুপকে চিহ্নিত করে, যার মাধ্যমে গ্রিডে রেকর্ড ড্রপ করার জন্য উপযুক্ত গ্রুপ নির্ধারণ করা হয়।gridviewdragdrop: এই প্লাগইনটি ড্র্যাগ এবং ড্রপ কার্যকলাপ পরিচালনার জন্য ব্যবহৃত হয়।
২. Tree কম্পোনেন্টে Complex Drag and Drop
Tree কম্পোনেন্টে Drag and Drop ব্যবহার করে আপনি একটি নোডকে অন্য নোডের মধ্যে সরাতে পারেন, অথবা একই ট্রীতে একটি নোডের অবস্থান পরিবর্তন করতে পারেন। এটি বিশেষভাবে হায়ারারকিক্যাল ডেটা ম্যানেজমেন্টে ব্যবহৃত হয়।
Tree এর মধ্যে Drag and Drop উদাহরণ:
Ext.create('Ext.tree.Panel', {
title: 'Tree Drag and Drop',
width: 400,
height: 300,
store: Ext.create('Ext.data.TreeStore', {
root: {
text: 'Root',
expanded: true,
children: [
{ text: 'Node 1', leaf: true },
{ text: 'Node 2', leaf: true },
{ text: 'Node 3', leaf: true }
]
}
}),
rootVisible: false, // রুট নোডটি দৃশ্যমান হবে না
viewConfig: {
plugins: {
ptype: 'treeviewdragdrop',
dragGroup: 'treeGroup', // ট্রী গ্রুপ ড্র্যাগের জন্য
dropGroup: 'treeGroup' // ট্রী গ্রুপ ড্রপের জন্য
}
},
renderTo: Ext.getBody()
});
এখানে:
treeviewdragdropপ্লাগইনটি ব্যবহার করা হয়েছে যা ট্রী কম্পোনেন্টের মধ্যে ড্র্যাগ এবং ড্রপ সক্ষম করে।dragGroupএবংdropGroupব্যবহার করা হয়েছে যাতে ট্রীতে একটি নোড অন্য নোডের মধ্যে ড্র্যাগ এবং ড্রপ হতে পারে।
ট্রীতে ড্র্যাগ এবং ড্রপ এর বৈশিষ্ট্য:
dragGroup: এই সেটিংটি ট্রী নোডের জন্য ড্র্যাগ গ্রুপ নির্ধারণ করে।dropGroup: এই সেটিংটি ট্রী নোডের জন্য ড্রপ গ্রুপ নির্ধারণ করে।treeviewdragdrop: ট্রী কম্পোনেন্টের মধ্যে ড্র্যাগ এবং ড্রপ ফিচার সক্রিয় করে।
৩. ড্র্যাগ এবং ড্রপ ইভেন্ট হ্যান্ডলিং
আপনি যদি ড্র্যাগ এবং ড্রপ অপারেশনের সময় কিছু কাস্টম লজিক প্রয়োগ করতে চান, তবে আপনি ড্র্যাগ এবং ড্রপ ইভেন্টগুলিকে হ্যান্ডল করতে পারেন। ExtJS এই ইভেন্টগুলোর জন্য dragdrop প্লাগইন এবং কাস্টম listeners প্রদান করে।
ড্র্যাগ এবং ড্রপ ইভেন্ট হ্যান্ডলিং উদাহরণ:
var grid = Ext.create('Ext.grid.Panel', {
title: 'Grid Drag and Drop with Event Handling',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'email'],
data: [
{ name: 'John', email: 'john@example.com' },
{ name: 'Jane', email: 'jane@example.com' }
]
}),
columns: [
{ text: 'Name', dataIndex: 'name', flex: 1 },
{ text: 'Email', dataIndex: 'email', flex: 2 }
],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'peopleGrid',
dropGroup: 'peopleGrid'
},
listeners: {
drop: function(node, data, dropRec, dropPosition) {
Ext.Msg.alert('Drop Event', 'Item Dropped!');
}
}
},
renderTo: Ext.getBody()
});
এখানে:
dropইভেন্ট হ্যান্ডল করা হয়েছে, যা ড্র্যাগ এবং ড্রপ প্রক্রিয়া শেষে চালিত হয়।node,data,dropRec,dropPositionইভেন্টের মাধ্যমে ড্রপ হওয়া উপাদান এবং এর অবস্থান সম্পর্কিত ডেটা পাওয়া যায়।
৪. ড্র্যাগ এবং ড্রপ কাস্টমাইজেশন
আপনি যদি ড্র্যাগ এবং ড্রপ এর আচরণ কাস্টমাইজ করতে চান, তবে আপনি dragText, copy, move অপশনগুলো ব্যবহার করতে পারেন। এগুলি আপনাকে ড্র্যাগ এবং ড্রপ এর ধরন, টেক্সট কনফিগারেশন ইত্যাদি কাস্টমাইজ করতে সহায়ক।
কাস্টমাইজড ড্র্যাগ এবং ড্রপ উদাহরণ:
Ext.create('Ext.grid.Panel', {
title: 'Customized Grid Drag and Drop',
store: Ext.create('Ext.data.Store', {
fields: ['name', 'email'],
data: [
{ name: 'John', email: 'john@example.com' },
{ name: 'Jane', email: 'jane@example.com' }
]
}),
columns: [
{ text: 'Name', dataIndex: 'name', flex: 1 },
{ text: 'Email', dataIndex: 'email', flex: 2 }
],
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
dragGroup: 'peopleGrid',
dropGroup: 'peopleGrid',
dragText: 'Drag this record' // কাস্টম ড্র্যাগ টেক্সট
}
},
renderTo: Ext.getBody()
});
এখানে dragText ব্যবহার করা হয়েছে যা ড্র্যাগ অপারেশনের সময় ব্যবহারকারীর কাছে টেক্সট প্রদর্শন করবে।
সারাংশ
- Grid এবং Tree-তে Drag and Drop: ExtJS এর
gridviewdragdropএবংtreeviewdragdropপ্লাগইন ব্যবহারের মাধ্যমে গ্রিড এবং ট্রী কম্পোনেন্টে ড্র্যাগ এবং ড্রপ কার্যকলাপ পরিচালনা করা যায়। - ড্র্যাগ এবং ড্রপ ইভেন্ট হ্যান্ডলিং: ড্র্যাগ এবং ড্রপ অপারেশন কাস্টম ইভেন্ট হ্যান্ডলার ব্যবহার করে পরিচালনা করা যায়, যেখানে কাস্টম লজিক প্রয়োগ করা যায়।
- ড্র্যাগ এবং ড্রপ কাস্টমাইজেশন: ড্র্যাগ এবং ড্রপ এর বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করা যায়, যেমন টেক্সট, ট্যাগ, ড্র্যাগ অপশন ইত্যাদি।
ExtJS তে Drag and Drop ব্যবহারের মাধ্যমে ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি অ্যাপ্লিকেশন তৈরি করা সম্ভব, যা ডেটা ম্যানেজমেন্ট এবং ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও কার্যকরী করে তোলে।
Read more
