本文地址：[http://blog.csdn.net/sushengmiyan/article/details/38487519](http://blog.csdn.net/sushengmiyan/article/details/38487519) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) -------------------------------------------------------------資源鏈接----------------------------------------------------------------------- 翻譯來源 ?Sencha Cmd官方網站： [?http://www.sencha.com/products/extjs/up-and-running/concepts-components/](http://www.sencha.com/products/extjs/up-and-running/concepts-components/) ------------------------------------------------------------------------------------------------------------------------------------------------ 一個EXT JS的應用程序的UI用戶界面是有一個或者多個部件構成的組件。所有的組件都是Ext.Component類的子類，允許它們參與自動化生命周期管理包括實例化，渲染，大小，定位還有銷毀。Ext JS提供了一系列有用的組件，任何組件可以很容易地擴展到創建一個定制的組件。 ### 組件的繼承關系 容器是一個特殊的組件類型，它可以包含其他組件。一個典型的應用程序是有許多嵌套的組件像樹狀結構哪有的組件繼承結構。容器負責管理他們的子組件的生命周期，包含創建，渲染，大小還有位置和銷毀。一個典型的應用程序的組件繼承從頂層的Viewport開始，它還有其它的容器嵌套在里面。  子組件通過使用容器的items配置增加到容器中，下面的例子使用Ext.create()創建初始化了兩個面板，然后作為Viewport的子組件增加到Viewport中。 ~~~ var childPanel1 = Ext.create('Ext.panel.Panel', { title: 'Child Panel 1', html: 'A Panel' }); var childPanel2 = Ext.create('Ext.panel.Panel', { title: 'Child Panel 2', html: 'Another Panel' }); Ext.create('Ext.container.Viewport', { items: [ childPanel1, childPanel2 ] }); ~~~ 容器使用布局管理器來管理組件的大小還有位置，想要獲取關于布局的更多信息，請訪問 [布局和容器指南](http://docs.sencha.com/extjs/5.0.0/core_concepts/layouts.html) ### XTypes和懶加載 每一個組件都有一個符號名叫做xtype。像Ext.panel.Panel就有一個xtype名叫做‘panel’，?[組件的API文檔](http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.Component)?列出了所有的組件的xtype。上面的例子展示了如何增加一個已經存在的組件到一個容器中。然而，在大型的應用程序中，著不是理想的，因為不是所有的組件都要被實例化，一些組件可能永遠不需要被初始化，這取決于你的應用程序。例如，一個使用tab panel的應用程序只需要獲取用戶點擊之后的那個tab的內容。這就是xtypes派上用處的地方通過允許容器的孩子在前置進行配置，需要的時候才進行實例化。 下面的示例代碼演示了懶實例化和呈現一個使用選項卡面板的容器的子組件。每個標簽都有一個事件偵聽器，顯示一個警告標簽時呈現。 ~~~ 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.'); } } } ] }); ~~~ 允許這段代碼，會立即產生第一個tab的alert彈出框。這個發生是因為這是默認的tab頁簽，所以容器就立即調用病實例化容器的Tab Panel。  第二個tab框直到點擊的時候才會彈出，這就顯示了需要的時候才會渲染，就是說tab頁簽激活的時候才會通知render事件。  ### 顯示和隱藏 所有的組件都是在show和hide方法中構造的。用來隱藏組件的默認的css方法是“display:none”但是通過hidemode配置的時候就有所變化了： ~~~ var panel = Ext.create('Ext.panel.Panel', { renderTo: Ext.getBody(), title: 'Test', html: 'Test Panel', hideMode: 'visibility' // use the CSS visibility property to show and hide this component }); panel.hide(); // hide the component panel.show(); // show the component ~~~ ### 浮動組件 浮動組件是通過css絕對路徑將文檔放置在外的，并且不在參與組件的容器的布局的。有些組件像Windows是默認的浮動，所有的組件都可以通過配置來實現浮動： ~~~ var panel = Ext.create('Ext.panel.Panel', { width: 200, height: 100, floating: true, // make this panel an absolutely-positioned floating component title: 'Test', html: 'Test Panel' }); ~~~ 上述代碼初始化了一個panel，但是沒有渲染。正常情況下，一個組件或者有一個renderTo配置或者當做一個子組件增加到組件的容器中，但是當是浮動組件的時候，都不需要了。浮動組件會在第一次調用show方法的時候被渲染 ~~~ panel.show(); // render and show the floating panel ~~~ 下面有一些對浮動組件來說可以進行配置的一些方法 1.draggable:可以拖動屏幕周圍浮動組件。 2.shadow:定制的外觀浮動組件的影子。 3.alignTo:將浮動組件指定到特定的元素。 4.center() 將組件浮動到組件的中心 ### 創建自定義組件 ### 成分或者擴展 當創建一個新的UI類的時候，該類必須做出決定是否應該擁有一個組件的一個實例,或擴展組件 根據功能需要繼承一個最近的基類是被推薦的。這是因為EXT JS提供的自動生命周期管理包含了當需要的時候自動渲染，自動大小，自動調整位置當通過布局管理的時候，也會自動的從容器中移除和銷毀。 通過組建創建新類比較容易，不推薦使用一個新的類擁有一個組件在外部去渲染和管理。 ### 子類 [類系統](http://blog.csdn.net/sushengmiyan/article/details/38479079)?讓擴展extjs框架變得非常容易。Ext.Base是所有Ext JS類的構建塊,原型和這個類的靜態成員被其他類繼承。 盡管你可以再低水平的情況下增加一個方法，但是開發人員在通常情況下會想通過高一點的繼承鏈來開始。 下面這個例子創建了一個Ext.Component的子類： ~~~ Ext.define('My.custom.Component', { extend: 'Ext.Component', newMethod : function() { //... } }); ~~~ 這個例子創建了一個新的類‘My.custom.Component’，它繼承了Ext.Component的所有方法屬性等。 ### 模板方法 EXT JS使用 [模板方法模式](http://en.wikipedia.org/wiki/Template_method_design_pattern)?代表子類，行為。 這意味著，在繼承鏈中的每一個類都可能貢獻一個額外的邏輯組件的生命周期中的某些階段。每一個類實現自己的獨有的行為，并且允許其他繼承自這個類的實現自己特有的邏輯。 典型例子就是 渲染 方法，render 是定義在Component類中的一個方法，它對初始化組件的呈現階段生命周期負責。render不能被重寫，但是可以調用onRender方法在處理子類實現的時候可以調用來實現自己的特有屬性方法。每一個onRender方法必須調用父類的onRender方法在貢獻自己額外邏輯的時候。 下面的表格展示了onRender模板方法的功能。 render方法被調用（通過布局管理器來實現的）。這個方法不能被重寫也是通過Ext基類實現的，它調用this.onRender方法，這個方法實現了當前子類（如果被實現了的話）。這個就調用父類的版本，以此類推。最終，每個類貢獻了自己的功能，控制返回render方法。  下面是一個組件子類實現onRender的例子： ~~~ Ext.define('My.custom.Component', { extend: 'Ext.Component', onRender: function() { this.callParent(arguments); // call the superclass onRender method // perform additional rendering tasks here. } }); ~~~ 需要值得注意的是，許多模板方法都有自己對應的事件，例如渲染事件，是在渲染事件出發的時候執行。然而，當子淚花的時候，它必須使用模板方法在重要聲明周期階段執行類邏輯而不是事件。事件可以通過編程來停止或者暫停。 下面是一些子類可以實現的組件的模板方法： initComponent:這個方法被類構造方法喚醒，用來初始化數據，設置屬性，附加事件處理。 beforeShow:在組件顯示之前被調用 onShow: 允許添加行為操作，在超類的onShow方法被調用之后就組件就可見了。 afterShow: 方法在組件被顯示之后調用。 onShowComplete:這個方法在afterShow完成之后被調用 onHide:在隱藏的時候可以增加一些操作，調用超類的onHide方法之后，組件就看不見了。 afterHide:組件隱藏之后的事件處理 onRender:渲染的時候執行的事件 afterRender:渲染完成之后可以增加的額外操作。在你這個階段，組件的元素已經根據配置或者css雷鳴增加了類型，并且將會被配置可見性和啟用狀態。 onEable:組件可用性，調用超類的這個事件的時候，組件就可以使用了 onDisable:組件不可用處理的時候的事件。 onAdded:當組件被增加的時候，組件被增加到容器的時候。在這個階段，組件在父類容器的子條目集合中，當調用超類的這個方法之后，容器就是被展現，如果有引用，引用也會被設置。 onRemoved:被移除的時候的事件。這時候，組件以及從父容器之中移除了，但是還沒有銷毀。調用超類的這個方法之后，容器就不會被展現了。 onResize:大小變化的時候的調用事件 onPosition:位置變化的時候調用的事件 onDestroy:銷毀的時候的事件 beforeDestroy:銷毀之前 afterSetPosiotion:設置位置之后 afterComponentLayout:組件布局之后 beforeComponentLayout:組件布局之前 ### 我們該擴展哪個類 選擇一個最好的繼承類是一個效率的問題，功能基類必須要提供的。有一種趨勢就是總是繼承Ext.panel.Panel當你設置UI組件的時候，這些組件需要被渲染和管理的時候。 Panel類有如下能力： Boder Header Header Tools Footer Footer Buttons? Top toolbar Buttom toolbar Containig and managing child Components 如果這些不需要，那么使用Panel類就是一種資源浪費。 ### 組件 如果需要的組件UI不需要包含其他組件，那就是，如果只是封裝HTML執行某種形式的需求，那么擴展Ext.Component是合適的。舉例來說，下面這個類是一個組件包裝了HTML的圖片元素，允許通過圖片的src屬性來設置和獲取。在加載的時候也會有方法被觸發。 ~~~ Ext.define('Ext.ux.Image', { extend: 'Ext.Component', // subclass Ext.Component alias: 'widget.managedimage', // this component will have an xtype of 'managedimage' autoEl: { tag: 'img', src: Ext.BLANK_IMAGE_URL, cls: 'my-managed-image' }, // Add custom processing to the onRender phase. // Add a 'load' listener to the element. onRender: function() { this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl); this.callParent(arguments); this.el.on('load', this.onLoad, this); }, onLoad: function() { this.fireEvent('load', this); }, setSrc: function(src) { if (this.rendered) { this.el.dom.src = src; } else { this.src = src; } }, getSrc: function(src) { return this.el.dom.src || this.src; } }); ~~~ 使用如下： ~~~ var image = Ext.create('Ext.ux.Image'); Ext.create('Ext.panel.Panel', { title: 'Image Panel', height: 200, renderTo: Ext.getBody(), items: [ image ] }); image.on('load', function() { console.log('image loaded: ', image.getSrc()); }); image.setSrc('http://www.sencha.com/img/sencha-large.png'); ~~~ 這只是一個例子給展示而已，你想使用的話，應該結合實際應用程序來設計。 ### Container容器 如果組件包含其他組件，那么就選容器比較適合了。在面板級別，需要重點記憶的是，Ext.layout.container.Container不是用來被渲染和管理子組件的。 容器擁有下面這些方法： onBeforeAdd:子組件增加的時候這個方法被調用。通過了新組件,可以用來修改組件,或準備容器。返回false中止添加操作。 onAdd:組件被增加完成的時候調用。它是通過組件已被添加。這種方法可以用于更新任何內部結構可能依賴于狀態的子元素。 onRemove:它是通過組件已被添加。這種方法可以用于更新任何內部結構可能依賴于狀態的子元素。 beiforeLayout:這個方法被調用之前容器已經制定了(如果需要)并呈現它的子組件。 afterLayout:調用該方法后,集裝箱已經制定了(如果需要)并呈現它的子組件。 ### Panel面板 如果UI界面需要頭信息，底部信息，工具條，那么Ext.panel.Panel就是一個合適的選擇。 重要的是:一個面板是一個容器。重要的是要記住,布局是用于呈現和管理子組件。 這類擴展Ext.panel。面板通常非常特定于應用程序的,一般用于聚合其他UI組件(通常是容器,或表單字段)配置布局,并提供操作手段所包含的組件通過控制tbar bbar。 面板擁有如下的模板方法： afterCollapse:當折疊的時候被調用 afterExpand:當展開的時候被調用 onDockedAdd:當停靠的時候調用 ondockedRemove當停靠移除的時候調用。