ExtJS এ Drag and Drop (D&D) ফিচার একটি অত্যন্ত গুরুত্বপূর্ণ ইউজার ইন্টারফেস (UI) বৈশিষ্ট্য, যা ব্যবহারকারীদের কম্পোনেন্ট বা ডেটা সহজে একটি স্থান থেকে অন্য স্থানে সরানোর অনুমতি দেয়। ExtJS তে Drag and Drop ফিচার ব্যবহারের মাধ্যমে অ্যাপ্লিকেশনটি আরও ইন্টারেক্টিভ এবং ইউজার ফ্রেন্ডলি হয়ে ওঠে।

Drag and Drop এর মৌলিক ধারণা

• Drag: ইউজার একটি কম্পোনেন্ট বা এলিমেন্টকে ধরে নিয়ে যায়।
• Drop: ইউজার একটি এলিমেন্টে ড্র্যাগ করা আইটেমটি ফেলতে পারে।

ExtJS তে Drag and Drop কার্যক্রম Ext.dd (Drag and Drop) লাইব্রেরি ব্যবহার করে তৈরি করা হয়। এটি ইলিমেন্ট বা কম্পোনেন্টগুলির মধ্যে ড্র্যাগ এবং ড্রপ ইন্টারঅ্যাকশন পরিচালনা করে।

ExtJS তে Drag and Drop কার্যকলাপের জন্য প্রয়োজনীয় কনফিগারেশন

ExtJS তে Draggable এবং Droppable কম্পোনেন্টের মাধ্যমে ড্র্যাগ এবং ড্রপ কার্যকারিতা অ্যাক্টিভেট করা যায়।

১. Draggable (ড্র্যাগেবল) কম্পোনেন্ট তৈরি করা

ড্র্যাগেবল কম্পোনেন্ট এমন একটি কম্পোনেন্ট যা ইউজার ড্র্যাগ করতে পারে। এটি Ext.drag.Source ব্যবহার করে কনফিগার করা হয়।

উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'Draggable Panel',
    width: 200,
    height: 150,
    html: 'Drag me!',
    draggable: true,  // এটি ড্র্যাগযোগ্য করে তোলে
    renderTo: Ext.getBody()
});

এখানে, draggable: true কনফিগারেশন ব্যবহার করে প্যানেলটিকে ড্র্যাগgable (ড্র্যাগ করা সম্ভব) করা হয়েছে।

২. Droppable (ড্রপেবল) এলিমেন্ট তৈরি করা

ড্রপেবল এলিমেন্ট হল এমন একটি এলিমেন্ট যেখানে ড্র্যাগ করা আইটেমগুলি ড্রপ করা যেতে পারে। এটি Ext.drag.Target ব্যবহার করে কনফিগার করা হয়।

উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'Drop Area',
    width: 300,
    height: 200,
    html: 'Drop here!',
    renderTo: Ext.getBody(),
    style: {
        border: '1px solid black'
    },
    listeners: {
        render: function(panel) {
            panel.getEl().on('dragenter', function(e) {
                e.stopEvent(); // ড্র্যাগ এন্টার ইভেন্ট স্টপ করা
                panel.el.setStyle('background-color', '#e0e0e0'); // ড্রপ এরিয়া হাইলাইট
            });
            panel.getEl().on('dragleave', function(e) {
                e.stopEvent();
                panel.el.setStyle('background-color', ''); // ড্রপ এরিয়া স্বাভাবিক রঙে ফিরে আসা
            });
        }
    }
});

এখানে, render লিসেনারে ড্র্যাগ ইভেন্টের জন্য কাস্টম হ্যান্ডলার দেওয়া হয়েছে। dragenter এবং dragleave ইভেন্ট ব্যবহার করে ড্রপ এরিয়া হাইলাইট করা হচ্ছে।

৩. Drag and Drop এর জন্য Custom Listener তৈরি করা

আপনি dragstart, dragover, drop, ইত্যাদি ইভেন্টগুলোর জন্য কাস্টম লিসেনার তৈরি করতে পারেন। এটি ব্যবহারকারীদের ড্র্যাগ এবং ড্রপ কার্যক্রমের উপর আরও নিয়ন্ত্রণ দিতে সাহায্য করে।

উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'Draggable Panel',
    width: 150,
    height: 100,
    html: 'Drag me!',
    draggable: true,
    listeners: {
        dragstart: function(panel) {
            console.log('Drag Started');
        },
        dragend: function(panel) {
            console.log('Drag Ended');
        }
    },
    renderTo: Ext.getBody()
});

Ext.create('Ext.panel.Panel', {
    title: 'Drop Area',
    width: 300,
    height: 200,
    html: 'Drop Here!',
    renderTo: Ext.getBody(),
    style: {
        border: '1px dashed gray'
    },
    listeners: {
        drop: function(e) {
            alert('Item Dropped');
        }
    }
});

• dragstart: ড্র্যাগ শুরু হওয়ার সময়।
• dragend: ড্র্যাগ শেষ হওয়ার সময়।
• drop: একটি আইটেম ড্রপ করা হলে এটি ট্রিগার হয়।

৪. Grid Row Drag and Drop

ExtJS এর গ্রিডে ড্র্যাগ এবং ড্রপ করতে, আপনি Ext.grid.Panel কম্পোনেন্টে ddGroup এবং dragGroup কনফিগারেশন ব্যবহার করতে পারেন।

উদাহরণ:

Ext.create('Ext.grid.Panel', {
    title: 'Drag and Drop Grid',
    store: Ext.create('Ext.data.Store', {
        fields: ['name', 'email'],
        data: [
            { name: 'John Doe', email: 'john.doe@example.com' },
            { name: 'Jane Smith', email: 'jane.smith@example.com' }
        ]
    }),
    columns: [
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Email', dataIndex: 'email', flex: 2 }
    ],
    enableDragDrop: true,
    ddGroup: 'gridDDGroup', // গ্রিডের জন্য ড্র্যাগ এবং ড্রপ গ্রুপ
    renderTo: Ext.getBody()
});

এখানে enableDragDrop: true কনফিগারেশন ব্যবহার করে গ্রিডে ড্র্যাগ এবং ড্রপ সক্ষম করা হয়েছে।

৫. Drag and Drop Grid Row Example

Ext.create('Ext.grid.Panel', {
    title: 'Row Drag and Drop',
    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',
            dragText: 'Drag a row to reorder'
        }
    },
    renderTo: Ext.getBody()
});

এখানে, gridviewdragdrop প্লাগইন ব্যবহার করে গ্রিড রোকে ড্র্যাগ এবং ড্রপ করা যাবে।

সারাংশ

1. Draggable: draggable: true ব্যবহার করে কম্পোনেন্ট ড্র্যাগযোগ্য করা হয়।
2. Droppable: droppable: true ব্যবহার করে এলিমেন্টে ড্র্যাগ করা আইটেমগুলি ড্রপ করা যায়।
3. Listeners: dragstart, dragend, drop, dragenter, ইত্যাদি ইভেন্টের জন্য কাস্টম লিসেনার ব্যবহার করা যেতে পারে।
4. Grid Drag and Drop: gridviewdragdrop প্লাগইন বা enableDragDrop কনফিগারেশন ব্যবহার করে গ্রিডে ড্র্যাগ এবং ড্রপ ফিচার সক্ষম করা যায়।

ExtJS তে Drag and Drop ফিচার ব্যবহারের মাধ্যমে আপনি ইউজারদের জন্য একটি ইন্টারেক্টিভ এবং সুবিধাজনক ইউজার ইন্টারফেস তৈরি করতে পারেন।

Drag and Drop (D&D) একটি শক্তিশালী ইউজার ইন্টারফেস ফিচার যা ব্যবহারকারীদের UI উপাদানগুলিকে একটি স্থান থেকে অন্য স্থানে টেনে নিয়ে যাওয়ার ক্ষমতা প্রদান করে। ExtJS একটি অন্তর্নির্মিত Drag and Drop API সরবরাহ করে যা কম্পোনেন্টগুলিকে সহজেই ড্র্যাগ এবং ড্রপ করার মাধ্যমে ইন্টারঅ্যাক্টিভ অ্যাপ্লিকেশন তৈরি করতে সহায়ক।

Drag and Drop API এর ভূমিকা:

