首先,我们了解一下 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);
}
});

