ExtJS 組件的擴展和繼承
ExtJS 的組件很豐富,可有時候還是滿足不了需求,需要擴展 ExtJS 的組件實現自制組件。
擴展組件的時候,最好給其設置單獨的 xtype, 這樣就能比較容易的和其他組件集成。
雖說擴展 ExtJS 的組件只不過是用 Ext.extend() 來實現,多少還是有些竅門。
例: 擴展 Ext.Panel,得到名爲 MyComponent 的組件。 xtype 設置爲 mycomponent。
MyComponent = Ext.extend(Ext.Panel, {
initComponent: function(){
Ext.apply(this, {
_name: 'MyComponent' // 非必須,調試時用 console.log 等可顯示對象名。
});
this.items = [{
// 如有固定的 items,須在此設定
}];
MyComponent.superclass.initComponent.call(this);
}
});
// 註冊 xtype, 此後、只需指定屬性 xtype: 'mycomponent' 即可實現組件的延遲渲染。
Ext.reg('mycomponent', MyComponent);
代碼解釋:
1.initComponent 函數
組件初始化時執行的函數。不過,這和 new 的時候所執行的 Contructor 有所不同。實際上,從 Component 的 Contructor 到 initComponent 的執行,有一個過程。一些有影響的參數,須在 initComponnt 中設定。
- 有關 Layout 的設置,必須在 initComponent 中實行。
- collapsible 須通過對象屬性來設定。如:
items:[{
xtype: 'mycomponent',
collapsible: true
}]
2.Ext.reg
調用方法: Ext.reg(xtype字符串, 對象) 。在任意組件中、加入以上 MyComponent 的時候、用 xtype 的方法指定,就能實現遲延渲染。
3.initComponent 內部的 this,是以上 MyComponent 的接口。
4.new MyComponent(config) 生成實例之後、initComponent 內部的 this 通過 apply 追加了屬性。
5.Ext.apply(object1,object2)
這是把 object2 合併到 object1。通過這個函數,object2 所持有的屬性和方法,全被追加到object1。 同名屬性將會被 object2 的屬性所覆蓋。