ExtJS এর Drag and Drop API ব্যবহারকারীদের জন্য সহজ এবং ইন্টারেক্টিভ উপায়ে UI উপাদানগুলির মধ্যে স্থানান্তর নিশ্চিত করে। এটি ব্যবহৃত হয়:

• কম্পোনেন্টের মধ্যে তথ্য স্থানান্তর (যেমন, গ্রিডের মধ্যে রেকর্ড স্থানান্তর)।
• ট্যাব, গ্রিড, প্যানেল বা অন্যান্য উপাদানগুলির মধ্যে ভিজ্যুয়াল এলিমেন্ট স্থানান্তর।
• একটি ইন্টারঅ্যাকটিভ ড্র্যাগ এবং ড্রপ অভিজ্ঞতা প্রদান করা।

ExtJS Drag and Drop API এর মূল বৈশিষ্ট্য

1. DragSource:
   • এটি এমন একটি উপাদান বা কম্পোনেন্ট নির্ধারণ করে যা ড্র্যাগ করা যাবে।
   • DragSource এর মাধ্যমে, আপনি কোন উপাদানকে ড্র্যাগ করার জন্য প্রস্তুত করতে পারবেন।
2. DropTarget:
   • এটি একটি ড্রপ টার্গেট নির্ধারণ করে যেখানে ড্র্যাগ করা উপাদানটি ড্রপ হবে।
   • DropTarget এর মাধ্যমে আপনি ড্র্যাগ করা উপাদানটি কোথায় ড্রপ হবে তা কনফিগার করতে পারবেন।
3. Events:
   • dragstart: ড্র্যাগ শুরু হওয়ার সময়।
   • dragend: ড্র্যাগ শেষ হওয়ার সময়।
   • dragover: ড্র্যাগ করা উপাদান যখন ড্রপ টার্গেটের উপর চলে যায়।
   • drop: ড্র্যাগ করা উপাদান টার্গেটে ড্রপ হওয়ার পর।

ExtJS Drag and Drop API ব্যবহার করা

নিম্নে একটি সাধারণ উদাহরণ দেখানো হচ্ছে যেখানে দুটি প্যানেল থাকবে, একটিকে ড্র্যাগ সোর্স এবং অপরটিকে ড্রপ টার্গেট হিসেবে ব্যবহার করা হয়েছে।

উদাহরণ: Panel Drag and Drop

Ext.create('Ext.panel.Panel', {
    title: 'Drag Me',
    width: 200,
    height: 200,
    html: 'Drag this panel!',
    renderTo: Ext.getBody(),
    draggable: true, // প্যানেলটিকে ড্র্যাগযোগ্য করতে
    listeners: {
        dragstart: function (dragSource) {
            console.log('Drag started!');
        },
        dragend: function (dragSource) {
            console.log('Drag ended!');
        }
    }
});

Ext.create('Ext.panel.Panel', {
    title: 'Drop Here',
    width: 200,
    height: 200,
    renderTo: Ext.getBody(),
    droppable: true, // ড্রপযোগ্য করার জন্য
    listeners: {
        dragover: function (dropTarget, e, data) {
            console.log('Dragging over the drop target!');
        },
        drop: function (dropTarget, e, data) {
            console.log('Dropped!');
        }
    }
});

এখানে:

• draggable: true: প্রথম প্যানেলটিকে ড্র্যাগযোগ্য করেছে।
• droppable: true: দ্বিতীয় প্যানেলটিকে ড্রপযোগ্য করেছে।
• dragstart, dragend, dragover, এবং drop ইভেন্টগুলো ড্র্যাগ এবং ড্রপ প্রক্রিয়ার পর্যায় চিহ্নিত করে এবং তা কাস্টম কার্যক্রমে ট্রিগার করে।

DragSource এবং DropTarget কনফিগারেশন

DragSource এবং DropTarget কনফিগারেশন ব্যবহারের মাধ্যমে আপনি আরও অনেক নিয়ন্ত্রণ পেতে পারেন। এখানে একটি বিস্তারিত উদাহরণ দেওয়া হচ্ছে:

উদাহরণ: গ্রিডের মধ্যে ড্র্যাগ এবং ড্রপ

