好看的课外书_[Ext JS6]路由(Routing)及使用| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS6]路由(Routing)及使用

## [Ext JS6]路由(Routing)及使用
## 在應用中使用路由（Routing）
在一般的網(wǎng)友中， 點(diǎn)擊一個(gè)link轉到一個(gè)新的頁(yè)面。 但是在單頁(yè)面的應用中，不會(huì )載入新頁(yè)面，只是和當前頁(yè)面的組件交互。如何使用瀏覽器的前進(jìn)/后退功能，就是 Ext Js5開(kāi)始的路由功能了。
路由可以追蹤應用的瀏覽器歷史記錄，可以可以直接鏈接到應用中的某個(gè)部分。這對于將app加到書(shū)簽和發(fā)送連接的場(chǎng)景非常有用。
但是路由不能保存數據和 Session，數據需要存儲在類(lèi)似cookie或是本地存儲中。路由僅用來(lái)追蹤應用的狀態(tài)。
哈希
https://www.example.com/apps/users#user=1234
user=1234稱(chēng)作哈希。
哈希變化的時(shí)候， 瀏覽器會(huì )添加到歷史記錄?？梢允褂们斑M(jìn)\后退按鈕。
### 應用路由的實(shí)現方式
Router類(lèi)是在Ext JS 5中新增的， 用它來(lái)處理應用中的哈希變化。Ext.util.History用來(lái)配合哈希的變化。路由是與哈希匹配的字符串，允許在Ext應用程序中進(jìn)行深層鏈接?？匆粋€(gè)實(shí)例：
```javascript
Ext.define('MyApp.view.main.MainController', {
extend : 'Ext.app.ViewController',
routes : {
'users' : 'onUsers'    
},    
onUsers : function () {
//...    
}});
```

這個(gè)路由會(huì )響應#users哈希， 并且執行onUsers方法。
### 更新哈希
控制器有提供redirectTo方法來(lái)更新哈希。
this.redirectTo(‘user/1234’);
redirectTo還可以設置選項：
force -如果為true，即使地址欄中的哈希值與傳遞給redirectTo的哈希值相同，這也會(huì )強制路由器做出反應。
replace -默認情況下，將更改散列并創(chuàng  )建瀏覽器歷史記錄中的新條目。 這意味著(zhù)瀏覽器的后退按鈕可以返回到前一個(gè)哈希。 如果為true，則瀏覽器歷史記錄中的當前條目將替換為傳遞給redirectTo的哈希。
默認令牌-Token
在/app/view/Application.js添加defaultToken配置
```javascript
Ext.define('MyApp.Application', {
	extend : 'Ext.app.Application',
	//...    
	defaultToken : 'home'
});
```

這里會(huì )使用#home
啟動(dòng)應用程序時(shí)，它將檢查URI的當前哈希值。 如果定義了哈希，它將執行路由處理程序。 如果沒(méi)有找到散列，它將添加#home散列，并且將執行任何路由處理程序以適當地處理它。
### 帶參數的哈希
```javascript
Ext.define('Extjs6App.view.main.MainController', {
	extend: 'Ext.app.ViewController', 
	alias: 'controller.main', 
	routes : { 
	'user/:id' : 'onUser'  
	},     
	onItemSelected: function (sender, record) {  
	Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);  
	},   
	onConfirm: function (choice) {    
	if (choice === 'yes') {   
	//       
	}   
	},  
	onUser: function(id){  
	Ext.Msg.alert('Route', 'routes is user/'+id);  
}});
```

在控制器中加入routes， 在瀏覽器輸入 http://localhost:1841/#user/1234， 效果就是會(huì )彈出對話(huà)框。
最重要的效果是如果輸入http://localhost:1841/#user/12345 之后， 可以使用瀏覽器的后退按鈕回到之前的頁(yè)面了。
### 哈希參數的格式
使用conditions設置參數的格式：
```javascript
Ext.define('MyApp.view.main.MainController', {
	extend : 'Ext.app.ViewController', 
	routes : {    
	'user/:id' : {   
	action     : 'onUser',     
	conditions : {     
	':id' : '([0-9]+)'     
	}     
	}   
	},    
	onUser : function (id) { 
	//...   
}});
```

