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判断元素的子元素是否存在的示例代码
Feb 04 Javascript
js 判断图片是否加载完以及实现图片的预下载
Aug 14 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
基于jQuery实现选取月份插件附源码下载
Dec 28 Javascript
简单的jQuery banner图片轮播实例代码
Mar 04 Javascript
卸载安装Node.js与npm过程详解
Aug 15 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
d3.js实现立体柱图的方法详解
Apr 28 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
JavaScript实现微信号随机切换代码
Mar 09 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
Nov 22 Javascript
微信小程序在其他页面监听globalData中值的变化
Jul 15 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
Win9x/ME下Apache+PHP安装配置
2006/10/09 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
Win下如何安装PHP的APC拓展
2013/08/07 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
php微信开发之批量生成带参数的二维码
2016/06/26 PHP
PHP实现的登录页面信息提示功能示例
2017/07/24 PHP
php 数据结构之链表队列
2017/10/17 PHP
PHP性能分析工具xhprof的安装使用与注意事项
2017/12/19 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
Laravel框架基于ajax和layer.js实现无刷新删除功能示例
2019/01/17 PHP
jquery选择器使用详解
2014/04/08 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
JS数组的常见用法实例
2015/02/10 Javascript
jQuery实现ctrl+enter(回车)提交表单
2015/10/19 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
浅谈vue实现数据监听的函数 Object.defineProperty
2017/06/08 Javascript
vue项目tween方法实现返回顶部的示例代码
2018/03/02 Javascript
Python装饰器用法实例总结
2018/02/07 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
对DataFrame数据中的重复行,利用groupby累加合并的方法详解
2019/01/30 Python
python关闭占用端口方式
2019/12/17 Python
运行python提示no module named sklearn的解决方法
2020/11/29 Python
html5配合css3实现带提示文字的输入框(摆脱js)
2013/03/08 HTML / CSS
银行竞聘演讲稿范文
2014/04/23 职场文书
歌唱比赛策划方案
2014/06/06 职场文书
小学生我的梦想演讲稿
2014/08/21 职场文书
责任书范本
2014/08/25 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
小学少先队辅导员述职报告
2015/01/10 职场文书
搞笑老公保证书
2015/02/26 职场文书
2015年项目经理工作总结
2015/04/30 职场文书
单位政审意见范文
2015/06/04 职场文书
解析:创业计划书和商业计划书二者之间到底有什么区别
2019/08/14 职场文书
浅谈redis缓存在项目中的使用
2021/05/20 Redis
win11高清晰音频管理器在哪里?win11找不到高清晰音频管理器解决办法
2022/04/08 数码科技