Ext.create('Ext.data.Store', {
    storeId: 'simpleStore',
    fields: ['name'],
    data: [
        { 'name': 'John' },
        { 'name': 'Jane' },
        { 'name': 'Peter' },
        { 'name': 'Mark' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Drag and Drop Grid',
    store: Ext.data.StoreManager.lookup('simpleStore'),
    columns: [{ text: 'Name', dataIndex: 'name', flex: 1 }],
    width: 400,
    height: 250,
    renderTo: Ext.getBody(),
    draggable: true, // গ্রিডকে ড্র্যাগযোগ্য করতে
    droppable: true, // গ্রিডকে ড্রপযোগ্য করতে
    listeners: {
        drop: function (dropTarget, e, data) {
            var draggedRecord = data.records[0]; // ড্র্যাগ করা রেকর্ড
            var gridStore = this.getStore();
            gridStore.add(draggedRecord); // ড্রপ করা রেকর্ডটি গ্রিডে অ্যাড করা
        }
    }
});

এখানে:

• DragSource: ড্র্যাগ সোর্স হিসেবে গ্রিডের রেকর্ড ব্যবহৃত হচ্ছে।
• DropTarget: একটি ড্রপ টার্গেট নির্ধারণ করা হয়েছে যেখানে ড্র্যাগ করা রেকর্ডটি ড্রপ হবে।
• drop ইভেন্ট ব্যবহার করে, যখন রেকর্ডটি ড্রপ করা হয় তখন সেটি স্টোরে অ্যাড করা হয়।

ExtJS Drag and Drop API এর মূল উপকারিতা

1. ইউজার ইন্টারফেসে ইন্টারঅ্যাকটিভিটি: এটি ব্যবহারকারীদের কম্পোনেন্টগুলোর মধ্যে ডেটা স্থানান্তর করার সুযোগ দেয়, যা অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
2. ডেটার ম্যানিপুলেশন: ড্র্যাগ এবং ড্রপের মাধ্যমে ডেটা এক জায়গা থেকে অন্য জায়গায় স্থানান্তর করা সহজ হয়, যেমন: গ্রিডের মধ্যে রেকর্ড স্থানান্তর করা।
3. প্রাকৃতিক উপায়ে যোগাযোগ: Drag and Drop API ইউজারের সাথে প্রাকৃতিক এবং ইন্টারঅ্যাকটিভ যোগাযোগের মাধ্যম হিসেবে কাজ করে।
4. ডায়নামিক UI: ড্র্যাগ এবং ড্রপ ফিচার ব্যবহার করে ডায়নামিক এবং রেসপন্সিভ UI তৈরি করা যায়, যা ব্যবহারকারীদের তাদের কাজ আরও সহজভাবে সম্পন্ন করতে সহায়ক হয়।

সারাংশ

ExtJS এর Drag and Drop API ব্যবহারকারীদের জন্য একটি শক্তিশালী এবং ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরির উপকরণ। এটি DragSource এবং DropTarget কনফিগারেশন ব্যবহার করে কম্পোনেন্টগুলির মধ্যে ড্র্যাগ এবং ড্রপ ইভেন্টগুলো সহজভাবে পরিচালনা করে। এই API টির সাহায্যে, ডেটার স্থানান্তর এবং UI এর ইন্টারঅ্যাকশন সহজ এবং আরও কার্যকর হয়।

ExtJS একটি শক্তিশালী ফ্রন্টএন্ড ফ্রেমওয়ার্ক, যা Drag and Drop ফিচার সমর্থন করে। এটি ব্যবহারকারীদের উপাদানগুলি (কম্পোনেন্ট, প্যানেল, গ্রিড ইত্যাদি) ড্র্যাগ এবং ড্রপ করার মাধ্যমে ইন্টারঅ্যাক্ট করতে সহায়তা করে। ExtJS-এ Drag and Drop এর জন্য বিল্ট-ইন সাপোর্ট এবং ইভেন্ট হ্যান্ডলার রয়েছে যা খুব সহজেই এই ফিচারটি অ্যাপ্লিকেশনগুলিতে সংযুক্ত করতে পারে।

এখানে আমরা একটি সাধারণ Drag and Drop উদাহরণ দেখব যেখানে একটি প্যানেলকে অন্য প্যানেলে ড্র্যাগ এবং ড্রপ করা যাবে।

১. ড্র্যাগ এবং ড্রপ অ্যাপ্লিকেশন তৈরি করা

ExtJS-এ ড্র্যাগ এবং ড্রপ করার জন্য আমরা Draggable এবং Droppable এর মত প্রপার্টি ব্যবহার করতে পারি। নিচে একটি বেসিক Drag and Drop উদাহরণ দেখানো হলো।

উদাহরণ: একটি প্যানেল ড্র্যাগ এবং ড্রপ করা

Ext.create('Ext.panel.Panel', {
    title: 'Drag Me!',
    width: 200,
    height: 100,
    draggable: true, // প্যানেলটি ড্র্যাগ করা যাবে
    renderTo: Ext.getBody(),
    html: '<p>Drag me to another area!</p>',
    listeners: {
        render: function(panel) {
            panel.getEl().on('drag', function(e, target) {
                console.log('Panel is being dragged');
            });
        }
    }
});

Ext.create('Ext.panel.Panel', {
    title: 'Drop Zone',
    width: 300,
    height: 200,
    renderTo: Ext.getBody(),
    style: 'border: 2px solid black; margin-top: 20px;',
    html: '<p>Drop here!</p>',
    listeners: {
        render: function(panel) {
            panel.getEl().on('drop', function(e, target) {
                console.log('Panel was dropped here');
            });
        }
    }
});

এখানে:

• প্রথম panel ড্র্যাগযোগ্য (draggable: true), যার মানে এটি অন্য প্যানেলে ড্র্যাগ করা যাবে।
• দ্বিতীয় প্যানেলটি drop zone হিসেবে ব্যবহৃত হচ্ছে এবং এটি ড্র্যাগ করা প্যানেলটি গ্রহণ করবে।
• listeners ইভেন্ট ব্যবহার করে আমরা drag এবং drop ইভেন্ট হ্যান্ডল করছি।

২. Drag and Drop Grid Example

এখানে একটি Grid কম্পোনেন্ট ব্যবহার করে ড্র্যাগ এবং ড্রপ ইভেন্ট তৈরি করা হয়েছে, যেখানে আমরা গ্রিডের একটি রেকর্ড ড্র্যাগ করে অন্য গ্রিডে ড্রপ করতে পারি।

গ্রিডে ড্র্যাগ এবং ড্রপ উদাহরণ

Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [
        { 'name': 'Lisa', 'email': 'lisa@simpsons.com', 'phone': '555-111-1224' },
        { 'name': 'Bart', 'email': 'bart@simpsons.com', 'phone': '555-222-1234' },
        { 'name': 'Homer', 'email': 'homer@simpsons.com', 'phone': '555-222-1244' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    columns: [
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone', flex: 1 }
    ],
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragText: 'Drag and drop to reorder'
        }
    }
});

