Routing এবং Navigation Management হল ExtJS অ্যাপ্লিকেশনের অন্যতম গুরুত্বপূর্ণ অংশ, যা ইউজারের ইন্টারঅ্যাকশন এবং অ্যাপ্লিকেশনের বিভিন্ন ভিউ বা রুটের মধ্যে নেভিগেশন পরিচালনা করতে সাহায্য করে। যখন আপনি একটি স্পা (Single Page Application) তৈরি করেন, তখন Routing আপনাকে ইউজারের URL-এর উপর ভিত্তি করে বিভিন্ন ভিউ বা কম্পোনেন্টের মধ্যে নেভিগেশন পরিচালনা করতে সহায়ক হয়। ExtJS তে, Routing এবং Navigation ব্যবস্থাপনা খুবই সহজ এবং ফ্লেক্সিবল।
Routing হল একটি প্রযুক্তি যা URL এর বিভিন্ন অংশকে ভিন্ন ভিন্ন ভিউ বা কার্যকলাপে ম্যাপ করে। উদাহরণস্বরূপ, যদি ইউজার একটি নির্দিষ্ট URL খুলে, তবে Routing সিস্টেমটি সেই URL থেকে সম্পর্কিত ভিউটি বা পেজটি লোড করবে।
ExtJS তে, Routing সিস্টেম Ext.router.Router ক্লাস দ্বারা পরিচালিত হয়, যা আপনার URL রাউটিং এবং URL প্যারামিটারগুলোর ভিত্তিতে ভিউ পরিবর্তন করতে সাহায্য করে।
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [{
xtype: 'panel',
title: 'Home',
html: 'This is the Home page'
}, {
xtype: 'panel',
title: 'About',
html: 'This is the About page'
}, {
xtype: 'panel',
title: 'Contact',
html: 'This is the Contact page'
}]
});
// Setting up the router for navigation
Ext.Router.add({
'home': function() {
console.log('Navigating to Home');
// Activate the Home panel
Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(0);
},
'about': function() {
console.log('Navigating to About');
// Activate the About panel
Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(1);
},
'contact': function() {
console.log('Navigating to Contact');
// Activate the Contact panel
Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(2);
}
});
// Start routing
Ext.Router.connect();
}
});
এখানে, Ext.Router.add() এর মাধ্যমে home, about, contact রাউট তৈরি করা হয়েছে। প্রতিটি রাউটের জন্য একটি নির্দিষ্ট কলব্যাক ফাংশন দেওয়া হয়েছে, যা ব্যবহারকারী যখন URL এ যান, তখন সেগুলি সক্রিয় করবে।
Ext.Router.connect() কল করার মাধ্যমে রাউটিং শুরু হবে।
Navigation Management হল নেভিগেশন বার বা লিঙ্ক ব্যবহার করে এক পেজ থেকে অন্য পেজে যাওয়া, এবং URL প্যারামিটার ব্যবহার করে ভিউ বা কনটেন্ট পরিবর্তন করা। ExtJS Routing এর সাথে ইউজার URL এর মাধ্যমে কন্টেন্ট বা ভিউ পরিবর্তন করতে পারে।
Ext.create('Ext.button.Button', {
text: 'Go to About',
renderTo: Ext.getBody(),
handler: function() {
Ext.Router.redirect('about'); // Redirect to About page
}
});
এখানে, Ext.Router.redirect() ব্যবহার করা হয়েছে, যা ইউজারকে about রাউটের পেজে নিয়ে যাবে।
ExtJS Routing সিস্টেম আপনাকে ডায়নামিক URL প্যারামিটার পরিচালনা করার ক্ষমতা দেয়। এর মাধ্যমে, আপনি URL এর মধ্যে ডেটা পাস করতে পারেন এবং সেই ডেটা অনুযায়ী পেজ বা কনটেন্ট লোড করতে পারেন।
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [{
xtype: 'panel',
title: 'User Profile',
html: 'This is the User Profile page'
}, {
xtype: 'panel',
title: 'User Details',
html: 'This is the User Details page'
}]
});
// Setting up routing with dynamic parameters
Ext.Router.add({
'user/:id': function(params) {
console.log('Navigating to User Profile with ID: ' + params.id);
// Display user profile based on ID
Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(0);
},
'user/:id/details': function(params) {
console.log('Navigating to User Details with ID: ' + params.id);
// Display user details based on ID
Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(1);
}
});
// Start routing
Ext.Router.connect();
}
});
এখানে:
:id ব্যবহার করে ডায়নামিক URL প্যারামিটার তৈরি করা হয়েছে, যা ইউজারের আইডি অনুযায়ী প্রোফাইল বা ডিটেইলস পেজে নেভিগেট করবে।যেমন, ইউজার যদি user/123 URL এ যান, তাহলে params.id হবে 123, এবং সংশ্লিষ্ট পেজটি প্রদর্শিত হবে।
History Management সিস্টেমটি ব্যবহারকারীর আগের পরিদর্শন করা URL বা পেজ ট্র্যাক করার জন্য ব্যবহৃত হয়। এতে, আপনি ব্রাউজার ইতিহাস (back, forward) ব্যবহার করে নেভিগেশন করতে পারেন এবং URL এর ভিত্তিতে অ্যাপ্লিকেশন রেটা পেজ বা ভিউ রেন্ডার করতে পারেন।
Ext.application({
name: 'MyApp',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'card',
items: [{
xtype: 'panel',
html: 'Home Page',
title: 'Home'
}, {
xtype: 'panel',
html: 'About Us Page',
title: 'About'
}]
});
// Routing
Ext.Router.add({
'home': function() {
Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(0);
},
'about': function() {
Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(1);
}
});
// Start History Management
Ext.util.History.init(function() {
console.log('History initialized');
});
// Manage Back button behavior
Ext.util.History.on('change', function(token) {
if (token === 'home') {
Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(0);
} else if (token === 'about') {
Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(1);
}
});
// Redirect to Home
Ext.util.History.add('home');
}
});
এখানে Ext.util.History.add() এবং Ext.util.History.on() ব্যবহার করা হয়েছে যা ব্রাউজারের back এবং forward বাটন ব্যবহার করে নেভিগেশন কন্ট্রোল করতে সক্ষম।
SEO-friendly routing হল যখন আপনি URL এর মাধ্যমে অ্যাপ্লিকেশনের ভিউ বা পেজ সঠিকভাবে ইন্ডেক্স করতে পারেন। ExtJS তে, আপনি history এবং hash ভিত্তিক URL প্যারামিটার ব্যবহার করে SEO-সঙ্গত রাউট তৈরি করতে পারেন।
Ext.Router.add({
'about': function() {
console.log('Navigating to About');
Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(1);
},
'about/:section': function(params) {
console.log('Navigating to About section: ' + params.section);
Ext.ComponentQuery.query('viewport')[0].getLayout().setActiveItem(1);
}
});
Ext.Router.connect();
এখানে, about/:section রাউটটি about পেজের বিভিন্ন সেকশন সম্পর্কিত URL প্যারামিটার গ্রহণ করে, যা SEO এর জন্য সুবিধাজনক হতে পারে।
ExtJS এর রাউটিং এবং নেভিগেশন ব্যবস্থাপনা আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাকটিভ এবং SEO-সঙ্গত বানাতে সাহায্য করে, যা ইউজার এক্সপিরিয়েন্স এবং সার্চ ইঞ্জিন র্যাঙ্কিং উন্নত করে।
ExtJS Routing System হল একটি গুরুত্বপূর্ণ বৈশিষ্ট্য যা সিঙ্গেল পেজ অ্যাপ্লিকেশন (SPA) তৈরির সময় রাউটিং এবং নেভিগেশন পরিচালনা করতে ব্যবহৃত হয়। রাউটিং সিস্টেমের মাধ্যমে, আপনি URL এর ভিত্তিতে বিভিন্ন ভিউ (views) এবং কম্পোনেন্ট (components) অ্যাক্সেস করতে পারেন, যেমন প্রথাগত ওয়েব অ্যাপ্লিকেশনগুলিতে বিভিন্ন পেজের মধ্যে নেভিগেট করা হয়। ExtJS তে রাউটিং ব্যবহার করে, অ্যাপ্লিকেশনটি ক্লায়েন্ট-সাইডে এক পেজে চলতে থাকে এবং ডেটা বা ভিউ পরিবর্তন হয়, কিন্তু URL ঠিকানা পরিবর্তিত হয়, যা ইউজারের অভিজ্ঞতাকে আরও উন্নত করে।
Routing System হল একটি মেকানিজম যা ইউআরএল এর ভিত্তিতে অ্যাপ্লিকেশন ভিউ এবং স্টেট পরিবর্তন করে। এটি ব্যবহারকারীর ইউআরএল চেঞ্জ (যেমন: পেজ পরিবর্তন) ট্র্যাক করে এবং পেজ লোড করার পরিবর্তে উপযুক্ত ভিউ বা কম্পোনেন্ট রেন্ডার করে। ExtJS তে, রাউটিং সিস্টেম অ্যাপ্লিকেশন স্টেট এবং ভিউয়ের মধ্যে সিঙ্ক্রোনাইজেশন নিশ্চিত করতে সহায়ক।
ExtJS তে Routing ব্যবহারের জন্য Ext.util.History এবং Ext.Router (Sencha Cmd এর মাধ্যমে) ব্যবহৃত হয়। এখানে, Ext.util.History কম্পোনেন্ট ব্রাউজারের ইতিহাস এবং Ext.Router রাউটিং সিস্টেমের জন্য ব্যবহৃত হয়।
Ext.util.History ব্যবহার করে আপনি URL এর ইতিহাস ট্র্যাক এবং ব্রাউজারের 'back' এবং 'forward' অ্যাকশনগুলি ম্যানেজ করতে পারেন।
History ব্যবহারের উদাহরণ:
Ext.create('Ext.panel.Panel', {
title: 'ExtJS Routing Example',
width: 600,
height: 400,
renderTo: Ext.getBody(),
items: [
{
xtype: 'button',
text: 'Go to Page 1',
handler: function() {
Ext.util.History.add('page1');
}
},
{
xtype: 'button',
text: 'Go to Page 2',
handler: function() {
Ext.util.History.add('page2');
}
}
]
});
// History listener setup
Ext.util.History.on('change', function(token) {
if (token === 'page1') {
console.log('Navigated to Page 1');
} else if (token === 'page2') {
console.log('Navigated to Page 2');
}
});
// Enable history
Ext.util.History.init();
Ext.util.History.add: এটি নতুন ইউআরএল টোকেন (যেমন: 'page1', 'page2') ব্রাউজারের ইতিহাসে যোগ করে।Ext.util.History.on: ইতিহাসে পরিবর্তন ঘটলে, এটি একটি ইভেন্ট ট্রিগার করে, যেখানে নির্দিষ্ট ভিউ বা কম্পোনেন্ট রেন্ডার করা যেতে পারে।Ext.Router একাধিক রাউটিং প্যাটার্নের জন্য URL এবং কম্পোনেন্ট সংযুক্ত করে।
Ext.Router এর উদাহরণ:
Ext.application({
name: 'MyApp',
launch: function() {
// Define routes
Ext.Router.on({
'home': function() {
console.log('Home Page');
},
'user/:id': function(id) {
console.log('User Page with ID: ' + id);
}
});
// Activate router
Ext.Router.redirect('home');
}
});
Ext.Router.on: এটি একটি রাউট প্যাটার্ন তৈরি করে, যেমন home এবং user/:id। :id একটি প্যারামিটার যা ইউআরএল থেকে পাঠানো হয়।Ext.Router.redirect: এটি একটি নির্দিষ্ট রাউটে নেভিগেট করে, যেমন home।user/:id প্যারামিটার ব্যবহার করা হয়।ExtJS Routing System এর মাধ্যমে আপনি ক্লায়েন্ট-সাইড রাউটিং এবং নেভিগেশন পরিচালনা করতে পারেন। এটি Single Page Applications (SPA) তৈরি করতে সহায়ক এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে। Ext.util.History এবং Ext.Router টুলস দিয়ে আপনি URL এর মাধ্যমে বিভিন্ন ভিউ এবং কম্পোনেন্ট রেন্ডার করতে পারেন, যা ডেটা বা ইউআরএল চেঞ্জের সাথে সিঙ্ক্রোনাইজেশন নিশ্চিত করে। ExtJS এর রাউটিং সিস্টেম সাশ্রয়ী এবং স্কেলেবল অ্যাপ্লিকেশন তৈরি করতে সহায়তা করে।
ExtJS তে Routes তৈরি এবং কনফিগার করা একটি অ্যাপ্লিকেশন ডেভেলপমেন্টের জন্য গুরুত্বপূর্ণ ফিচার। এটি মূলত URL Routing এর মতো কাজ করে, যেখানে ইউজার একটি নির্দিষ্ট URL এর মাধ্যমে একটি নির্দিষ্ট ভিউ বা কম্পোনেন্ট প্রদর্শন করতে পারে। ExtJS এর Ext.Router এবং Ext.application কনফিগারেশন ব্যবহার করে সহজেই Routes কনফিগার করা যায়।
Routes ব্যবহারের মাধ্যমে এক পৃষ্ঠা অ্যাপ্লিকেশন (SPA - Single Page Application) তৈরি করা সম্ভব হয়, যেখানে ইউজারের বিভিন্ন ইন্টারঅ্যাকশনের ভিত্তিতে অ্যাপ্লিকেশনের ভিউ পরিবর্তন হতে থাকে, কিন্তু পৃষ্ঠাটি রিফ্রেশ হয় না।
Routes হল একটি ম্যাপ যা URL এর সাথে মেলানো কম্পোনেন্ট বা ফাংশন কনফিগার করে। যখনই ইউজার কোনো নির্দিষ্ট URL ক্লিক করে বা ব্রাউজারে সরাসরি প্রবেশ করে, তখন Route সেটি শনাক্ত করে এবং নির্দিষ্ট অ্যাকশন অথবা ভিউ প্রদর্শন করে।
ExtJS-এ Routes কনফিগার করতে Ext.Router ব্যবহার করা হয়, যা URL-এর পাথ মেলাতে সাহায্য করে এবং প্রতিটি পাথের জন্য নির্দিষ্ট কন্ট্রোলার মেথড কল করে।
Ext.Router কনফিগার করাExt.Router একটি সহজ কিন্তু শক্তিশালী পদ্ধতি যা URL-এর পাথ এবং এর সাথে সম্পর্কিত কন্ট্রোলারের ফাংশন কনফিগার করতে ব্যবহার করা হয়।
Ext.application({
name: 'MyApp',
controllers: ['MainController'], // কন্ট্রোলার লোড করা
launch: function() {
// Routes কনফিগার করা
Ext.Router.register([
{
// "/home" পাথের জন্য MainController এর onHomeAction মেথড কল হবে
route: 'home',
handler: 'onHomeAction'
},
{
// "/about" পাথের জন্য MainController এর onAboutAction মেথড কল হবে
route: 'about',
handler: 'onAboutAction'
}
]);
// রাউটিং শুরু করা
Ext.Router.start();
}
});
এখানে:
route: URL পাথ কনফিগার করে, যেমন home, about ইত্যাদি।handler: কন্ট্রোলারের মেথডের নাম যা নির্দিষ্ট রাউটের জন্য কল হবে।আপনার কন্ট্রোলারে, আপনি রেজিস্টার করা রাউটের সাথে সম্পর্কিত handler মেথড তৈরি করবেন। এই মেথডগুলি ভিউ লোড অথবা অ্যাপ্লিকেশনের অন্য লজিক পরিচালনা করতে পারে।
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
onHomeAction: function() {
// হোম পেজ ভিউ লোড করা
Ext.Msg.alert('Welcome', 'Welcome to the Home page!');
},
onAboutAction: function() {
// অ্যাবাউট পেজ ভিউ লোড করা
Ext.Msg.alert('About', 'This is the About page!');
}
});
এখানে, onHomeAction এবং onAboutAction মেথড দুটি ব্যবহারকারীর home এবং about রাউটের জন্য কল হবে। এই মেথডগুলো কাস্টম ভিউ বা UI কম্পোনেন্টও লোড করতে পারে।
এখন, আপনি URL এর মাধ্যমে route নেভিগেট করতে পারবেন। উদাহরণস্বরূপ, /home URL তে যাওয়ার জন্য:
Ext.Router.redirect('home'); // এটি "/home" URL এ রিডাইরেক্ট করবে
এছাড়া, URL চেঞ্জ হলে রাউটার স্বয়ংক্রিয়ভাবে কনফিগার করা হ্যান্ডলার কল করবে।
Query parameters ব্যবহার করে আপনি URL এর সাথে অতিরিক্ত তথ্য পাস করতে পারেন, যা আপনার অ্যাপ্লিকেশন লজিক অনুযায়ী ব্যবহার করা যেতে পারে।
Ext.Router.register([
{
route: 'product/:productId',
handler: 'onProductPage'
}
]);
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
onProductPage: function(params) {
// URL প্যারামিটার থেকে productId অ্যাক্সেস করা
var productId = params.productId;
Ext.Msg.alert('Product', 'Viewing product with ID: ' + productId);
}
});
এখানে, product/:productId রুটে productId একটি ডায়নামিক প্যারামিটার হিসেবে কাজ করছে। যখনই ইউজার /product/123 URL তে যাবে, তখন onProductPage মেথড কল হবে এবং productId প্যারামিটারটি 123 হবে।
কখনো কখনো ইউজার এমন URL এ চলে যেতে পারে যা রেজিস্টার করা হয়নি। এর জন্য আপনি রাউটিংয়ের একটি ডিফল্ট error handler কনফিগার করতে পারেন।
Ext.Router.on('routeNotFound', function(route) {
Ext.Msg.alert('Error', 'Route ' + route + ' not found!');
});
এখানে, যদি ইউজার এমন কোনো URL এ যায় যা রেজিস্টার করা হয়নি, তাহলে routeNotFound ইভেন্ট ট্রিগার হবে এবং একটি ত্রুটি বার্তা দেখানো হবে।
Ext.Router URL পাথ এবং কন্ট্রোলারের মধ্যে সম্পর্ক তৈরি এবং পরিচালনা করতে সহায়ক।Ext.Router.register() ব্যবহার করে আপনি আপনার রাউট এবং সংশ্লিষ্ট হ্যান্ডলারগুলো রেজিস্টার করতে পারেন।ExtJS এর রাউটিং সিস্টেম আপনাকে Single Page Application (SPA) তৈরি করতে সহায়ক, যেখানে পৃষ্ঠা রিফ্রেশ না করেই URL এর ভিত্তিতে বিভিন্ন ভিউ প্রদর্শন করা যায়।
ExtJS এ Dynamic Routes এবং URL Mapping দুটি অত্যন্ত গুরুত্বপূর্ণ কনসেপ্ট, যা অ্যাপ্লিকেশন নেভিগেশন এবং URL এর সাথে সম্পর্কিত ডেটা মানিপুলেশন সহজ করে তোলে। বিশেষ করে, এক্সটিজেএসে Dynamic Routes এবং URL Mapping অ্যাপ্লিকেশনকে এমনভাবে ডিজাইন করতে সাহায্য করে, যা ডাইনামিক পেজ নেভিগেশন এবং URL এর মাধ্যমে ডেটা লোডিং এবং স্টেট ম্যানেজমেন্ট পরিচালনা করতে সক্ষম।
Dynamic Routes হলো এমন URL প্যাটার্ন বা রুটিং কনফিগারেশন যা অ্যাপ্লিকেশনের ডাইনামিক পেজের জন্য ব্যবহার করা হয়। ExtJS 5.0 এবং তার পরবর্তী সংস্করণে Ext.router ব্যবহার করে ডাইনামিক রুটিং পরিচালনা করা যায়, যা URL প্যাটার্নের ভিত্তিতে নেভিগেশন এবং অ্যাকশন নির্ধারণ করে।
Ext.application({
name: 'MyApp',
routes: {
'home': 'onHome', // URL 'home' এর জন্য onHome মেথড
'profile/:id': 'onProfile' // Dynamic URL, id দিয়ে প্যারামিটার দেওয়া
},
onHome: function() {
console.log('Navigating to Home');
// এখানে home পেজ রেন্ডার বা কোনো ভিউ শো করা যেতে পারে
},
onProfile: function(id) {
console.log('Navigating to Profile with id: ' + id);
// এখানে প্রোফাইল পেজ রেন্ডার বা কোনো ডেটা লোড করা যেতে পারে
},
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
html: 'Welcome to MyApp'
}]
});
}
});
এখানে:
routes: এখানে URL প্যাটার্ন নির্ধারণ করা হয়েছে। যেমন, 'home' URL এর জন্য onHome মেথড এবং 'profile/:id' এর জন্য onProfile মেথড নির্ধারণ করা হয়েছে।:id: Dynamic প্যারামিটার ব্যবহার করা হয়েছে, যার মাধ্যমে আপনি URL এর ভিতরে ডাইনামিক ডেটা পাঠাতে পারবেন।/:id: এই রুটে ডাইনামিক প্যারামিটার ব্যবহার করা হয় যা URL এর অংশ হিসেবে আর্গুমেন্ট পাস করবে।onHome: কোনো নির্দিষ্ট পেজ বা কন্টেন্ট লোড করার জন্য ব্যবহৃত ফাংশন।URL Mapping এর মাধ্যমে, আপনি URL এর মাধ্যমে অ্যাপ্লিকেশনের বিভিন্ন অংশকে মেপিং করতে পারেন। এটি মূলত এক্সটিজেএস অ্যাপ্লিকেশনের URL থেকে নির্দিষ্ট রুট এবং অ্যাকশন মাপ করা হয়। এটি একটি URL থেকে অ্যাপ্লিকেশনের অবস্থান এবং কন্টেন্ট নির্ধারণে সাহায্য করে।
Ext.define('MyApp.controller.Main', {
extend: 'Ext.app.Controller',
routes: {
'home': 'loadHome', // home route এর জন্য loadHome ফাংশন কল হবে
'products/:category': 'loadProducts', // Dynamic category route
'cart': 'loadCart' // cart route এর জন্য loadCart ফাংশন কল হবে
},
loadHome: function() {
console.log('Loading Home Page');
// হোম পেজ লোড করার লজিক
},
loadProducts: function(category) {
console.log('Loading Products for Category: ' + category);
// প্রোডাক্টের কেটাগরি অনুযায়ী পেজ লোড বা ডেটা লোড করার লজিক
},
loadCart: function() {
console.log('Loading Cart');
// শপিং কার্টের পেজ লোড করার লজিক
}
});
এখানে:
routes: URL প্যাটার্ন এবং তাদের কন্ট্রোলার ফাংশন মেপিং করা হয়েছে।loadHome, loadProducts এবং loadCart: এগুলি সেই ফাংশন যেগুলি রুট মিট হওয়ার পর কল করা হবে।এক্সটিজেএসে History Management বা ইতিহাস পরিচালনা একটি গুরুত্বপূর্ণ ফিচার, যা ব্রাউজারের URL এর মাধ্যমে পেজের অবস্থান পরিবর্তন করার জন্য ব্যবহৃত হয়। এতে করে URL মানের পরিবর্তন স্বয়ংক্রিয়ভাবে ফাংশন কল করার মাধ্যমে অ্যাপ্লিকেশনের রেসপন্স তৈরি করা হয়।
Ext.application({
name: 'MyApp',
launch: function() {
// ইতিহাস পরিচালনা সক্ষম করা
Ext.util.History.init();
// একটি রুট URL মান চেক করা
Ext.util.History.on('change', function(token) {
console.log('History token changed: ' + token);
// History token অনুসারে অ্যাকশন নেওয়া যেতে পারে
});
// URL পরিবর্তন করা
Ext.util.History.add('home');
}
});
Ext.util.History.add: এটি URL এর অংশে মান অ্যাড করে।Ext.util.History.on('change'): এটি ইতিহাস পরিবর্তন হলে ট্র্যাক করে এবং প্রয়োজনে অ্যাকশন নেয়।Lazy Loading এর মাধ্যমে ডাইনামিকভাবে কম্পোনেন্ট বা রুট লোড করা যায়, যেটি অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করতে সহায়ক। এক্সটিজেএসে রাউট ব্যবহারের মাধ্যমে ডাইনামিকভাবে কম্পোনেন্ট বা ভিউ লোড করা যায়।
Ext.application({
name: 'MyApp',
routes: {
'profile/:id': 'onProfileLoad'
},
onProfileLoad: function(id) {
console.log('Lazy load profile with ID: ' + id);
Ext.create('MyApp.view.Profile', {
userId: id
});
},
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
xtype: 'panel',
title: 'Welcome to MyApp'
}]
});
}
});
onProfileLoad: এখানে onProfileLoad ফাংশনে Profile কম্পোনেন্ট ডাইনামিকভাবে লোড করা হয়েছে যখন ইউজার নির্দিষ্ট প্রোফাইল URL পরিদর্শন করবে।এক্সটিজেএস (ExtJS) তে Dynamic Routes এবং URL Mapping এর মাধ্যমে আপনি অ্যাপ্লিকেশনের রাউটিং, নেভিগেশন, এবং স্টেট ম্যানেজমেন্ট সহজভাবে পরিচালনা করতে পারবেন।
ExtJS এ Nested Views এবং Routing Events ব্যবহৃত হয় একাধিক ভিউ এবং নেভিগেশন পরিচালনা করার জন্য, যা আপনাকে অ্যাপ্লিকেশনের মধ্যে বিভিন্ন অংশের মধ্যে ভিউ রাউটিং এবং ডায়নামিক কন্টেন্ট লোড করার ক্ষমতা প্রদান করে। এই ফিচারগুলি সাধারণত একক পৃষ্ঠার অ্যাপ্লিকেশন (SPA) তৈরি করার জন্য ব্যবহৃত হয়।
Nested Views হলো এমন ভিউ যা অন্য ভিউয়ের মধ্যে অন্তর্ভুক্ত থাকে বা নির্দিষ্ট প্যানেলে উপস্থাপিত হয়। এর মাধ্যমে আপনি ডায়নামিকভাবে একাধিক ভিউকে একে অপরের মধ্যে অ্যাড করতে পারেন, যাতে আপনার অ্যাপ্লিকেশন স্কেলেবল এবং আরও মডুলার হয়।
ধরা যাক, আপনার একটি মূল প্যানেল রয়েছে, এবং এতে আপনি দুটি ভিউ (একটি গ্রিড এবং একটি ফর্ম) অন্তর্ভুক্ত করতে চান।
Ext.define('MyApp.view.MainPanel', {
extend: 'Ext.panel.Panel',
xtype: 'mainpanel',
layout: 'border', // Layout সেট করা হলো 'border' যাতে ভিউটি বিভিন্ন অংশে বিভক্ত হয়
items: [
{
xtype: 'grid', // প্রথম ভিউ: গ্রিড
region: 'center',
store: 'MyStore', // স্টোর ব্যবহার হচ্ছে
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email' }
]
},
{
xtype: 'form', // দ্বিতীয় ভিউ: ফর্ম
region: 'east', // ফর্মটি 'east' অঞ্চলে
title: 'User Form',
width: 300,
bodyPadding: 10,
items: [
{ xtype: 'textfield', fieldLabel: 'Name' },
{ xtype: 'textfield', fieldLabel: 'Email' }
]
}
]
});
এখানে:
xtype: 'grid': একটি গ্রিড ভিউ তৈরি করা হয়েছে যা ডেটা টেবিল দেখাবে।xtype: 'form': একটি ফর্ম ভিউ তৈরি করা হয়েছে যেখানে ব্যবহারকারী ইনপুট দিতে পারবেন।এগুলি layout: 'border' এর মাধ্যমে একটি নির্দিষ্ট অঞ্চল (এস্ট, সেন্টার) তৈরি হয়ে একে অপরের মধ্যে নেস্টেড হয়ে গেছে।
Routing Events বা View Routing একটি গুরুত্বপূর্ণ বিষয় একক পৃষ্ঠার অ্যাপ্লিকেশন (SPA) তৈরি করার জন্য, যেখানে আপনি বিভিন্ন ভিউয়ের মধ্যে সহজেই নেভিগেট করতে পারেন। ExtJS এর Ext.router ক্লাস ব্যবহৃত হয় রাউটিং এবং URL এর মাধ্যমে ভিউ পরিবর্তন পরিচালনা করার জন্য।
ExtJS তে রাউটিং ব্যবহারের জন্য Ext.util.History এবং Ext.Router ব্যবহৃত হয়, যা ভিউ রাউটিং, URL হ্যান্ডলিং এবং হিস্ট্রি ম্যানেজমেন্ট করতে সাহায্য করে।
Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Viewport',
layout: 'fit',
items: [{
xtype: 'panel',
html: '<h1>Welcome to MyApp</h1>',
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Go to Page 1',
handler: function() {
Ext.Router.redirect('page1'); // Page1 এর URL এ রিডিরেক্ট করা
}
}, {
text: 'Go to Page 2',
handler: function() {
Ext.Router.redirect('page2'); // Page2 এর URL এ রিডিরেক্ট করা
}
}]
}]
}]
});
// Routing configuration
Ext.Router.add({
':page': {
action: 'onPageChange'
}
});
// Controller to handle page change
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
onPageChange: function(params) {
var page = params.page;
var panel = Ext.ComponentQuery.query('panel')[0];
if (page === 'page1') {
panel.update('<h1>This is Page 1</h1>');
} else if (page === 'page2') {
panel.update('<h1>This is Page 2</h1>');
}
}
});
এখানে:
Ext.Router.add: এটি URL পাথ যোগ করে, এবং প্রতিটি পাথের জন্য একটি অ্যাকশন নির্ধারণ করে। যেমন: :page হল URL প্যারামিটার যেটি page1 বা page2 হতে পারে।Ext.Router.redirect: এটি রিডিরেক্ট করার জন্য ব্যবহৃত হয়। যখন ইউজার "Go to Page 1" বা "Go to Page 2" ক্লিক করবে, তখন URL পরিবর্তিত হবে এবং onPageChange অ্যাকশন কল হবে।onPageChange: এটি একটি কন্ট্রোলার ফাংশন যা URL অনুযায়ী কনটেন্ট পরিবর্তন করবে।Nested Views এবং Routing Events একত্রে ব্যবহারের মাধ্যমে আপনি ডাইনামিক এবং ইন্টারেক্টিভ একক পৃষ্ঠার অ্যাপ্লিকেশন (SPA) তৈরি করতে পারেন, যেখানে ভিউ রাউটিং এবং nested (নেস্টেড) ভিউ দ্বারা ব্যবহারকারীর ইন্টারঅ্যাকশন সহ অ্যাপ্লিকেশনটি পরিচালনা হয়।
Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Viewport',
layout: 'fit',
items: [{
xtype: 'panel',
itemId: 'mainPanel',
html: '<h1>Home Page</h1>',
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Go to Page 1',
handler: function() {
Ext.Router.redirect('page1'); // Redirect to page1 route
}
}, {
text: 'Go to Page 2',
handler: function() {
Ext.Router.redirect('page2'); // Redirect to page2 route
}
}]
}]
}]
});
// Adding routes for page1 and page2
Ext.Router.add({
':page': {
action: 'onPageChange'
}
});
// Controller to handle the routes
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
onPageChange: function(params) {
var page = params.page;
var panel = Ext.ComponentQuery.query('#mainPanel')[0]; // Targeting main panel
if (page === 'page1') {
panel.update('<h1>This is Page 1</h1>');
panel.add({ xtype: 'button', text: 'Click Me!' }); // Add nested button to page 1
} else if (page === 'page2') {
panel.update('<h1>This is Page 2</h1>');
panel.add({ xtype: 'button', text: 'Click Here!' }); // Add nested button to page 2
}
}
});
এখানে:
Ext.Router.redirect এবং Ext.Router.add ব্যবহার করে আমরা ভিউ রাউটিং এবং URL চেঞ্জ নিয়ন্ত্রণ করছি।Ext.Router ব্যবহার করে URL রাউটিং এবং ভিউ রাউটিং করা যায়, যা একক পৃষ্ঠার অ্যাপ্লিকেশন (SPA) তৈরি করতে সাহায্য করে।এভাবে Nested Views এবং Routing একসাথে ব্যবহারের মাধ্যমে আপনি একটি পূর্ণাঙ্গ SPA (Single Page Application) তৈরি করতে পারবেন যা বিভিন্ন ভিউর মধ্যে সহজে নেভিগেট করা যায়।
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
