Ext 4.1 Ext.define寫法

本文主要介紹Ext.define的寫法，包括類的定義，控件的自定義，構造函數的使用，還有靜態函數的定義，需要一定的使用Ext的經驗。

Ext.define主要用於定義或者重寫一個類，在Ext中一個基本的類可以這樣寫：

Ext.define('AClassDefine.Class', //定義類名
{
name: 'a Property', //一個屬性
title: 'other Property', //另外一個屬性
fnShowMsg: function () {
    var me = this;    //定義一個變量存本身的this，以防其他地方調用作用域改變，照成this的混亂
    alert(me.name + me.title);
}
});

Ext.onReady(function () {
//    var obj = new AClassDefine.Class(); //創建類
    var obj = Ext.create('AClassDefine.Class'); //使用create的方法創建類
    obj.fnShowMsg(); //調用類的方法
});

 

Ext.define( String className, Object data, Function createdFn ) : Ext.Base

define繼承Ext.Base,主要有3個參數

第一個參數是類名，

第二個參數是配置，

第三個參數是創建結束后的回調函數。

 

在實際的項目應用當中，為了保證網站整體的風格，必須要定一些公用的組件，比如說按鈕大小固定，相應功能的按鈕的圖標要一致等等，下面是定一個公用的添加按鈕的代碼：

Ext.define("Custom.AddBigButton", {
    extend: "Ext.Button",
    stateful: false,
    minWidth: 50,
    text: "新增",
    icon: "new.png",
    iconAlign: 'top',
    scale: 'medium'
});
Ext.define("Custom.AddSmallButton", {
    extend: "Ext.Button",
    stateful: false,
    minWidth: 75,
    text: "新增",
    icon: "new_min.png",
    iconAlign: 'left',
    scale: 'small'
});

Ext.onReady(function () {
    Ext.create('Custom.AddSmallButton', { renderTo: Ext.getBody() });
});

效果如圖：

 

 

有時候我們會在類的構造函數當中去配置類的屬性，比如說一個公用窗口的title大小等等這些屬性，下面的代碼定義了一個公用的窗口，窗口里面有底部有2個按鈕，中間有一個grid，我定義的時候在構造函數當中去創建他們：

Ext.define("Custom.editWindow", {
    extend: "Ext.window.Window",
    layout: "fit",
    width: 500,
    height: 400,
    frame: false,
    constrain: true,
    modal: true,
    autoScroll: false,
    resizable: false,
    closeAction: "hide",
    buttonAlign: "center",
    initComponent: function () {//構造函數
        var me = this;
        var btnSave = Ext.create('Ext.Button', { text: '保存' });
        var btnClose = Ext.create('Ext.Button', { text: '關閉' }); //創建2個按鈕

        me.buttons = [btnSave, btnClose]; //添加到窗體的buttons中

        var listStore = Ext.create('Ext.data.Store', {//創建一個store
            fields: ['name', 'email', 'phone'],
            data: { 'items': [
                { 'name': 'Lisa', "email": "[e-mail]", "phone": "555-111-1224" },
                { 'name': 'Bart', "email": "[e-mail]", "phone": "555-222-1234" },
                { 'name': 'Homer', "email": "[e-mail]", "phone": "555-222-1244" },
                { 'name': 'Marge', "email": "[e-mail]", "phone": "555-222-1254" }
            ]
            },
            proxy: {
                type: 'memory',
                reader: {
                    type: 'json',
                    root: 'items'
                }
            }
        });
        var grid = Ext.create('Ext.grid.Panel', {//創建一個grid
            store: listStore,
            columns: [{ header: 'Name', dataIndex: 'name' },
                        { header: 'Email', dataIndex: 'email', flex: 1 },
                        { header: 'Phone', dataIndex: 'phone'}],
            height: 200,
            width: 400
        });

        me.items = [grid]; //將grid添加窗體的items中

        btnClose.on("click", function () { me.hideMe(); }); //關閉按鈕綁定后面定義的hideme函數

        me.superclass.initComponent.call(me); //調用父類的構造函數
    },
    hideMe: function () {
        var me = this;
        me.hide();
    }
});
Ext.onReady(function () {
    //    Ext.create('Custom.editWindow').show();

    Ext.create('Custom.editWindow', { title: '我是標題' }).show(); //創建並設置屬性
});

 效果如圖：

在實際應用當中我們還會遇到另外一類的情況，公用而且經常調用的函數，而在C#等語言當中，我們會把他設置成靜態函數，靜態函數不用去實例化，就可以直接調用底下下的方法，在Ext.define中一樣可以定義靜態函數。在這里，我定義了一個名叫Jshelper的靜態類，下面有個靜態函數alert，代碼如下：

Ext.define("JsHelper", {
    statics: {//標識這里面的是靜態函數
        alert: function (title, content) {
            Ext.Msg.alert(content, content);
        }
    }
});
Ext.onReady(function () {

    JsHelper.alert("我是標題","我是內容");//直接通過名稱調用
});

效果如圖：

最后是源代碼，不包含Extjs的包，要看效果自己去下載Extjs 點我下載源碼