Extjs4 類(lèi)的定義和擴(kuò)展實(shí)例

更新時(shí)間：2013年06月28日 16:42:15 作者：

一般定義方式注意方法和函數(shù)的添加方式不同，具體定義步驟如下，感興趣的朋友可以參考下哈，感興趣的朋友可以了解下哈

一般定義方式，注意方法和函數(shù)的添加方式不同。（添加函數(shù)只能用override方式添加不知為什么，有知道的，請(qǐng)搞之。）
定義一個(gè)類(lèi)，并給他一個(gè)方法

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

使用Ext.override方法對(duì)已有類(lèi)進(jìn)行重載并添加函數(shù)

復(fù)制代碼代碼如下:

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

實(shí)例化類(lèi)對(duì)象，并調(diào)用新的方法

復(fù)制代碼代碼如下:

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

重載的另一種寫(xiě)法

復(fù)制代碼代碼如下:

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

實(shí)際例子：

復(fù)制代碼代碼如下:

 
Ext.define('MyButton',{ 
extend:'Ext.Action', 
initComponent: function(){ 
var me = this; 
var initEnable = true; //初始權(quán)限 
} 
}); 
Ext.override(MyButton,{ 
mysetenable:function(b){ //增加自定義函數(shù)設(shè)置按鈕權(quán)限 
if ( this.initEnable ) { 
if (b){ 
this.enable(); 
} 
else{ 
this.disable(); 
} 
} 
else{ 
this.disable(); 
} 
} 
}); 

例子2：

復(fù)制代碼代碼如下:

 
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", //指定使用系統(tǒng)背景色 
//defaults: { anchor: "95%", msgTarget: "side" }, 
// anchor: '100%', 
defaults:{//統(tǒng)一設(shè)置表單字段默認(rèn)屬性 
//autoFitErrors : false,//展示錯(cuò)誤信息時(shí)是否自動(dòng)調(diào)整字段組件寬度 
labelSeparator :'：',//分隔符 
labelWidth : 60,//標(biāo)簽寬度 
//width : 150,//字段寬度 
allowBlank : false,//是否允許為空 
//blankText : '不允許為空', //若設(shè)置不為空，為空時(shí)的提示 
labelAlign : 'right',//標(biāo)簽對(duì)齊方式 
msgTarget :'qtip' //顯示一個(gè)浮動(dòng)的提示信息 
//msgTarget :'title' //顯示一個(gè)瀏覽器原始的浮動(dòng)提示信息 
//msgTarget :'under' //在字段下方顯示一個(gè)提示信息 
//msgTarget :'side' //在字段的右邊顯示一個(gè)提示信息 
//msgTarget :'none' //不顯示提示信息 
//msgTarget :'errorMsg' //在errorMsg元素內(nèi)顯示提示信息 
}, 
items:[{ 
xtype:'combobox', 
name: 'ToAddress', 
labelWidth:70, 
width:600, 
queryMode: 'local', 
store:TmpAddressStore, 
displayField: 'AddrName', 
valueField: 'AddrName', 
editable : false,// 是否允許輸入 
forceSelection : true,// 必須選擇一個(gè)選項(xiàng) 
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 = ''; //可以定義屬性 obj.PoType 使用 
var TmpHeadRec = Ext.create('PO_HeadData'); 

Ext.apply(this, { 
buttons: [{ 
text: '保存', 
handler:function(){ 
if (me.getForm().isValid()) { //判斷提交的數(shù)據(jù)是否符合正則表達(dá)式 
//保存功能 
} 
} 
}, { 
text: '取消', 
handler: function () { 
me.ownerCt.hide(); 
} 
}], 
SetFormValue:function(){ //自定義方法 obj.SetFormValue() 方式調(diào)用 
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); 
} 
}); 