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/ 官网原文