ExtJS একটি শক্তিশালী ফ্রেমওয়ার্ক যা ফর্ম ডিজাইন এবং ফর্মের বিভিন্ন উপাদান (উইজেট) সহজভাবে তৈরি এবং পরিচালনা করতে সহায়তা করে। এক্সটিজেএসে TextField, ComboBox, এবং DateField সহ বিভিন্ন ফর্ম উইজেট ব্যবহৃত হয় যা ইউজার ইন্টারফেসে তথ্য গ্রহণ করতে সাহায্য করে। এই উইজেটগুলো ফর্মের অন্যতম গুরুত্বপূর্ণ অংশ এবং ডেটা সংগ্রহের ক্ষেত্রে গুরুত্বপূর্ণ ভূমিকা পালন করে।
১. TextField
TextField এক্সটিজেএস এর সবচেয়ে মৌলিক ইনপুট উইজেট যা ব্যবহারকারীর কাছ থেকে টেক্সট ডেটা গ্রহণ করতে ব্যবহৃত হয়। এটি সাধারণত ব্যবহারকারীর নাম, ইমেল, অথবা অন্য কোনও স্ট্রিং ইনপুটের জন্য ব্যবহৃত হয়।
TextField উদাহরণ:
Ext.create('Ext.form.Panel', {
title: 'TextField Example',
width: 400,
height: 200,
bodyPadding: 10,
items: [{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
allowBlank: false // এটি ইনপুট ফিল্ডের জন্য বাধ্যতামূলক হবে
}],
renderTo: Ext.getBody()
});
- xtype:
'textfield'ইনপুট ফিল্ড তৈরি করে। - fieldLabel: ফিল্ডের লেবেল।
- allowBlank: যদি
falseথাকে, তবে এটি ইনপুট ফিল্ডের জন্য বাধ্যতামূলক হবে।
TextField কনফিগারেশন:
- inputType: ইমেইল, পাসওয়ার্ড বা টেলিফোনের মতো বিভিন্ন ইনপুট টাইপ নির্ধারণ করা যায়।
- regex: ইনপুট ভ্যালিডেশন জন্য রেগুলার এক্সপ্রেশন ব্যবহার করা যায়।
xtype: 'textfield',
inputType: 'password', // পাসওয়ার্ড ইনপুটের জন্য
regex: /^[a-zA-Z0-9]+$/, // কেবলমাত্র অক্ষর এবং সংখ্যা গ্রহণযোগ্য
২. ComboBox
ComboBox হল একটি ড্রপডাউন ইনপুট ফিল্ড, যা ব্যবহারকারীকে একটি নির্দিষ্ট তালিকা থেকে একটি মান নির্বাচন করতে দেয়। এটি সাধারণত পছন্দের তালিকা বা দেশ নির্বাচন করার জন্য ব্যবহৃত হয়।
ComboBox উদাহরণ:
Ext.create('Ext.form.Panel', {
title: 'ComboBox Example',
width: 400,
height: 200,
bodyPadding: 10,
items: [{
xtype: 'combo',
name: 'country',
fieldLabel: 'Select Country',
store: ['USA', 'Canada', 'UK', 'India'], // স্টোরের মাধ্যমে দেশগুলির তালিকা
allowBlank: false, // এটি বাধ্যতামূলক হবে
queryMode: 'local', // ডেটা লোকাল ভাবে লোড করা
displayField: 'name', // প্রদর্শিত ফিল্ড
valueField: 'code' // মানের ফিল্ড
}],
renderTo: Ext.getBody()
});
- xtype:
'combo'ড্রপডাউন নির্বাচন ফিল্ড তৈরি করে। - store: ComboBox এর ডেটা উৎস।
- queryMode:
'local'হলে ডেটা ক্লায়েন্ট সাইডে থেকে লোড হবে। - displayField: ComboBox তে কোন ফিল্ডটি প্রদর্শিত হবে তা নির্ধারণ করে।
- valueField: ComboBox তে কোন ফিল্ডের মানকে নির্বাচিত করা হবে তা নির্ধারণ করে।
ComboBox কনফিগারেশন:
- forceSelection: যদি
trueথাকে, তবে ব্যবহারকারী শুধুমাত্র স্টোরের তালিকা থেকে নির্বাচন করতে পারবেন। - typeAhead: যদি
trueথাকে, তবে তালিকায় টাইপ করা মানের সঙ্গে মেলে এমন আইটেমটি স্বয়ংক্রিয়ভাবে নির্বাচন হবে।
forceSelection: true,
typeAhead: true
৩. DateField
DateField একটি ইনপুট ফিল্ড যা ব্যবহারকারীর কাছ থেকে একটি তারিখ গ্রহণ করতে ব্যবহৃত হয়। এটি সাধারণত জন্মতারিখ, রেজিস্ট্রেশন তারিখ ইত্যাদির জন্য ব্যবহৃত হয়।
DateField উদাহরণ:
Ext.create('Ext.form.Panel', {
title: 'DateField Example',
width: 400,
height: 200,
bodyPadding: 10,
items: [{
xtype: 'datefield',
name: 'birthdate',
fieldLabel: 'Date of Birth',
allowBlank: false, // বাধ্যতামূলক
format: 'm/d/Y' // তারিখ ফরম্যাট
}],
renderTo: Ext.getBody()
});
- xtype:
'datefield'ব্যবহার করে তারিখ ইনপুট ফিল্ড তৈরি হয়। - fieldLabel: ইনপুট ফিল্ডের লেবেল।
- allowBlank: যদি
falseথাকে, এটি বাধ্যতামূলক হবে। - format: তারিখ প্রদর্শন করার ফরম্যাট। উদাহরণ:
'm/d/Y'বা'Y-m-d'।
DateField কনফিগারেশন:
- minValue: একটি নির্দিষ্ট তারিখের পরবর্তী তারিখ নির্বাচন করার জন্য।
- maxValue: একটি নির্দিষ্ট তারিখের আগের তারিখ নির্বাচন করার জন্য।
minValue: new Date(2000, 1, 1), // 2000 সালের ১ জানুয়ারি থেকে পরবর্তী তারিখ
maxValue: new Date(2025, 1, 1) // 2025 সালের ১ জানুয়ারির আগে তারিখ নির্বাচনযোগ্য
সারাংশ
- TextField:
- টেক্সট ডেটা ইনপুট করার জন্য ব্যবহৃত হয়।
- বিভিন্ন ইনপুট টাইপ (যেমন, পাসওয়ার্ড, ইমেল) নির্ধারণ করা যায়।
- ComboBox:
- একটি ড্রপডাউন লিস্ট থেকে মান নির্বাচন করতে ব্যবহৃত হয়।
- স্টোর থেকে ডেটা লোড করা যায় এবং তালিকাটি ব্যবহারকারীর জন্য উপলব্ধ করা হয়।
- DateField:
- একটি ক্যালেন্ডার ব্যবহার করে তারিখ নির্বাচন করার জন্য ব্যবহৃত হয়।
- বিভিন্ন তারিখ ফরম্যাট এবং সীমা নির্ধারণ করা যায়।
এই ফর্ম উইজেটগুলো ব্যবহার করে আপনি শক্তিশালী, ব্যবহারকারী-বান্ধব এবং কার্যকরী ফর্ম তৈরি করতে পারবেন যা আপনার অ্যাপ্লিকেশনে তথ্য সংগ্রহ এবং প্রসেসিং সহজ করে তুলবে।
Read more