### 路由的處理
有時(shí)候需要阻止路由的處理。比如當前用戶(hù)是否有權限查看應用程序的某些部分?？梢耘渲胋efore 用來(lái)停止當前或所有路由， 或者繼續執行。
```javascript
Ext.define('MyApp.view.main.MainController', {  
	extend : 'Ext.app.ViewController', 
	routes : {      
	'user/:id' : {   
	before  : 'onBeforeUser',       
	action  : 'onUser'  
	}   
	},  
	onBeforeUser : function (id, action) {   
	Ext.Ajax.request({       
	url     : '/security/user/' + id, 
	success : function() {  
	action.resume();         
	}      
	});   
	},   
	onUser : function (id) { 
	//...   
}});
```

onBeforeUser的一個(gè)參數是id , 第二個(gè)參數是 action， 執行 action的 resume方法繼續執行。停止路由，
```javascript
onBeforeUser : function (id, action) {    
	Ext.Ajax.request({   
	url     : '/security/user/' + id,        
	success : function () {    
	action.resume();       
	},           
	failure : function () {   
	action.stop();          
	}       
	});  
},
```

### 處理沒(méi)有匹配的路由
如果修改哈希沒(méi)有找到對應的路由， 就會(huì )觸發(fā)unmatchedroute?事件
```javascript
Ext.application({   
	name : 'MyApp',  
	listen : {  
	controller : {   
	'#' : {        
	unmatchedroute : 'onUnmatchedRoute' 
	}      
	}   
	}, 
	onUnmatchedRoute : function (hash) {   
	//...   
}});
```

也可以觸發(fā)一個(gè)全局的事件：
```javascript
Ext.application({   
	name : 'MyApp',  
	listen : {  
	global : {     
	unmatchedroute : 'onUnmatchedRoute'   
	}   
	},  
	onUnmatchedRoute : function (hash) {  
	//...    
}});
```

還可以直接使用 Ext的事件
```javascript
Ext.on('unmatchedroute', function (hash) {    //...});
```

### 在單個(gè)哈希使用多個(gè)路由
使用管道分割符： |
user/1234|messages
就會(huì )同時(shí)執行兩個(gè)路由了。
這個(gè)默認分割符也可以通過(guò)Ext.route.Router.multipleToken修改。
路由的名字也可以修改
```javascript
routes: {   
	'bar' : 'onBar',  
	'baz' : {      
	action : 'onBaz',  
	name   : 'bazRoute' 
	},   
	'foo' : 'onFoo'
}
```

初始哈?？梢酝ㄟ^(guò)首先傳遞一個(gè)字符串來(lái)設置
```javascript
this.redirectTo(‘foo’);
```
如果再加一個(gè)的話(huà)
```javascript
this.redirectTo({    bar : 'bar'});
```

就是疊加了， 哈希是#foo|bar.
如果已存在的就是替換
```javascript
this.redirectTo({    foo : 'foober'});
```

變成： ?#foober|bar
Hashbang?的支持
Hashbang?會(huì )在#之后多一個(gè) !
設置方式 Ext.util.History.hashbang = true;
在
Ext.application({    name : 'MyApp',    router : {        hashbang : true    }});

也可以這樣設置：
Ext.route.Router.setHashbang(true);
暫停和恢復路由
一個(gè)常見(jiàn)的用例是在應用程序啟動(dòng)時(shí)延遲執行路由，直到用戶(hù)檢驗完成。
```javascript
Ext.application({
name : 'MyApp',
defaultToken : 'home', 
launch : function () {
var me = this;        
Ext.route.Router.suspend();        
me.checkUserSession().then(me.onUser.bind(me), me.onUserError.bind(me));    
},    
onUser : function (user) {        
MyApp.$user = user;        
Ext.route.Router.resume();    
},    
onUserError : function (error) {        // handle error        // do not execute queued hash changes        
Ext.route.Router.resume(true);        this.redirectTo('login');    }});

```

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS6]路由(Routing)及使用

網(wǎng)站導航