Pages

搜尋此網誌

2013年12月25日 星期三

extjs mixins(混和) 特性說明

extjs mixins(混和) 特性說明

extjs4 中的 mixsins 是 extjs4 的新特性,在筆者之前寫過的文章中extjs 4 系列 1/5:新特性與基本概念 mixins (混合複數classes) 章節,有做過簡單介紹,讀者可以參考相關說明,了解 mixsins 的特性,官方 API 可參考連結:mixins API,在 extjs 中屬於 Ext.Class 的函式,也就等於所有不管 mvc 或是元件,都可以使用 mixins 的特性。

接著,想要知道 mixins 在不同狀況下的處理方式可參考 Ext JS 4 First Look 中文翻譯 mixins 章節,在使用上就必須要注意什麼情況下函式或屬性在捨麼情況下會被保留,什麼會被覆蓋。

舉個例子,假設我們有兩個 controller 分別如下:

共用元件之 controller:

Ext.define('foodprint.controller.StdController', {
    extend: 'Ext.app.Controller',

    views: [
        'StdEditorToolbar'
    ],

    refs: [
        {
            ref: 'stdEditorToolbar',
            selector: 'stdeditortoolbar'
        }
    ],

    initial: function(tbar) {
        ...
    },

    onCreateBtnClick: function(btn) {
     ... 
    }

});

另一個別功能之 controller:

Ext.define('foodprint.controller.AController', {
    extend: 'Ext.app.Controller',

    mixins: {
        StdEditorToolbarCtrl: 'foodprint.controller.StdController'
    },

    views: [
        'BatchEditor'
    ],

    refs: [
        {
            ref: 'batchGrid',
            selector: 'batchgrid'
        }
    ],

    init: function(application) {
        ...
    },

    readBatch: function(obj, record, item, index, e, eOpts) {
        ...
    },


});

在上述的使用情境中,StdController 中的 refs 將會失效,保留 AController 中的 refs,因此在這樣狀況下,若要在 AController 也要能夠有 StdController 中 refs 定義的元件,勢必要在 AController 再次定義一次 StdController 的 refs。

另一種使用情境:假設被 mixins 的類別跟基礎類別有同名的函式,但是我們希望兩個個別實作同名函式都可以被執行可以參考 mixins API的範例:


Ext.define('CanSing', {
     sing: function() {
         alert("I'm on the highway to hell...")
     }
});

Ext.define('Musician', {
     mixins: {
         canSing: 'CanSing'
     },

     sing: function() {
         // delegate singing operation to mixin
         this.mixins.canSing.sing.call(this);
     }
})

希望透過本篇可以讓讀者了解 mixins 的特性,進而有效的重覆利用函式,減少不必要的重覆程式碼。

張貼留言