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 相关文章推荐
用js实现的一个Flash滚动轮换显示图片代码生成器
Mar 14 Javascript
用最通俗易懂的代码帮助新手理解javascript闭包 推荐
Mar 01 Javascript
基于jQuery的图片左右无缝滚动插件
May 23 Javascript
jQuery验证插件 Validate详解
Nov 20 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
基于bootstrap的选择框插件icheck
Dec 23 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
element-ui 远程搜索组件el-select在项目中组件化的实现代码
Dec 04 Javascript
vue+elementUI组件table实现前端分页功能
Nov 15 Javascript
基于JavaScript实现大文件上传后端代码实例
Aug 18 Javascript
基于JavaScript实现简单的轮播图
Mar 03 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提示undefined index的几种解决方法
2012/05/21 PHP
Laravel如何使用Redis共享Session
2018/02/23 PHP
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
IE中jquery.form中ajax提交没反应解决方法分享
2012/09/11 Javascript
引用外部js乱码问题分析及解决方案
2013/04/12 Javascript
javascript 动态创建表格
2015/01/08 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
Bootstrap面板学习使用
2017/02/09 Javascript
实例解析Vue.js下载方式及基本概念
2018/05/11 Javascript
浅析Vue 生命周期
2018/06/21 Javascript
vue 录制视频并压缩视频文件的方法
2018/07/27 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
2020/11/11 Javascript
Django imgareaselect手动剪切头像实现方法
2015/05/26 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
python配置grpc环境
2019/01/01 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
python+gdal+遥感图像拼接(mosaic)的实例
2020/03/10 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
python实现手势识别的示例(入门)
2020/04/15 Python
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
香港家用健身器材、运动器材及健康美容仪器专门店:FitBoxx
2019/12/05 全球购物
什么是数组名
2012/05/10 面试题
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
应届生学校辅导员求职信
2013/11/07 职场文书
查环查孕证明
2014/01/10 职场文书
初中化学教学反思
2014/01/23 职场文书
教育科研先进个人材料
2014/01/26 职场文书
社团活动总结范文
2014/04/26 职场文书
部队2015年终工作总结
2015/04/02 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
Redis如何实现验证码发送 以及限制每日发送次数
2022/04/18 Redis