ExtJS 組件的擴展和繼承

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 的屬性所覆蓋。


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章