3.Ext JS 程式中使用路由

版權聲明：本文為部落客原創文章，未經部落客允許不得轉載。 https://blog.csdn.net/inforstack/article/details/53559851

簡單說明

RedirectTo.js  //重定向類      

RedirectToModel.js //重定向的模型類      

RedirectToController.js //重定向的控制類
      

RedirectTo.js

Ext.define('application.view.redirectTo.RedirectTo', {
	extend : 'Ext.form.Panel',
	requires : ['Ext.form.Panel',
			'application.view.redirectTo.RedirectToModel',
			'application.view.redirectTo.RedirectToController'],
	xtype : 'redirectTo',
	viewModel : 'redirectTo',
	controller : 'redirectTo',
	defaults : {
		xtype : 'button',
		margin : '5 5 5 5'
	},
	items : [{
		bind : { text : '{Home}' },
		action : 'toHome'
	}, {
		bind : { text : '{User}' },
		handler : 'toUser'
	}, {
		bind : { text : '{Users}' },
		handler : 'toUsers'
	}, {
		bind : { text : '{HomeUser}' },
		handler : 'toHomeUser'
	}, {
		bind : { text : '{Empty}' },
		handler : 'toEmpty'
	}]
})           

RedirectToModel.js

Ext.define('application.view.redirectTo.RedirectToModel', {
	extend : 'Ext.app.ViewModel',
	alias : 'viewmodel.redirectTo',
	data : {
		User : 'User',
		Users : 'Users',
		Home : 'Home',
		Empty : 'Empty',
		HomeUser : 'Home User'
	}
});
           

RedirectToController.js

Ext.define('application.view.redirectTo.RedirectToController', {
	extend : 'Ext.app.ViewController',
	alias : 'controller.redirectTo',
	routes : {										 //路線
		//URL:http://localhost#home%123
		'home%:id' : 'onHome', 		// 跳轉到onHome
		// URL:http://localhost#user/123
		'user/:id' : { 								//并且ID滿足正規表達式，跳轉到onUser
			action : 'onUser', 				// 指定跳轉函數
			conditions : {
				':id' : '([0-9]+)' 					// 檢測參數類型
			}
		},
		//URL:http://localhost#users/123
		'users/:id' : {							// 并且ID滿足正規表達式，并且在執行前檢測成功，跳轉到onUsers
			action : 'onUsers', 			// 指定跳轉函數
			before : 'beforeUsers', 	// 請求之前指定跳轉函數
			conditions : {
				':id' : '([0-9]+)'
			}
		}
	},
	listen : {
		component : {
			//xtype = redirectTo >  action= toHome >  button,如果點選那麼執行toHome函數
			'redirectTo button[action=toHome]' : {
				click : 'toHome'
			}
		},
		//URL:http://localhost#users/123 
		//如上URL,先執行的是 onUnmatchedroute1 在執行 onUnmatchedroute2
		//其實先後執行循序是 controller 中的編寫循序
		controller : {
			// 攔截所有
			'*' : {
				unmatchedroute : 'onUnmatchedroute1'
			},
			// 攔截URL中帶有 #
			'#' : {
				unmatchedroute : 'onUnmatchedroute2'
			}
		}
	},

	onHome : function(id) {
		Ext.Msg.alert("Message", "Home ID:" + id);
	},
	onUser : function(id) {
		Ext.Msg.alert("Message", "User ID:" + id);
	},
	onUsers : function(id) {
		console.log(id);
	},
	onUnmatchedroute2 : function(hash) {
		Ext.Msg.alert("Message", "# HASH:" + hash);
	},
	onUnmatchedroute1 : function(hash) {
		Ext.Msg.alert("Message", "* HASH:" + hash);
	},
	beforeUsers : function(id, action) {
		var count = Math.round(Math.random() * 10)
		if (count >= 5) { // 成功執行
			Ext.Msg.alert("Message", "Before Users ID:" + id + " Random:" + count + " Resume");
			action.resume();
		} else { // 中斷請求
			Ext.Msg.alert("Message", "Before Users ID:" + id + " Random:" + count + " Stop");
			action.stop();
		}
	},
	
	toHome : function(button, e) {
		this.redirectTo('home%123456');
	},
	toUser : function(button, e) {
		this.redirectTo('user/123456');
	},
	toUsers : function(button, e) {
		this.redirectTo('users/123456');
	},
	//如果直線多個路線 "|" 隔開,如下
	toHomeUser : function(button, e) {
		this.redirectTo('home%123456|user/123456');
	},
	toEmpty : function(button, e) {
		this.redirectTo("77123");
	}
});
           

https://www.sencha.com/blog/how-to-use-routing-in-your-ext-js-5-apps/ 官網原文