light mode
night mode
এক্সটিজেএস (ExtJS)
ExtJS এর পরিচিতি ExtJS কী? ExtJS এর ইতিহাস এবং সংস্করণ বিবরণ ExtJS এর বৈশিষ্ট্য এবং কেন এটি ব্যবহার করবেন? ExtJS এর আর্কিটেকচার এবং MVC প্যাটার্ন ExtJS এর মাধ্যমে ডেটা-ড্রিভেন অ্যাপ্লিকেশন তৈরি ExtJS সেটআপ এবং ইনস্টলেশন ExtJS ডাউনলোড এবং ইনস্টলেশন ExtJS এর জন্য প্রয়োজনীয় পরিবেশ প্রস্তুতি (Node.js, Sencha Cmd) Sencha Cmd দিয়ে নতুন ExtJS প্রজেক্ট তৈরি করা ExtJS এর ফাইল স্ট্রাকচার এবং ডিরেক্টরি ব্যাখ্যা ExtJS এর বেসিক কনফিগারেশন Application Class এবং Ext.application কনফিগারেশন ExtJS প্রজেক্টে MVC আর্কিটেকচার ব্যবহার Controllers, Views, এবং Models এর বেসিক ধারণা Ext.Loader এবং Ext.require ব্যবহার করে ডায়নামিক লোডিং ExtJS Layout Management Layout কী এবং কেন প্রয়োজন? ExtJS এর বিভিন্ন Layout (HBox, VBox, Border, Fit) Layout Configuration এবং Nesting Layouts Responsive Layout তৈরি করা ExtJS Components এবং Widgets ExtJS Components এর ভূমিকা Components তৈরি এবং কনফিগার করা বেসিক উইজেটসমূহ (Button, Panel, Grid, Form) Components এর মধ্যে Interaction এবং Event Handling Component Lifecycle এবং Lifecycle Hooks ExtJS Event Management Events কী এবং কিভাবে কাজ করে? Event Listeners এবং Handlers কনফিগার করা Component এর মধ্যে Custom Events তৈরি Event Delegation এবং Bubbling ExtJS Data Package এবং Stores ExtJS Data Package এর ভূমিকা Store কী এবং কেন প্রয়োজন? Store তৈরি এবং Data Binding Proxy এবং Data ফেচ করা (AJAX, REST, JSON) Filters, Sorters, এবং Pagination ExtJS Models এবং Data Binding Model তৈরি এবং কনফিগারেশন Associations (hasMany, belongsTo) ব্যবহার করা Model Validation এবং Field Mapping Data Binding এবং Two-way Binding ExtJS Grid Panel এবং Data Management Grid Panel তৈরি এবং Data Binding Grid Columns এবং Custom Renderer Inline Editing, Cell Editing এবং Row Editing Grid Filtering এবং Sorting Pagination এবং Infinite Scrolling ExtJS Form এবং Form Validation Form Panel তৈরি এবং কনফিগার করা ফর্ম উইজেটসমূহ (TextField, ComboBox, DateField) ফর্মের মাধ্যমে Data Submission এবং ফর্ম ভ্যালিডেশন Client-side এবং Server-side Validation Custom Form Validation Rules তৈরি করা ExtJS Layout এবং Container Management Panel, Container এবং Box Layout ব্যবস্থাপনা Nested Containers এবং Dynamic Layouts Card Layout এবং Tab Panels ব্যবহার করে মাল্টি-ভিউ ডিজাইন Accordion Layout এবং Collapsible Panels ExtJS Charts এবং Data Visualization ExtJS Charts এর ভূমিকা এবং ব্যবহার Line, Bar, Pie, এবং Other Charts তৈরি Chart Configuration এবং Data Binding Chart Customization (Colors, Labels, Axes) Interactions এবং Animations এর সাথে চার্ট পরিচালনা ExtJS Tree Panel এবং Nested Data Structures Tree Panel তৈরি এবং Data Binding Tree Store এবং Nested Data ব্যবহার করা Tree Node Editing এবং Dynamic Tree Creation Drag and Drop Support এবং Node Manipulation ExtJS Drag and Drop Functionalities Drag and Drop API এর ভূমিকা Simple Drag and Drop তৈরি করা Complex Drag and Drop Operations (Grid, Tree) Custom Drag and Drop ব্যবহার করে ফাইল আপলোড ExtJS Window এবং Dialog Boxes Window Component তৈরি এবং ব্যবহার Modal Dialog এবং Confirmation Boxes Custom Window Configuration এবং Events Window Animations এবং Transitions ExtJS Routing এবং Navigation Management ExtJS Routing System এর ভূমিকা Routes তৈরি এবং কনফিগার করা Dynamic Routes এবং URL Mapping Nested Views এবং Routing Events ExtJS AJAX এবং Data Interaction AJAX এবং Server Communication Data Fetching এবং Submitting (GET, POST) JSON এবং XML Data Handling AJAX Request Management এবং Error Handling ExtJS Authentication এবং Security User Authentication তৈরি এবং পরিচালনা User Login এবং Logout System Access Control এবং Permissions ব্যবস্থাপনা CSRF এবং XSS Protection ExtJS Theming এবং Customization ExtJS এর মধ্যে Theming কীভাবে কাজ করে? Custom CSS এবং SASS ব্যবহার করে থিমিং Pre-built Theme ব্যবহার এবং কাস্টম থিম তৈরি করা Responsive Design এবং Media Queries কনফিগার করা ExtJS Application Deployment এবং Production Build Production Build তৈরি করা (Sencha Cmd) Minification এবং Optimization ExtJS অ্যাপ্লিকেশন ডেপ্লয় করা (Heroku, AWS) Continuous Integration এবং Continuous Deployment (CI/CD) ExtJS এর Performance Optimization Memory Management এবং Performance Best Practices Lazy Loading এবং Deferred Rendering Store এবং Component Caching Large Data Handling এবং Virtual Scrolling ExtJS Unit Testing এবং Debugging ExtJS অ্যাপ্লিকেশনের জন্য Unit Testing Jasmine, Siesta ইত্যাদি টেস্টিং ফ্রেমওয়ার্ক ব্যবহার Component এবং Data Testing Debugging Techniques এবং Tools ExtJS এর বেস্ট প্র্যাকটিস এবং উন্নত টেকনিক Clean Code Structure এবং MVC Pattern অনুসরণ করা Large Scale অ্যাপ্লিকেশন তৈরি করার জন্য বেস্ট প্র্যাকটিস Custom Components এবং Plugins তৈরি করা Scalability এবং Maintainability উন্নত করা ExtJS এর ভবিষ্যৎ এবং নতুন ফিচার ExtJS এর সাম্প্রতিক সংস্করণ এবং নতুন ফিচার Sencha Community এবং Resources ExtJS এর ভবিষ্যত এবং নতুন টুলস এবং ট্রেন্ডস

Complex Drag and Drop Operations (Grid, Tree)

Web Development - এক্সটিজেএস (ExtJS) - ExtJS Drag and Drop Functionalities |

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 ব্যবহারের মাধ্যমে ইন্টারঅ্যাকটিভ এবং ইউজার-ফ্রেন্ডলি অ্যাপ্লিকেশন তৈরি করা সম্ভব, যা ডেটা ম্যানেজমেন্ট এবং ব্যবহারকারীর ইন্টারঅ্যাকশনকে আরও কার্যকরী করে তোলে।

Content added By
Md Azizur Rahman

Read more

Complex Drag and Drop Operations (Grid, Tree)

or

Don't have an account? Register

Promotion