Extjs4 类的定义和扩展实例


Posted in Javascript onJune 28, 2013

一般定义方式,注意方法和函数的添加方式不同。(添加函数只能用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 相关文章推荐
常用的jQuery前端技巧收集
Dec 24 Javascript
解决WordPress使用CDN后博文无法评论的错误
Dec 15 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
jQuery实现动态删除LI的方法
May 30 jQuery
关于Vue实现组件信息的缓存问题
Aug 23 Javascript
分析JS中this引发的bug
Dec 12 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
详解json串反转义(消除反斜杠)
Aug 12 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
JavaScript和CSS通过expression实现Table居中显示
Jun 28 #Javascript
jquery异步跨域访问代码
Jun 28 #Javascript
基于SVG的web页面图形绘制API介绍及编程演示
Jun 28 #Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 #Javascript
jquery中通过父级查找进行定位示例
Jun 28 #Javascript
javascript实现文字图片上下滚动的具体实例
Jun 28 #Javascript
JavaScript操纵窗口的方法小结
Jun 28 #Javascript
You might like
phplot生成图片类用法详解
2015/01/06 PHP
修改WordPress中文章编辑器的样式的方法详解
2015/12/15 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
前端开发的开始---基于面向对象的Ajax类
2010/09/17 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
Javascript单元测试框架QUnitjs详细介绍
2014/05/08 Javascript
JS制作简单的三级联动
2015/03/18 Javascript
jquery实现可自动判断位置的弹出层效果代码
2015/10/12 Javascript
Bootstrap每天必学之导航条
2015/11/27 Javascript
jquery对复选框(checkbox)的操作汇总
2016/01/13 Javascript
轻松实现javascript图片轮播特效
2016/01/13 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
2016/04/17 Javascript
JS生成某个范围的随机数【四种情况详解】
2016/04/20 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
Python简单获取网卡名称及其IP地址的方法【基于psutil模块】
2018/05/24 Python
判断python对象是否可调用的三种方式及其区别详解
2019/01/31 Python
Python中捕获键盘的方式详解
2019/03/28 Python
Python跳出多重循环的方法示例
2019/07/03 Python
基于python的itchat库实现微信聊天机器人(推荐)
2019/10/29 Python
Pandas+Matplotlib 箱式图异常值分析示例
2019/12/09 Python
python torch.utils.data.DataLoader使用方法
2020/04/02 Python
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
如何用PHP实现邮件发送
2012/12/26 面试题
网络方面基础面试题
2012/11/16 面试题
英文简历中的自我评价用语
2013/12/09 职场文书
致200米运动员广播稿
2014/02/06 职场文书
迎新春趣味活动方案
2014/08/24 职场文书
邓小平理论心得体会
2014/09/09 职场文书
杭白菊导游词
2015/02/10 职场文书
关爱留守儿童捐款倡议书
2015/04/27 职场文书
教师读书笔记
2015/06/29 职场文书
HTML页面滚动时部分内容位置固定不滚动的实现
2021/04/14 HTML / CSS
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS
苹果macOS 13开发者预览版Beta 8发布 正式版10月发布
2022/09/23 数码科技