Tree Panel তৈরি এবং Data Binding গাইড ও নোট

ExtJS এর Tree Panel একটি প্যানেল কম্পোনেন্ট যা হায়ারারকিক্যাল ডেটা (ডেটার গাছ) প্রদর্শন করার জন্য ব্যবহৃত হয়। এটি সাধারনত ফাইল সিস্টেম, কেটাগরি লিস্ট, অথবা কোনো ডেটা সেটের সম্পর্কিত উপাদানগুলো প্রদর্শন করতে ব্যবহৃত হয়। Data Binding এর মাধ্যমে Tree Panel এবং মডেল/স্টোরের মধ্যে সংযোগ স্থাপন করা যায়, যার ফলে ডেটা আপডেট হলে UI স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়।

১. Tree Panel তৈরি

Tree Panel ব্যবহার করে হায়ারারকিক্যাল ডেটা বা গাছের আকারে তথ্য প্রদর্শন করা হয়। ExtJS তে Ext.tree.Panel কম্পোনেন্টটি এটি তৈরি করার জন্য ব্যবহৃত হয়।

Tree Panel উদাহরণ:

Ext.create('Ext.tree.Panel', {
    title: 'Simple TreePanel Example',
    width: 300,
    height: 200,
    store: {
        xtype: 'tree',
        root: {
            text: 'Root Node',
            expanded: true,
            children: [
                { text: 'Child Node 1', leaf: true },
                { text: 'Child Node 2', leaf: true },
                { text: 'Child Node 3', expanded: true, children: [
                    { text: 'Grandchild Node 1', leaf: true },
                    { text: 'Grandchild Node 2', leaf: true }
                ]}
            ]
        }
    },
    rootVisible: false, // Root node will not be visible
    renderTo: Ext.getBody()
});

• store: xtype: 'tree' দ্বারা স্টোর তৈরি হচ্ছে, যা গাছের ডেটা ধারণ করে।
• root: গাছের মূল নোড (root node) নির্ধারণ করা হচ্ছে এবং এটি তিনটি সন্তানের নোডসহ তৈরি করা হচ্ছে।
• rootVisible: false দিলে রুট নোডটি UI তে দেখানো হবে না।

Tree Panel কনফিগারেশন:

• leaf: যদি true থাকে, তাহলে এটি একটি পাতা নোড হবে (এটি আর কোনো সন্তানের নোড ধারণ করবে না)।
• expanded: এটি নোডটিকে ডিফল্টভাবে সম্প্রসারিত করবে।
• text: নোডের টেক্সট বা নাম।
• children: নোডের সন্তানের নোডগুলি।

২. Data Binding

ExtJS তে Data Binding এর মাধ্যমে আপনি UI কম্পোনেন্ট (যেমন Tree Panel) এবং ডেটার মধ্যে সংযোগ স্থাপন করতে পারেন, যাতে ডেটা আপডেট হলে UI স্বয়ংক্রিয়ভাবে আপডেট হয়। Data Binding এর মাধ্যমে, যখন স্টোরে কোনো পরিবর্তন হয়, তখন তা অটোমেটিক্যালি Tree Panel এর সাথে সিঙ্ক্রোনাইজ হয়।

Data Binding উদাহরণ:

Ext.create('Ext.tree.Panel', {
    title: 'TreePanel with Data Binding',
    width: 300,
    height: 200,
    store: {
        xtype: 'tree',
        model: 'MyApp.model.TreeNode',  // মডেল নির্ধারণ করা হচ্ছে
        root: {
            text: 'Root Node',
            expanded: true,
            children: [
                { text: 'Child Node 1', leaf: true },
                { text: 'Child Node 2', leaf: true },
                { text: 'Child Node 3', expanded: true, children: [
                    { text: 'Grandchild Node 1', leaf: true },
                    { text: 'Grandchild Node 2', leaf: true }
                ]}
            ]
        }
    },
    rootVisible: false, // Root node will not be visible
    renderTo: Ext.getBody()
});

এখানে:

• store: স্টোরে model কনফিগারেশন ব্যবহার করে আমরা একটি মডেল যুক্ত করেছি।
• model: এটি Tree Panel এর জন্য মডেল তৈরি করে, যা ডেটার কাঠামো নির্ধারণ করে।

Model উদাহরণ:

Ext.define('MyApp.model.TreeNode', {
    extend: 'Ext.data.Model',
    fields: ['text', 'leaf', 'expanded', 'children']
});

• fields: এটি মডেলের জন্য ডেটা ফিল্ড নির্ধারণ করে, যেমন text, leaf, expanded, এবং children।

৩. Tree Panel এবং Store এর মধ্যে Data Binding

ExtJS এ Tree Panel এর সাথে স্টোর ডেটা বাইন্ডিং করার মাধ্যমে, ডেটা আপডেট হলে UI কম্পোনেন্ট যেমন Tree Panel স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়।

Dynamic Data Binding উদাহরণ:

Ext.create('Ext.tree.Panel', {
    title: 'Dynamic TreePanel with Data Binding',
    width: 300,
    height: 200,
    store: {
        xtype: 'tree',
        model: 'MyApp.model.TreeNode',
        root: {
            text: 'Root Node',
            expanded: true,
            children: [
                { text: 'Child Node 1', leaf: true },
                { text: 'Child Node 2', leaf: true }
            ]
        }
    },
    rootVisible: false,
    renderTo: Ext.getBody()
});

var store = Ext.ComponentQuery.query('treepanel')[0].getStore();
store.getRoot().appendChild({ text: 'New Child Node', leaf: true });

• getRoot().appendChild(): স্টোরের মূল নোডের মধ্যে একটি নতুন সন্তান নোড যোগ করা হয়েছে।
• Dynamic Binding: যখন স্টোরে একটি নতুন নোড যোগ করা হয়, Tree Panel স্বয়ংক্রিয়ভাবে রিফ্রেশ হয়ে নতুন নোডটি প্রদর্শন করে।

সারাংশ

1. Tree Panel:
   • ExtJS এর Ext.tree.Panel কম্পোনেন্টটি হায়ারারকিক্যাল ডেটা (গাছের আকারে) প্রদর্শন করতে ব্যবহৃত হয়।
   • এর মাধ্যমে পিতা-পুত্র সম্পর্কযুক্ত ডেটাকে সুন্দরভাবে উপস্থাপন করা যায়।
2. Data Binding:
   • Data Binding এর মাধ্যমে UI কম্পোনেন্ট এবং ডেটার মধ্যে একে অপরের সঙ্গে সিঙ্ক্রোনাইজ করা হয়।
   • স্টোরের ডেটা পরিবর্তন হলে তা UI তে অটোমেটিক্যালি আপডেট হয়।
3. Model:
   • Model ব্যবহার করে আপনি Tree Panel এর জন্য ডেটার কাঠামো এবং বৈশিষ্ট্য সংজ্ঞায়িত করতে পারেন, যা Data Binding এর মাধ্যমে স্টোরের ডেটার সঙ্গে যুক্ত হয়।

এভাবে, ExtJS তে Tree Panel এবং Data Binding ব্যবহার করে আপনি একটি ডাইনামিক এবং রিয়েল-টাইম হায়ারারকিক্যাল ডেটা ভিউ তৈরি করতে পারবেন।