Extjs4 類的定義和擴充執行個體

來源:互聯網
上載者:User

一般定義方式,注意方法和函數的添加方式不同。(添加函數只能用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

重載的另一種寫法 複製代碼 代碼如下: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();
}
}
});

例子2: 複製代碼 代碼如下: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:{//統一設定表單欄位預設屬性
//autoFitErrors : false,//展示錯誤資訊時是否自動調整欄位組件寬度
labelSeparator :':',//分隔字元
labelWidth : 60,//標籤寬度
//width : 150,//欄位寬度
allowBlank : false,//是否允許為空白
//blankText : '不允許為空白', //若設定不為空白,為空白時的提示
labelAlign : 'right',//標籤對齊
msgTarget :'qtip' //顯示一個浮動的提示資訊
//msgTarget :'title' //顯示一個瀏覽器原始的浮動提示資訊
//msgTarget :'under' //在欄位下方顯示一個提示資訊
//msgTarget :'side' //在欄位的右邊顯示一個提示資訊
//msgTarget :'none' //不顯示提示資訊
//msgTarget :'errorMsg' //在errorMsg元素內顯示提示資訊
},
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 = ''; //可以定義屬性 obj.PoType 使用
var TmpHeadRec = Ext.create('PO_HeadData');

Ext.apply(this, {
buttons: [{
text: '儲存',
handler:function(){
if (me.getForm().isValid()) { //判斷提交的資料是否符合Regex
//儲存功能
}
}
}, {
text: '取消',
handler: function () {
me.ownerCt.hide();
}
}],
SetFormValue:function(){ //自訂方法 obj.SetFormValue() 方式調用
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);
}
});

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.