এখানে:

• gridviewdragdrop প্যানেলটি ড্র্যাগ এবং ড্রপ করার জন্য ব্যবহৃত প্লাগইন। এটি gridview এর মধ্যে ড্র্যাগ এবং ড্রপ কার্যকারিতা প্রদান করে।
• dragText: ড্র্যাগ করতে থাকা রেকর্ডের জন্য একটি টেক্সট প্রদান করা হয়।
• এটি গ্রিডের রেকর্ডগুলোকে একটি নতুন অবস্থানে ড্র্যাগ এবং ড্রপ করার জন্য সহায়ক।

৩. Drag and Drop Between Two Grids

এখন, আমরা দুটি গ্রিড তৈরি করব এবং এক গ্রিড থেকে অন্য গ্রিডে ডেটা ড্র্যাগ এবং ড্রপ করব।

দুটি গ্রিডের মধ্যে ড্র্যাগ এবং ড্রপ উদাহরণ:

Ext.create('Ext.data.Store', {
    storeId: 'firstStore',
    fields: ['name', 'email', 'phone'],
    data: [
        { 'name': 'Lisa', 'email': 'lisa@simpsons.com', 'phone': '555-111-1224' },
        { 'name': 'Bart', 'email': 'bart@simpsons.com', 'phone': '555-222-1234' }
    ]
});

