ExtJS তে Window কম্পোনেন্ট ব্যবহার করে আপনি কাস্টম ডায়ালগ বক্স বা পপ-আপ উইন্ডো তৈরি করতে পারেন, যা ইউজারের সাথে ইন্টারঅ্যাকশন করার জন্য উপযুক্ত। উইন্ডো কম্পোনেন্টে কাস্টম কনফিগারেশন এবং ইভেন্টস ব্যবহার করে আপনাকে আরো কাস্টমাইজড এবং ইন্টারঅ্যাকটিভ উইন্ডো তৈরি করতে সাহায্য করে।
এখানে Custom Window Configuration এবং Events এর মাধ্যমে কিভাবে ExtJS উইন্ডো তৈরি করা যায় এবং কাস্টমাইজ করা যায়, তা ব্যাখ্যা করা হয়েছে।
একটি কাস্টম উইন্ডো তৈরি করার জন্য, Ext.window.Window ক্লাস ব্যবহার করা হয়। উইন্ডো কম্পোনেন্টের কনফিগারেশন সঠিকভাবে সেট করতে পারে, যেমন উইন্ডোর আকার, শিরোনাম, ইন্টারঅ্যাকশন অপশন, ইত্যাদি।
Ext.create('Ext.window.Window', {
title: 'Custom Window',
width: 400,
height: 300,
layout: 'fit', // উইন্ডোর মধ্যে যে কন্টেন্ট থাকবে তা ফিট করবে
modal: true, // উইন্ডো মডাল হওয়া মানে, ব্যাকগ্রাউন্ড ইন্টারঅ্যাকশন নিষ্ক্রিয় হবে
closable: true, // উইন্ডো বন্ধ করার জন্য ক্লোজ বাটন থাকবে
draggable: true, // উইন্ডো ড্র্যাগ করা যাবে
resizable: true, // উইন্ডো রিসাইজ করা যাবে
items: [{
xtype: 'panel',
html: 'This is a custom window content'
}],
listeners: {
// উইন্ডো খোলার সময় একটি ইভেন্ট
show: function() {
console.log('Window is shown!');
},
// উইন্ডো বন্ধ করার সময় ইভেন্ট
close: function() {
console.log('Window is closed!');
}
}
}).show();
কনফিগারেশন ব্যাখ্যা:
title: উইন্ডোর শিরোনাম।width এবং height: উইন্ডোর আকার।layout: উইন্ডোর লেআউট। এখানে fit ব্যবহার করা হয়েছে, যাতে উইন্ডোর মধ্যে থাকা কন্টেন্ট স্বয়ংক্রিয়ভাবে ফিট হয়ে যায়।modal: উইন্ডোটি মডাল হবে, যার মানে হল যে, ব্যাকগ্রাউন্ডের সাথে ইন্টারঅ্যাকশন বন্ধ হবে যতক্ষণ না উইন্ডোটি বন্ধ করা হয়।closable: উইন্ডোর উপর একটি ক্লোজ বাটন থাকবে, যা উইন্ডো বন্ধ করার জন্য ব্যবহৃত হবে।draggable: উইন্ডোটি ড্র্যাগ করা যাবে।resizable: উইন্ডোটি রিসাইজ করা যাবে।items: উইন্ডোর ভিতরের কন্টেন্ট যা এখানে একটি প্যানেল আকারে রয়েছে, এবং এর মধ্যে HTML কনটেন্ট রয়েছে।ExtJS উইন্ডো কম্পোনেন্টের সাথে ইভেন্ট হ্যান্ডলিং সহজ করে তোলে। বিভিন্ন ধরনের ইভেন্ট রয়েছে যা উইন্ডোতে ব্যবহারকারীর ইন্টারঅ্যাকশন অনুযায়ী কার্যকরী হবে। উইন্ডোর সাধারণ ইভেন্টগুলি হল show, hide, close, resize, ইত্যাদি।
Ext.create('Ext.window.Window', {
title: 'Custom Window with Events',
width: 400,
height: 300,
layout: 'fit',
modal: true,
items: [{
xtype: 'panel',
html: 'Content inside the custom window'
}],
listeners: {
// উইন্ডো শো হওয়ার পর ইভেন্ট
show: function(window) {
console.log('The window is now visible!');
},
// উইন্ডো হাইড হওয়ার পর ইভেন্ট
hide: function() {
console.log('The window is now hidden!');
},
// উইন্ডো বন্ধ হওয়ার পর ইভেন্ট
close: function() {
console.log('The window is being closed!');
},
// উইন্ডো রিসাইজ হওয়ার পর ইভেন্ট
resize: function(window, width, height) {
console.log('The window has been resized to ' + width + ' x ' + height);
}
}
}).show();
এখানে ব্যবহৃত ইভেন্টগুলির ব্যাখ্যা:
show: উইন্ডোটি দেখানোর পর ইভেন্টটি ট্রিগার হয়।hide: উইন্ডোটি হাইড হওয়ার পর ইভেন্টটি ট্রিগার হয়।close: উইন্ডোটি বন্ধ হওয়ার সময় ইভেন্টটি ট্রিগার হয়।resize: উইন্ডোটি রিসাইজ হওয়ার পর ইভেন্টটি ট্রিগার হয়, এবং রিসাইজড আকারের নতুন প্রস্থ এবং উচ্চতা প্যারামিটার হিসেবে পাঠানো হয়।ExtJS তে উইন্ডো কম্পোনেন্ট ডায়নামিকভাবে তৈরি করার সময় আপনি Ext.create() মেথড ব্যবহার করে উইন্ডো তৈরি করতে পারেন, এবং তার সাথে ইভেন্টগুলোকে কাস্টমাইজ করতে পারেন।
var win = Ext.create('Ext.window.Window', {
title: 'Dynamic Window',
width: 300,
height: 200,
layout: 'fit',
modal: true,
items: [{
xtype: 'panel',
html: 'This window is created dynamically.'
}]
});
// উইন্ডো দেখানোর জন্য
win.show();
// উইন্ডো বন্ধ করার জন্য
setTimeout(function() {
win.close();
}, 5000); // 5 সেকেন্ড পর উইন্ডো বন্ধ হবে
এখানে, উইন্ডোটি প্রথমে ডায়নামিকভাবে তৈরি করা হচ্ছে এবং তারপর ৫ সেকেন্ড পরে এটি বন্ধ হয়ে যাবে। এটি উইন্ডো বন্ধ করার জন্য একটি setTimeout ফাংশন ব্যবহার করে।
আপনি উইন্ডোর ভিতরে একটি ফর্ম যুক্ত করতে পারেন এবং ফর্ম সাবমিট করার জন্য ইভেন্ট হ্যান্ডলার তৈরি করতে পারেন।
Ext.create('Ext.window.Window', {
title: 'Form Window',
width: 300,
height: 200,
layout: 'fit',
modal: true,
items: [{
xtype: 'form',
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false
}],
buttons: [{
text: 'Submit',
handler: function() {
var form = this.up('form').getForm();
if (form.isValid()) {
Ext.Msg.alert('Form Submitted', 'Username: ' + form.getValues().username);
} else {
Ext.Msg.alert('Error', 'Please fill out the form');
}
}
}]
}]
}).show();
এখানে, একটি ফর্ম উইন্ডো তৈরি করা হয়েছে যার মধ্যে একটি textfield (ইউজারনেম) রয়েছে এবং একটি Submit বাটন যুক্ত করা হয়েছে। handler ইভেন্টের মাধ্যমে সাবমিট করলে ইউজারের ইনপুট ভ্যালু পপ-আপে প্রদর্শিত হবে।
title, width, height, modal, closable, draggable, ইত্যাদি কনফিগারেশন প্রপার্টি ব্যবহার করা যায়।show, hide, close, resize ইত্যাদি ব্যবহার করা যেতে পারে।Ext.create() মেথড ব্যবহার করে ডায়নামিকভাবে উইন্ডো তৈরি করা যায় এবং তার সাথে ইভেন্ট হ্যান্ডলার যুক্ত করা যায়।ExtJS উইন্ডো কম্পোনেন্ট খুবই শক্তিশালী এবং কাস্টমাইজেবল, যা আপনাকে ইন্টারঅ্যাকটিভ এবং ডায়নামিক ইউজার ইন্টারফেস তৈরি করতে সহায়তা করে।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
