Extjs4 類的定義和擴(kuò)展實(shí)例
一般定義方式,注意方法和函數(shù)的添加方式不同。(添加函數(shù)只能用override方式添加不知為什么,有知道的,請(qǐng)搞之。)
定義一個(gè)類,并給他一個(gè)方法
Ext.define('Simple.Class',{
welcome:function(){
alert('Welcome to the app');
}
});
使用Ext.override方法對(duì)已有類進(jìn)行重載并添加函數(shù)
Ext.override(Simle.Class,{
goodBye:function(){
alert('Goodbye');
},
funAll:function(){
this.welcome();
this.goodBye();
}
});
實(shí)例化類對(duì)象,并調(diào)用新的方法
var app = new Simple.Class();
app.runAll(); //Welcome to the app Goodbye
重載的另一種寫法
Simple.Class.override({
// New members...
});
實(shí)際例子:
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:
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);
}
});
- Extjs4 Treegrid 使用心得分享(經(jīng)驗(yàn)篇)
- Extjs4實(shí)現(xiàn)兩個(gè)GridPanel之間數(shù)據(jù)拖拽功能具體方法
- ExtJS4中的requires使用方法示例介紹
- ExtJS4中使用mixins實(shí)現(xiàn)多繼承示例
- extjs4 treepanel動(dòng)態(tài)改變行高度示例
- ExtJS4 動(dòng)態(tài)生成的grid導(dǎo)出為excel示例
- ExtJS4給Combobox設(shè)置列表中的默認(rèn)值示例
- javascript中JSON對(duì)象與JSON字符串相互轉(zhuǎn)換實(shí)例
- 淺談JSON.parse()和JSON.stringify()
- Extjs4如何處理后臺(tái)json數(shù)據(jù)中日期和時(shí)間
相關(guān)文章
Ext JS框架中日期函數(shù)的用法及日期選擇控件的實(shí)現(xiàn)
Ext JS中的Ext.Date可以看作是JavaScript中date的加強(qiáng)版,提供了許多進(jìn)階的日期操作函數(shù),下面我們就來看一下Ext JS框架中日期函數(shù)的用法及日期選擇控件的實(shí)現(xiàn)2016-05-05ExtJS 2.0實(shí)用簡(jiǎn)明教程之應(yīng)用ExtJS
應(yīng)用extjs需要在頁面中引入extjs的樣式及extjs庫文件2009-04-04extjs 學(xué)習(xí)筆記(二) Ext.Element類
上個(gè)系列中,我們用到了Ext.fly來獲得一個(gè)Element對(duì)象,其實(shí)Ext.fly是Ext.Element.fly的簡(jiǎn)寫形式。類似的方法還有一個(gè)Ext.get,是Ext.Element.get的簡(jiǎn)寫。這兩個(gè)方法都可以用使用Dom元素或者Dom元素的id作為參數(shù)來獲得一個(gè)Element對(duì)象。2009-10-10ComboBox 和 DateField 在IE下消失的解決方法
開發(fā)過程中卻遇到了在 IE 瀏覽器中放大、縮小窗口大小會(huì)導(dǎo)致這兩個(gè)組件消失不見不報(bào)任何錯(cuò)誤且在其他瀏覽器正常,通過本文你將學(xué)會(huì)如何解決此問題2013-08-08Extjs4 Treegrid 使用心得分享(經(jīng)驗(yàn)篇)
最近調(diào)試EXTJS 4的treegrid實(shí)例,看了很多水友的文章,以及官方的demo,沒一個(gè)可靠的,于是乎自己折騰中...感興趣的朋友可以了解下本文或許對(duì)你有所幫助2013-07-07extjs_02_grid顯示本地?cái)?shù)據(jù)、顯示跨域數(shù)據(jù)
這篇文章主要介紹了extjs_02_grid顯示本地?cái)?shù)據(jù)、顯示跨域數(shù)據(jù)的具體實(shí)現(xiàn),需要的朋友可以參考下2014-06-06Extjs優(yōu)化(一)刪除冗余代碼提高運(yùn)行速度
Extjs 本身是一個(gè)加載慢的JS框架,這次來寫寫怎么減少冗余代碼,也是提高運(yùn)行速度,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04