武道至尊帝临小说_[Ext JS]組件與容器的選擇與開(kāi)發(fā)| 成都西華升騰科技有限公司

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

CmsWing

[Ext JS]組件與容器的選擇與開(kāi)發(fā)

## 組件與容器的選擇與開(kāi)發(fā)
在Ext JS中，容器類(lèi)有很多種，而且存在繼承關(guān)系，包括容器的超類(lèi)（Container）、一般面板（Panel），表單面板，表格面板以及樹(shù)面板等；組件類(lèi)包括按鈕、輸入框、下拉單、文件上傳等。
### 容器（Container）與面板（Panel）適用場(chǎng)景
父類(lèi)組件能達成的效果，子類(lèi)也可以達成，另外子類(lèi)擴展了更多的功能，但也意味著(zhù)需要更多的開(kāi)銷(xiāo)（主要是內存）。
Panel 是Container的子類(lèi)，兩者的適用場(chǎng)景如下：
Panel： 需求的UI效果需要有header(頭部)、footer（底部）以及 toolbars（工具欄）
Ext.container.Container： 如果需求的UI組件包含其他的組件，但是又不需要Panel那么多的功能。
### 組件繼承選擇
Ext JS提供了豐富的組件類(lèi)，如果現有組件不滿(mǎn)足要求，可以繼承已有類(lèi)定義新的類(lèi)。
Ext.Base是Ext JS的根類(lèi)， 所有的原型和靜態(tài)成員都會(huì )被其他類(lèi)繼承。繼承的原則是找功能最接近的基類(lèi)繼承，這樣既滿(mǎn)足了需求，又節省了開(kāi)銷(xiāo)。UI組件類(lèi)從Ext.Component及其子類(lèi)上繼承。
組件類(lèi)定義的實(shí)例如下：
```javascript
Ext.define('My.custom.Component', { //組件類(lèi)名  
	extend: 'Ext.Component',    //繼承   
	newMethod : function() {
	//子類(lèi)擴展的方法
	//...   
}});

```
繼承的兩個(gè)考慮點(diǎn)
類(lèi)需要提供的功能
效率，最接近的基類(lèi)。
### 面板與組件的功能和區別
面板類(lèi)（Panel）的能力
UI界面大部分從Ext.panel.Panel繼承， 該類(lèi)的能力有：
Border 邊框
Header：頭部
Header toolbar： 頭部工具欄
Footer： 腳部
Footer buttons: 腳部按鈕
Bottom toolbar： 底部工具欄
包含和管理子組件
效果類(lèi)似：
![](/upload/picture/2022-10-11/upload_d38c428ca0a7ab3f1ed47069b3064f86.png)
如果以上的部分不需要，則使用Panel就是浪費資源了。
擴展Ext.panel.Panel的類(lèi)通常是特定應用程序使用，并且通常用于在配置的布局中聚合其他UI組件（通常是容器，或表單字段），并且在tbar和bbar提供操作組件的方法。
### 組件類(lèi)（Component）的能力
如果UI組件不需要包含其他組件，只是包含HTML的形式的內容，則繼承Ext.Component是比較合適的。
舉例來(lái)看，一個(gè)包含HTML Image元素的組件，允許設置image的src屬性， 觸發(fā)load事件時(shí)顯示。
對以上代碼部分說(shuō)明如下：
apply ( object, config, [defaults] ) 的作用是將第2、3參數復制到第一個(gè)參數。比如：
Ext.apply(obj, { a: 1 }, { a: 2 }); //obj.a === 1

alias:'widge.myImage',與xtype:'myImage',看起來(lái)作用相同。
以上實(shí)例僅演示，實(shí)際功能直接使用Ext.Img就可以。
XTypes和懶實(shí)例化
每種組件都有一個(gè)特性名字：xtype。 比如Ext.panel.Panel 的xtype的值是"panel"。
上面創(chuàng  )建組件實(shí)例后添加到容器， 但一開(kāi)始就把所有的組件實(shí)例好是比較耗費時(shí)間的。而且在應用中，可能有的組件都不用顯示， 比如標簽組件。
```javascript
Ext.create('Ext.tab.Panel', {   
	renderTo: Ext.getBody(), 
	height: 100, 
	width: 200,   
	items: [    
	{            
	// Explicitly define the xtype of this Component configuration.            // This tells the Container (the tab panel in this case)            // to instantiate a Ext.panel.Panel when it deems necessary        
	xtype: 'panel',      
	title: 'Tab One',       
	html: 'The first tab',     
	listeners: {      
	render: function() { 
	Ext.MessageBox.alert('Rendered One', 'Tab One was rendered.');     
	}         
	}   
	},    
	{      
	// xtype for all Component configurations in a Container            title: 'Tab Two',            html: 'The second tab',      
	listeners: {        
	render: function() {                
	Ext.MessageBox.alert('Rendered One', 'Tab Two was rendered.');          
	}    
	}    
	}   
]});
```

