好看的电视剧_[Ext JS6] ViewControllers-視圖控制器| 成都西華升騰科技有限公司

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

CmsWing

[Ext JS6] ViewControllers-視圖控制器

## [Ext JS6] ViewControllers-視圖控制器
Ext JS 加入了ViewModels和 MVVM， 可以像MVC的 ViewController一樣。這兩種方式不相互排斥， 甚至可以混合使用。
### 應用層級控制器 - Application-level Controllers
一個(gè)控制器繼承自Ext.app.Controller， 這些控制器使用類(lèi)似 CSS的選擇器來(lái)查找組件和響應事件。也可以通過(guò) refs 選擇或獲取組件實(shí)例。
這些控制器在應用啟動(dòng)的時(shí)候創(chuàng  )建， 會(huì )在整個(gè)應用的生命周期中存在?？刂破饕部梢怨芾矶鄠€(gè)視圖的實(shí)例。
在大型項目中， 視圖和控制器可能是有多個(gè)不同開(kāi)發(fā)團隊開(kāi)發(fā)，最終集成到應用中。 要確?？刂破鲀H對其相關(guān)的視圖響應是比較困難的。另外， 開(kāi)發(fā)人員通常希望在應用啟動(dòng)的時(shí)候限制控制器的數量。雖然可以通過(guò)一些方法懶加載控制器， 但是即使不需要它們也不會(huì )被銷(xiāo)毀。
### 視圖控制器 - ViewControllers
Ext JS5及之后版本向后兼容合法的應用層級控制器。引入了新的控制器類(lèi)型Ext.app.ViewController， 解決了大型項目控制器的問(wèn)題。
使用 “l(fā)isteners”和 “reference”配置簡(jiǎn)化了和視圖的連接
-利用視圖的生命周期管理和其管理的視圖控制器的生命周期
-基于一對一的視圖管理關(guān)系降低了視圖控制器的復雜性
-提供封裝使嵌套視圖可靠
-保留在關(guān)聯(lián)視圖下方的任何級別選擇組件并收聽(tīng)其事件的功能。
### 監聽(tīng)器 listeners
實(shí)例
View子項的監聽(tīng)配置實(shí)例
```javascript
Ext.define('MyApp.view.foo.Foo', {
	extend: 'Ext.panel.Panel',
	xtype: 'foo',
	controller: 'foo',
	items: [{
	xtype: 'textfield',
	fieldLabel: 'Bar',
	listeners: {
	change: 'onBarChange'  // no scope given here        
	}    
}]});
```

在控制器中的配置：
```javascript
Ext.define('MyApp.view.foo.FooController', {
	extend: 'Ext.app.ViewController',
	alias: 'controller.foo',
	onBarChange: function (barTextField) {
	// called by 'change' event    
}});
```

'onBarChange’沒(méi)有指定范圍， 則默認查找屬于它自己的控制器。
安裝經(jīng)驗， 監聽(tīng)配置是預留給組件創(chuàng  )建者使用。所以視圖如何監聽(tīng)自己的事件，還是由其基類(lèi)觸發(fā)的？答案是需要顯示定義范圍scope。
```javascript
Ext.define('MyApp.view.foo.Foo', {
	extend: 'Ext.panel.Panel',
	xtype: 'foo',
	controller: 'foo',
	listeners: {
	collapse: 'onCollapse',
	scope: 'controller'    },
	items: [{
	...    
}]});
```

上面使用了 Ext JS的兩個(gè)新功能： 范圍（scopes）和聲明式監聽(tīng) (declarative listeners)。
Scope的值可以是 this 和 controller。如果是 MVC的應用， 大部分使用controller。
因為View是一種類(lèi)型的Ext.Component， 指定視圖的 xtype,這樣其他的視圖就可以使用這種方式來(lái)創(chuàng  )建。例如：
```javascript
Ext.define('MyApp.view.bar.Bar', {
	extend: 'Ext.panel.Panel',   
	xtype: 'bar',   
	controller: 'bar', 
	items: [{       
	xtype: 'foo',       
	listeners: { 
	collapse: 'onCollapse'  
	}   
}]});
```

### 引用 - Reference
在完成控制器邏輯的時(shí)候， 常見(jiàn)的松散耦合的方式是獲取需要的組件完成特定的動(dòng)作， 類(lèi)似：
```javascript
Ext.define('MyApp.view.foo.Foo', { 
	extend: 'Ext.panel.Panel',   
	xtype: 'foo',  
	controller: 'foo',  
	tbar: [{     
	xtype: 'button',     
	text: 'Add',     
	handler: 'onAdd'  
	}],  
	items: [{ 
	xtype: 'grid',  
	...   
}]});

Ext.define('MyApp.view.foo.FooController', {  
	extend: 'Ext.app.ViewController',   
	alias: 'controller.foo',   
	onAdd: function () {     
	// ... get the grid and add a record ...   
}});
```

