Accordion Layout এবং Collapsible Panels হল ExtJS এর গুরুত্বপূর্ণ ইউজার ইন্টারফেস উপাদান, যা ইউজারের ইন্টারঅ্যাকশন এবং অ্যাপ্লিকেশনের ডাইনামিক অ্যাডজাস্টমেন্ট সক্ষম করে। এগুলি সাধারণত ব্যবহারকারীর জন্য স্পেস অপ্টিমাইজ করার জন্য এবং অ্যাপ্লিকেশনের বিভিন্ন সেকশনকে কার্যকরীভাবে প্রেজেন্ট করার জন্য ব্যবহৃত হয়।
এই গাইডে, আমরা Accordion Layout এবং Collapsible Panels কিভাবে তৈরি এবং ব্যবহার করতে হয়, তা দেখব।
১. Accordion Layout
Accordion Layout একটি লেআউট যা একাধিক প্যানেল বা সেকশনকে একটি সময়ে একটিতে প্রদর্শন করতে দেয়। যখন একটি প্যানেল খুলে যায়, তখন অন্য প্যানেলটি বন্ধ হয়ে যায়। এটি বিশেষভাবে ড্যাশবোর্ড বা কনটেন্ট এক্সপ্লোরেশন ইন্টারফেসে ব্যবহৃত হয়, যেখানে অনেক তথ্য একসাথে প্রদর্শন করতে হয়, তবে শুধুমাত্র একটি সেকশন একবারে দৃশ্যমান থাকে।
Accordion Layout উদাহরণ
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout',
layout: {
type: 'accordion',
animate: true // এ্যানিমেটেড ট্রানজিশন সক্ষম
},
renderTo: Ext.getBody(),
items: [
{
title: 'Panel 1',
html: 'Content of Panel 1',
collapsed: false // প্রথম প্যানেল খোলা থাকবে
},
{
title: 'Panel 2',
html: 'Content of Panel 2'
},
{
title: 'Panel 3',
html: 'Content of Panel 3'
}
]
});
ব্যাখ্যা:
layout: { type: 'accordion' }: এটি লেআউট টেমপ্লেট হিসেবে অ্যাকর্ডিয়ন নির্বাচন করে।collapsed: false: প্রথম প্যানেলটি ডিফল্টভাবে খোলা থাকবে।animate: true: প্যানেল স্যুইচিং এ অ্যানিমেশন যুক্ত করা হয়েছে।
এখানে, তিনটি প্যানেল তৈরি করা হয়েছে, যেখানে একে একে একটি প্যানেল খোলা যাবে এবং বাকি প্যানেলগুলো বন্ধ থাকবে।
২. Collapsible Panels
Collapsible Panels হল এমন প্যানেল যা ব্যবহারকারীর ইন্টারঅ্যাকশনের মাধ্যমে সংকুচিত বা বিস্তৃত (toggle) হতে পারে। এটি একটি প্যানেলের ভিউয়ের আকার পরিবর্তন করতে সাহায্য করে। প্যানেলটি টগল করার জন্য একটি বাটন বা ড্র্যাগ ব্যবহার করা যেতে পারে।
Collapsible Panel উদাহরণ
Ext.create('Ext.panel.Panel', {
title: 'Collapsible Panel',
width: 300,
height: 200,
collapsible: true, // প্যানেলটিকে টগল করা যাবে
collapsed: false, // ডিফল্টভাবে প্যানেলটি খোলা থাকবে
renderTo: Ext.getBody(),
html: 'This is a collapsible panel!'
});
ব্যাখ্যা:
collapsible: true: এটি প্যানেলটিকে টগলেবল করে তোলে, যাতে ব্যবহারকারী প্যানেলটি খোলার এবং বন্ধ করার জন্য একটি বাটন দেখতে পান।collapsed: false: ডিফল্টভাবে প্যানেলটি খোলা থাকবে। আপনিtrueকরলে প্যানেলটি শুরুতে বন্ধ থাকবে।
৩. Collapsible Panels with Toolbars and Collapse/Expand Buttons
আপনি যদি প্যানেলটিতে collapse এবং expand করার জন্য কাস্টম বাটন যুক্ত করতে চান, তাহলে tools কনফিগারেশন ব্যবহার করতে পারেন, যা ব্যবহারকারীকে প্যানেলটি টগল করার জন্য একটি বাটন প্রদান করবে।
উদাহরণ: টুলবার সহ Collapsible Panel
Ext.create('Ext.panel.Panel', {
title: 'Collapsible Panel with Toolbars',
width: 300,
height: 200,
collapsible: true,
tools: [{
type: 'collapse', // collapse টুল
handler: function() {
alert('Panel collapsed!');
}
}],
renderTo: Ext.getBody(),
html: 'This is a collapsible panel with a collapse tool button.'
});
এখানে, tools কনফিগারেশন ব্যবহার করা হয়েছে যা একটি টুলবারে "collapse" বাটন প্রদর্শন করবে। যখন ব্যবহারকারী এটি ক্লিক করবে, প্যানেলটি সংকুচিত হবে এবং একটি এলার্ট প্রদর্শিত হবে।
৪. Multiple Collapsible Panels within Accordion Layout
আপনি একাধিক Collapsible Panels কে Accordion Layout এর মধ্যে সংযুক্ত করতে পারেন, যাতে একবারে একটি প্যানেল খোলা থাকে এবং অন্যান্য প্যানেলগুলি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়।
উদাহরণ: Accordion Layout with Collapsible Panels
Ext.create('Ext.panel.Panel', {
title: 'Accordion Layout with Collapsible Panels',
layout: {
type: 'accordion',
animate: true
},
renderTo: Ext.getBody(),
items: [
{
title: 'Panel 1',
html: 'Content of Panel 1',
collapsible: true, // এটি collapsible প্যানেল হবে
collapsed: false
},
{
title: 'Panel 2',
html: 'Content of Panel 2',
collapsible: true, // এটি collapsible প্যানেল হবে
collapsed: true
},
{
title: 'Panel 3',
html: 'Content of Panel 3',
collapsible: true, // এটি collapsible প্যানেল হবে
collapsed: true
}
]
});
এখানে, একটি Accordion Layout তৈরি করা হয়েছে এবং এতে তিনটি Collapsible Panels সংযুক্ত করা হয়েছে। প্রতিটি প্যানেল একটি নির্দিষ্ট সময়ের জন্য খোলা বা বন্ধ থাকবে, এবং ব্যবহারকারী তাদের টগল করতে পারবে।
৫. Responsive Design for Accordion and Collapsible Panels
Responsive Design একটি গুরুত্বপূর্ণ দিক, যাতে আপনার অ্যাপ্লিকেশন মোবাইল এবং ডেস্কটপ উভয় প্ল্যাটফর্মেই ভালভাবে কাজ করে। ExtJS তে আপনি লেআউট এবং প্যানেলগুলোর responsive আচরণ কনফিগার করতে পারেন।
উদাহরণ: Responsive Accordion Layout
Ext.create('Ext.panel.Panel', {
title: 'Responsive Accordion Layout',
layout: {
type: 'accordion',
animate: true
},
width: '100%',
renderTo: Ext.getBody(),
items: [
{
title: 'Panel 1',
html: 'Content of Panel 1',
collapsible: true,
collapsed: false
},
{
title: 'Panel 2',
html: 'Content of Panel 2',
collapsible: true,
collapsed: true
}
]
});
এখানে, width: '100%' সেট করা হয়েছে, যা গ্রিড বা প্যানেলকে responsively কাজ করতে সাহায্য করবে, বিশেষ করে মোবাইল ডিভাইসে।
সারাংশ
- Accordion Layout: এটি একাধিক প্যানেলকে একটি সময়ে একটিতে প্রদর্শন করতে ব্যবহৃত হয়। একটি প্যানেল খোলার সাথে অন্যটি স্বয়ংক্রিয়ভাবে বন্ধ হয়ে যায়।
- Collapsible Panels: এগুলি টগলযোগ্য প্যানেল যেখানে ব্যবহারকারীরা প্যানেলটি সংকুচিত বা বিস্তৃত করতে পারেন।
- Tools: কাস্টম টুলস ব্যবহার করে প্যানেলে ইন্টারঅ্যাক্টিভ বাটন যেমন collapse এবং expand যোগ করা যায়।
- Responsive Design: ExtJS তে আপনি অ্যাকর্ডিয়ন এবং কোলাপসিবল প্যানেলগুলো মোবাইল এবং ডেস্কটপ উভয় ডিভাইসের জন্য responsively কনফিগার করতে পারেন।
এই উপাদানগুলো ব্যবহারের মাধ্যমে আপনি খুব সহজে একটি ডাইনামিক এবং ইন্টারঅ্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে পারবেন যা বিভিন্ন স্ক্রীন সাইজে স্বাভাবিকভাবে কাজ করবে।
Read more
