Extjs4 类的定义和扩展实例

 更新时间:2013年06月28日 16:42:15   作者:  
一般定义方式注意方法和函数的添加方式不同,具体定义步骤如下,感兴趣的朋友可以参考下哈,感兴趣的朋友可以了解下哈
(福利推荐:【腾讯云】服务器最新限时优惠活动,云服务器1核2G仅99元/年、2核4G仅768元/3年,立即抢购>>>:9i0i.cn/qcloud

(福利推荐:你还在原价购买阿里云服务器?现在阿里云0.8折限时抢购活动来啦!4核8G企业云服务器仅2998元/3年,立即抢购>>>:9i0i.cn/aliyun

一般定义方式,注意方法和函数的添加方式不同。(添加函数只能用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()) { //判断提交的数据是否符合正则表达式
//保存功能
}
}
}, {
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);
}
});

相关文章

最新评论

?


http://www.vxiaotou.com