如何獲取組件， 比如上面的Grid組件， 最快的方式就是通過(guò) 配置的id使用 getCmp方法， 或者是 配置ItemId通過(guò) refs或者是組件查找的方法， id查找不好的地方就是整個(gè)應用id及對應的DOM必須唯一。使用 itemId或者組件查找有彈性一點(diǎn)，但是需要通過(guò)查找的方式獲取。
使用 reference?配置，可以簡(jiǎn)單的通過(guò)lookupReference的方式來(lái)獲取。實(shí)例如下：
```javascript
Ext.define('MyApp.view.foo.Foo', {
	extend: 'Ext.panel.Panel',  
	xtype: 'foo', 
	controller: 'foo', 
	tbar: [{  
	xtype: 'button',   
	text: 'Add', 
	handler: 'onAdd' 
	}],  
	items: [{ 
	xtype: 'grid',  
	reference: 'fooGrid'   
	...   
}]});

Ext.define('MyApp.view.foo.FooController', {  
	extend: 'Ext.app.ViewController', 
	alias: 'controller.foo',   
	onAdd: function () {    
	var grid = this.lookupReference('fooGrid'); 
}});
```

這種方式和指定 itemId 之后通過(guò)this.down()的方式獲取很類(lèi)似。但是， 實(shí)現的引擎則有很大差異。
首先 reference?配置指示組件在其視圖中組測自己（在這種情況下通過(guò)ViewController的存在來(lái)識別）
另外， lookupReference方法只是簡(jiǎn)單的咨詢(xún)緩存是否需要刷新引用， 偽代碼類(lèi)似：
```javascript
lookupReference: (reference) {  
	var cache = this.references;  
	if (!cache) {     
	Ext.fixReferences(); // fix all references    
	cache = this.references; // now the cache is valid    }   
	return cache[reference];
}
```

也就是說(shuō)， 這種方式?jīng)]有搜索而且在容器中添加或是刪除組件也是一次性調整， 除了性能上提升外，還有其他的好處。
### 封裝- Encapsulation
使用refs配置來(lái)查找很有彈性， 但是也存在一定風(fēng)險。這個(gè)選擇器雖然可以看到各個(gè)層級的組件，但是容易出錯。舉例來(lái)說(shuō)， 一個(gè)控制器如果獨立運行的話(huà)沒(méi)有恩替， 但是導入其他的視圖之后就會(huì )失敗了。
使用監聽(tīng)和references?在ViewController?中這些問(wèn)題就不在了。因為listeners 和 reference 配置僅僅定義在自己的ViewController中。
ViewController中有一個(gè)幫助方法：fireViewEvent
```javascript
Ext.define('MyApp.view.foo.FooController', {  
	extend: 'Ext.app.ViewController', 
	alias: 'controller.foo', 
	onAdd: function () {      
	var record = new MyApp.model.Thing();   
	var grid = this.lookupReference('fooGrid');  
	grid.store.add(record);      
	this.fireViewEvent('addrecord', this, record); 
}});
```

使用標準的監聽(tīng)器：
```javascript
Ext.define('MyApp.view.bar.Bar', { 
	extend: 'Ext.panel.Panel',  
	xtype: 'bar',  
	controller: 'bar',  
	items: [{      
	xtype: 'foo',    
	listeners: {         
	collapse: 'onCollapse',   
	addrecord: 'onAddRecord'    
	} 
}]});
```

### 監聽(tīng)和事件域知識
生命周期
在大型應用中，一般是在首次需要的時(shí)候再動(dòng)態(tài)創(chuàng  )建控制器，這樣可以減少系統加載的時(shí)間，提升系統性能。Ext JS早期版本的限制是只要創(chuàng  )建就會(huì )一直存在， 無(wú)縫銷(xiāo)毀和釋放資源。同樣，這也沒(méi)有改變一個(gè)控制器有多個(gè)（或是沒(méi)有）關(guān)聯(lián)視圖的現實(shí)。
ViewController 在組件生命周期很早就創(chuàng  )建出來(lái)并綁定到視圖的生命周期， 當視圖銷(xiāo)毀時(shí)， ViewController也一起銷(xiāo)毀。這意味著(zhù)不再強制ViewController管理沒(méi)有視圖或許多視圖的狀態(tài)。
一對一的關(guān)系意味著(zhù)關(guān)聯(lián)的追蹤簡(jiǎn)單并且不容易發(fā)生銷(xiāo)毀組件的泄漏。ViewController可以實(shí)現任何方法已經(jīng)各生命周期點(diǎn)的任務(wù)：
beforeInit?： 可以被重寫(xiě)。在組件initComponent?方法調用之前執行。這個(gè)方法在控制器創(chuàng  )建完成之后就立即執行， 一般發(fā)生在組件構造器呼叫initConfig.
init?: 視圖調用initComponent?不久后調用。
initViewModel? - 在視圖的ViewModel?創(chuàng  )建的時(shí)候調用。
destroy?： 清除并返回資源， 一定要調用callParent

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

購物車(chē)

0 ITEMS ON YOUR CART

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

[Ext JS6] ViewControllers-視圖控制器

網(wǎng)站導航