ExtJS4类的定义与扩展实例全面解析

首先，我们了解一下 Ext JS 4 中类的常规定义方法。需要特别留意：方法（method）与函数（function）的添加方式有所不同。为什么函数只能通过 override 方式来添加？我也没有完全弄清楚，如果你知道其中原因，欢迎赐教。

先声明一个类，并为其定义一个方法：

Ext.define('Simple.Class',{
    welcome:function(){
        alert('Welcome to the app');
    }
});

若想为已有类增加新方法，则可借助 Ext.override 进行重载：

Ext.override(Simle.Class,{
    goodBye:function(){
        alert('Goodbye');
    },
    funAll:function(){
        this.welcome();
        this.goodBye();
    }
});

接下来实例化该类对象，并调用新增方法：

var app = new Simple.Class();
app.runAll(); //Welcome to the app Goodbye

此外，还有一种更简洁的扩展写法：直接在类上调用 override 方法：

Simple.Class.override({
    // New members...
});

下面通过一个实际案例来演示。定义一个按钮类，并对其进行扩展：

Ext.define('MyButton',{
    extend:'Ext.Action',
    initComponent: function(){
        var me = this;
        var initEnable = true; //初始权限
    }
});
Ext.override(MyButton,{
    mysetenable:function(b){ //增加自定义函数设置按钮权限
        if ( this.initEnable ) {
            if (b){
                this.enable();
            }
            else{
                this.disable();
            }
        }
        else{
            this.disable();
        }
    }
});

再看一个示例，这次定义一个表单面板（Form Panel），并在其 initComponent 方法中动态添加按钮与对应逻辑：

Ext.define('PO_Head_Add_Panel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.PO_Head_Add_Panel',
    //height:400,
    //width:600,
    frame: true,
    layout: 'anchor', //该form分为两列
    bodyPadding: 5, //偏移5px
    //baseCls: "x-plain", //指定使用系统背景色
    //defaults: { anchor: "95%", msgTarget: "side" },
    // anchor: '100%',
    defaults:{
        labelSeparator :'：',
        labelWidth : 60,
        allowBlank : false,
        labelAlign : 'right',
        msgTarget :'qtip'
    },
    items:[{
        xtype:'combobox',
        name: 'ToAddress',
        labelWidth:70,
        width:600,
        queryMode: 'local',
        store:TmpAddressStore,
        displayField: 'AddrName',
        valueField: 'AddrName',
        editable : false,
        forceSelection : true,
        msgTarget: 'side',
        allowBlank: false,
        fieldLabel: '送货地址'
    },{
        xtype:'textfield',
        name: 'HRemark',
        labelWidth:70,
        width:600,
        msgTarget: 'side',
        allowBlank: false,
        fieldLabel: '备注'
    }],
    initComponent: function(){
        var me = this;
        var PoType = '';
        var TmpHeadRec = Ext.create('PO_HeadData');

        Ext.apply(this, {
            buttons: [{
                text: '保存',
                handler:function(){
                    if (me.getForm().isValid()) {
                        //保存功能
                    }
                }
            }, {
                text: '取消',
                handler: function () {
                    me.ownerCt.hide();
                }
            }],
            SetFormValue:function(){
                me.TmpHeadRec = HeadStore.getAt(0);
                me.getForm().findField('POType').setValue(me.TmpHeadRec.get('POType'));
                me.getForm().findField('PONum').setValue(me.TmpHeadRec.get('PONum'));
            }
        });

        this.callParent(arguments);
    }
});