需要的時(shí)候再實(shí)例化。在items 中配置xtype。
### 組件的顯示和隱藏
所有的組件都內置了show和 hide方法。
實(shí)現機制使用CSS的"display：none", 可以通過(guò)hideMode配置修改隱藏的方式。示例代碼如下：
var panel = Ext.create('Ext.panel.Panel', {        renderTo: Ext.getBody(),        title: 'Test',        html: 'Test Panel',        hideMode: 'visibility' //隱藏模式     });    panel.hide(); // 隱藏面板    panel.show(); //顯示面板

### 模板方法
Ext JS使用模板方法設計模式在父類(lèi)中定義了一些方法， 方法內容由具體子類(lèi)實(shí)現。
比如：Component中定義了render()方法，其負責組件渲染，render雖然不能被重寫(xiě)，但是它會(huì )調用onRender()方法，所以子類(lèi)可以通過(guò)定義這個(gè)方法添加客制化邏輯。
調用邏輯如圖：
![](/upload/picture/2022-10-11/upload_c47a3d673167dd582dc0d4f452256f94.png)
代碼示例如下：
Ext.define('My.custom.Component', {    extend: 'Ext.Component',    onRender: function() {        this.callParent(arguments); // call the superclass onRender method        // perform additional rendering tasks here.    }});

### Container包含的模板方法有：
onBeforeAdd ， 在新組件添加之前調用。該方法傳遞新組件參數，可以用來(lái)修改。返回false中止操作。
onAdd，新組件添加后調用，傳遞已經(jīng)添加的新組件，此方法可用于更新可能取決于子項狀態(tài)的任何內部結構。
onRemove， 組件移除時(shí)調用， 傳遞已經(jīng)移除的組件作為參數，此方法可用于更新可能取決于子項狀態(tài)的任何內部結構。
beforeLayout:在布局子組件之前調用
afterLayout:在布局子組件之后調用
Panel提供的模板方法有：
afterCollapse：Panel收合后調用
afterExpand： Panel展開(kāi)后調用
onDockedAdd: Docked(?？?也就是工具欄。工具欄項次添加時(shí)調用
4.onDockedRemove：,工具欄項次移除時(shí)調用
注意：許多模板方法有一個(gè)對應事件，比如組件渲染之后有render事件，定義子類(lèi)時(shí)，使用模板方法而不是事件來(lái)執行生命周期中的邏輯。原因是事件可以使用代碼暫停，也可以通過(guò)處理器停止。
原則是能用模板方法就用模板方法。在組件中可以使用的模板方法有：
initComponent， 由constructor(構造函數)調用；用于初始化數據、設置配置項和添加事件處理。
beforeShow: 組件顯示前調用
onShow: 顯示的時(shí)候添加額外的行為，在調用父類(lèi)onShow方法調用之后，組件會(huì )顯示。
afterShow:組件顯示后調用
onShowComplete： afterShow調用之后
onHide： 隱藏操作是添加額外的行為。調用父類(lèi)的onHide方法后， 組件會(huì )被隱藏
afterHide： 隱藏后調用
onRender： 渲染階段添加額外行為
afterRender： 渲染完成之后添加額外行為。在這個(gè)階段，組件元素根據配置應用樣式，可以添加額外的CSS配置，配置是否可見(jiàn)以及配置組件狀態(tài)。
onEnable：在允許操作前添加額外行為。在調用父類(lèi)的onEnable之后，組件會(huì )啟用
onDisable： 在啟用操作前添加額外行為。在調用父類(lèi)的onEnable之后，組件會(huì )禁用
onAdded： 添加子組件時(shí)添加額外行為。在此階段組件位于父容器的子項集合中。 調用超類(lèi)的onAdded之后，將顯示ownerCt引用，如果配置了ref，則將設置refOwner。
onRemoved：從父容器移除組件時(shí)添加額外內容。在此階段，組件從父容器的子項中移除，但是沒(méi)有被銷(xiāo)毀。（除非父類(lèi)的autoDestroy?配置為true，或是調用remove方法傳遞了銷(xiāo)毀的第二個(gè)參數為true），將顯示ownerCt引用，ownerCt和refOwner就不存在了。
onResize：調整大小時(shí)添加額外行為
onPosition：調整位置是添加額外操作
onDestroy：銷(xiāo)毀操作添加額外行為，呼叫父類(lèi)的onDestroy方法后，組件會(huì )被銷(xiāo)毀
beforeDestroy： 組件銷(xiāo)毀前調用
afterSetPosition： 組件位置被設置后調用
afterComponentLayout：組件布局后調用
beforeComponentLayout：組件布局前調用
### 組件浮動(dòng)
使用CSS的絕對定位可以將組件浮動(dòng)在文檔流之外，不參與當前容器的布局。
-Windows這樣的組件默認是浮動(dòng)。
-通過(guò)float配置可以配置所有組件的浮動(dòng)。
```javascript
var panel = Ext.create('Ext.panel.Panel', {     
	width: 200,      
	height: 100,            
	floating: true,       
	title: 'Test',         
	html: 'Test Panel'      
});    
panel.show();
```

一般的組件使用renderTo屬性指定渲染的目的地，或者作為子組件添加到容器中。浮動(dòng)組件不需要指定，其會(huì )在首次調用show()方法是自動(dòng)渲染到文檔內容（document body）。
浮動(dòng)組件相關(guān)的配置：
draggable: 是否可以拖動(dòng)
shadow： 客制組件的陰影外觀(guān)
alignTo() :讓組件對應到特定的元素
center(): 浮動(dòng)組件居中放置在容器中

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

購物車(chē)

0 ITEMS ON YOUR CART

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

[Ext JS]組件與容器的選擇與開(kāi)發(fā)

網(wǎng)站導航