Ext.create('Ext.data.Store', {
    storeId: 'secondStore',
    fields: ['name', 'email', 'phone'],
    data: [
        { 'name': 'Homer', 'email': 'homer@simpsons.com', 'phone': '555-222-1244' }
    ]
});

Ext.create('Ext.grid.Panel', {
    title: 'First Grid',
    store: Ext.data.StoreManager.lookup('firstStore'),
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    columns: [
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone', flex: 1 }
    ],
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragText: 'Drag and drop to reorder'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Second Grid',
    store: Ext.data.StoreManager.lookup('secondStore'),
    width: 400,
    height: 300,
    renderTo: Ext.getBody(),
    columns: [
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone', flex: 1 }
    ],
    viewConfig: {
        plugins: {
            ptype: 'gridviewdragdrop',
            dragText: 'Drag and drop items here'
        }
    }
});

এখানে, দুটি গ্রিড ব্যবহার করা হয়েছে:

1. First Grid: প্রথম গ্রিড থেকে ডেটা ড্র্যাগ করা হবে।
2. Second Grid: এখানে ড্রপ করা হবে।

gridviewdragdrop প্লাগইন ব্যবহার করা হয়েছে, যা গ্রিডে ড্র্যাগ এবং ড্রপ কার্যকারিতা সক্ষম করে।

সারাংশ

1. ExtJS Drag and Drop: ExtJS তে ড্র্যাগ এবং ড্রপ ফিচারটি খুব সহজে অ্যাপ্লিকেশনে সংযুক্ত করা যায়। Draggable এবং Droppable ফিচারের মাধ্যমে আপনি যেকোনো কম্পোনেন্ট ড্র্যাগ এবং ড্রপ করতে পারেন।
2. Grid Drag and Drop: গ্রিডে রেকর্ড ড্র্যাগ এবং ড্রপ করার জন্য gridviewdragdrop প্লাগইন ব্যবহার করা হয়।
3. Multiple Grids: একাধিক গ্রিডের মধ্যে ডেটা ড্র্যাগ এবং ড্রপ করতে দুটি গ্রিডের মধ্যে সম্পর্ক স্থাপন করা হয়।

এটি আপনাকে একাধিক ভিউ বা ডেটা সেটের মধ্যে সহজে নেভিগেট করার সুযোগ দেয় এবং ইউজারের জন্য ইন্টারেক্টিভ অভিজ্ঞতা তৈরি করে।

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 ব্যবহার করা হয়েছে যা ড্র্যাগ অপারেশনের সময় ব্যবহারকারীর কাছে টেক্সট প্রদর্শন করবে।

সারাংশ

1. Grid এবং Tree-তে Drag and Drop: ExtJS এর gridviewdragdrop এবং treeviewdragdrop প্লাগইন ব্যবহারের মাধ্যমে গ্রিড এবং ট্রী কম্পোনেন্টে ড্র্যাগ এবং ড্রপ কার্যকলাপ পরিচালনা করা যায়।
2. ড্র্যাগ এবং ড্রপ ইভেন্ট হ্যান্ডলিং: ড্র্যাগ এবং ড্রপ অপারেশন কাস্টম ইভেন্ট হ্যান্ডলার ব্যবহার করে পরিচালনা করা যায়, যেখানে কাস্টম লজিক প্রয়োগ করা যায়।
3. ড্র্যাগ এবং ড্রপ কাস্টমাইজেশন: ড্র্যাগ এবং ড্রপ এর বিভিন্ন বৈশিষ্ট্য কাস্টমাইজ করা যায়, যেমন টেক্সট, ট্যাগ, ড্র্যাগ অপশন ইত্যাদি।

ExtJS তে Drag and Drop ব্যবহারের মাধ্যমে ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি অ্যাপ্লিকেশন তৈরি করা সম্ভব, যা ডেটা ম্যানেজমেন্ট এবং ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও কার্যকরী করে তোলে।

