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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
JQuery 操作Javascript对象和数组的工具函数小结
Jan 22 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
深入理解Javascript中的作用域链和闭包
Apr 25 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
Node.js学习之地址解析模块URL的使用详解
Sep 28 Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
JavaScript实现简单计算器功能
Dec 19 Javascript
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
详解使用mocha对webpack打包的项目进行"冒烟测试"的大致流程
Apr 27 Javascript
关于Js中new操作符的作用详解
Feb 21 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
PHP响应post请求上传文件的方法
2015/12/17 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
JavaScript 学习笔记之数据类型
2015/01/14 Javascript
Linux下编译安装php libevent扩展实例
2015/02/14 Javascript
深入理解JavaScript系列(26):设计模式之构造函数模式详解
2015/03/03 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
概述javascript在Google IE中的调试技巧
2016/11/24 Javascript
Bootstrap table使用方法详细介绍
2016/12/09 Javascript
基于jQuery实现弹幕APP
2017/02/10 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
js实现下一页页码效果
2017/03/07 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
React BootStrap用户体验框架快速上手
2018/03/06 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
2019/03/14 Javascript
js获取对象,数组所有属性键值(key)和对应值(value)的方法示例
2019/06/19 Javascript
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
Python实现根据指定端口探测服务器/模块部署的方法
2014/08/25 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
tensorflow 恢复指定层与不同层指定不同学习率的方法
2018/07/26 Python
Python文件读写保存操作的示例代码
2018/09/14 Python
对Python中的条件判断、循环以及循环的终止方法详解
2019/02/08 Python
Python使用paramiko操作linux的方法讲解
2019/02/25 Python
python与mysql数据库交互的实现
2020/01/06 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
哄娃神器4moms商店:美国婴童用品品牌
2019/03/07 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
保证书范文大全
2014/04/28 职场文书
网站推广策划方案
2014/06/04 职场文书
普通党员群众路线教育实践活动心得体会
2014/11/04 职场文书
收入证明范本
2015/06/12 职场文书
庆祝教师节新闻稿
2015/07/17 职场文书
手把手教你怎么用Python实现zip文件密码的破解
2021/05/27 Python
OpenCV实现普通阈值
2021/11/17 Java/Android