Extjs4 类的定义和扩展实例
Extjs4 类的定义和扩展实例
发布时间:2016-12-30 来源:查字典编辑
摘要:一般定义方式,注意方法和函数的添加方式不同。(添加函数只能用override方式添加不知为什么,有知道的,请搞之。)定义一个类,并给他一个方...

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

}

});

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类