Drag and Drop (DND) ফিচার ব্যবহার করে ফাইল আপলোড একটি শক্তিশালী এবং ইন্টারঅ্যাকটিভ পদ্ধতি, যা ব্যবহারকারীদের সহজে ফাইলগুলি ওয়েব অ্যাপ্লিকেশন বা সাইটে আপলোড করতে সহায়তা করে। ExtJS এর Drag and Drop সমর্থন এবং File Upload ফিচার ব্যবহারের মাধ্যমে আপনি একটি কাস্টম ড্র্যাগ এবং ড্রপ ফাইল আপলোড সিস্টেম তৈরি করতে পারবেন।

এখানে, আমরা ExtJS এর মাধ্যমে কাস্টম ড্র্যাগ এবং ড্রপ ফিচার ব্যবহার করে ফাইল আপলোড করার জন্য একটি উদাহরণ দেখবো।

১. ExtJS এর মাধ্যমে কাস্টম Drag and Drop ফাইল আপলোড

এটি করার জন্য আমরা কয়েকটি কাস্টম ফিচার এবং FileReader API ব্যবহার করব। প্রথমে, drag and drop সাপোর্ট এবং তারপর upload ফাংশনালিটি তৈরি করব।

কাস্টম ড্র্যাগ এবং ড্রপ ফাইল আপলোড উদাহরণ:

Ext.create('Ext.panel.Panel', {
    title: 'Drag and Drop File Upload',
    width: 500,
    height: 200,
    renderTo: Ext.getBody(),
    layout: 'fit',
    
    // Drag and drop configuration
    listeners: {
        render: function(panel) {
            panel.getEl().on('dragover', function(e) {
                e.stopEvent();
                panel.body.setStyle('background-color', '#f0f0f0'); // Hover effect
            });

            panel.getEl().on('dragleave', function(e) {
                e.stopEvent();
                panel.body.setStyle('background-color', ''); // Remove hover effect
            });

            panel.getEl().on('drop', function(e) {
                e.stopEvent();
                panel.body.setStyle('background-color', ''); // Remove hover effect

                var files = e.browserEvent.dataTransfer.files;
                if (files.length > 0) {
                    var file = files[0];
                    // Call function to upload file
                    uploadFile(file);
                }
            });
        }
    },

    html: '<div style="height: 100%; display: flex; justify-content: center; align-items: center;">' +
          '<p>Drag and drop a file here to upload.</p></div>'
});

// Function to upload the file
function uploadFile(file) {
    var formData = new FormData();
    formData.append('file', file);

    // Create an AJAX request to upload the file
    Ext.Ajax.request({
        url: 'your-upload-endpoint.php', // Server-side script to handle file upload
        method: 'POST',
        rawData: formData,
        headers: {
            'Content-Type': null // Let the browser set the correct content-type for FormData
        },
        success: function(response) {
            Ext.Msg.alert('Success', 'File uploaded successfully!');
        },
        failure: function(response) {
            Ext.Msg.alert('Error', 'File upload failed.');
        }
    });
}

ব্যাখ্যা

1. render লিসেনার:
   • প্যানেলের render ইভেন্টে আমরা ড্র্যাগ এবং ড্রপ ইভেন্ট হ্যান্ডলিং সেট করছি।
   • dragover: ব্যবহারকারী যখন ফাইলটি প্যানেলের উপর ড্র্যাগ করবে তখন এটি ট্রিগার হবে। আমরা ব্যাকগ্রাউন্ড রং পরিবর্তন করছি যাতে ফাইল ড্রপ হওয়ার জন্য প্রস্তুত দেখায়।
   • dragleave: ফাইলটি প্যানেলের বাইরে চলে গেলে এটি ট্রিগার হয় এবং ব্যাকগ্রাউন্ড রং পূর্বাবস্থায় ফিরে যায়।
   • drop: ব্যবহারকারী যখন ফাইলটি প্যানেলের মধ্যে ছেড়ে দিবে, তখন এটি ট্রিগার হবে এবং uploadFile() ফাংশন কল হবে, যা ফাইলটি আপলোড করতে ব্যবহৃত হবে।
2. ফাইল আপলোডের জন্য uploadFile() ফাংশন:
   • FormData ব্যবহার করে ফাইলটি সার্ভারে পাঠানো হয়।
   • Ext.Ajax.request() ব্যবহার করে AJAX রিকুয়েস্ট পাঠানো হয়। এখানে, ফাইলটি POST মেথড দিয়ে সার্ভারে পাঠানো হয়।
3. সার্ভার সাইড:
   • এই উদাহরণে, your-upload-endpoint.php হল সেই URL যেখানে ফাইলটি আপলোড করা হবে। সার্ভার সাইডে ফাইল রিসিভ এবং প্রক্রিয়া করার জন্য সঠিক স্ক্রিপ্ট তৈরি করতে হবে।

২. ফাইল প্রিভিউ দেখানো

এছাড়া, আপনি যদি ফাইলের প্রিভিউ দেখতে চান, যেমন ইমেজ বা পিডিএফ ফাইল, তবে FileReader API ব্যবহার করে ফাইলের প্রিভিউ প্রদর্শন করতে পারেন।

ফাইল প্রিভিউ উদাহরণ:

function uploadFile(file) {
    // FileReader API to preview image
    var reader = new FileReader();
    
    reader.onload = function(e) {
        var img = new Image();
        img.src = e.target.result;
        var previewContainer = Ext.create('Ext.container.Container', {
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'image',
                src: e.target.result,
                height: 150
            }]
        });
    };

    reader.readAsDataURL(file); // Read the file as Data URL

    // Now upload the file to the server
    var formData = new FormData();
    formData.append('file', file);

    Ext.Ajax.request({
        url: 'your-upload-endpoint.php',
        method: 'POST',
        rawData: formData,
        headers: {
            'Content-Type': null
        },
        success: function(response) {
            Ext.Msg.alert('Success', 'File uploaded successfully!');
        },
        failure: function(response) {
            Ext.Msg.alert('Error', 'File upload failed.');
        }
    });
}

এখানে, FileReader ব্যবহার করে আমরা ফাইলটি Data URL হিসেবে রিড করছি এবং তারপর একটি ইমেজ হিসেবে প্রদর্শন করছি। এটি ইমেজ ফাইলগুলির জন্য প্রিভিউ দেখাতে সাহায্য করবে।

৩. ফাইল টাইপ চেক করা

ফাইলের টাইপ চেক করতে পারেন যাতে শুধুমাত্র নির্দিষ্ট ধরনের ফাইল আপলোড করা যায়।

ফাইল টাইপ চেক উদাহরণ:

function uploadFile(file) {
    var validFileTypes = ['image/jpeg', 'image/png', 'application/pdf']; // Example valid file types
    if (validFileTypes.indexOf(file.type) === -1) {
        Ext.Msg.alert('Invalid File', 'Only JPG, PNG, and PDF files are allowed!');
        return;
    }

    var formData = new FormData();
    formData.append('file', file);

    Ext.Ajax.request({
        url: 'your-upload-endpoint.php',
        method: 'POST',
        rawData: formData,
        headers: {
            'Content-Type': null
        },
        success: function(response) {
            Ext.Msg.alert('Success', 'File uploaded successfully!');
        },
        failure: function(response) {
            Ext.Msg.alert('Error', 'File upload failed.');
        }
    });
}

এখানে, আমরা file.type এর মাধ্যমে ফাইলের MIME টাইপ যাচাই করছি এবং কেবলমাত্র নির্দিষ্ট ফাইল টাইপ (যেমন, JPG, PNG, PDF) অনুমোদন করছি।

সারাংশ

1. Drag and Drop ফিচার ব্যবহার করে আপনি ইউজারদের সহজে ফাইল আপলোড করার সুযোগ দিতে পারেন।
2. FileReader API ব্যবহার করে আপনি ফাইলের প্রিভিউ প্রদর্শন করতে পারেন।
3. AJAX request ব্যবহার করে ফাইল সার্ভারে আপলোড করা হয় এবং ফলাফল ইউজারকে জানানো হয়।
4. ফাইল টাইপ চেক করার মাধ্যমে আপনি শুধুমাত্র নির্দিষ্ট ফাইল ফরম্যাটগুলো গ্রহণ করতে পারেন।

এটি একটি কাস্টম ড্র্যাগ এবং ড্রপ ফাইল আপলোড সিস্টেম তৈরি করার মৌলিক পদ্ধতি, যা ExtJS ফ্রেমওয়ার্কে কার্যকরভাবে কাজ করবে।