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 相关文章推荐
JavaScript 对话框和状态栏使用说明
Oct 25 Javascript
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
javascript正则表达式中参数g(全局)的作用
Nov 11 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
Apr 11 Javascript
js图片延迟技术一般的思路与示例
Mar 20 Javascript
jQuery遍历Table应用示例
Apr 09 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
详解JS模块导入导出
Dec 20 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
用vue写一个日历
Nov 02 Javascript
JavaScript 反射学习技巧
Oct 16 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
一条久听不愿放下的DIY森海MX500,三言两语话神奇
2021/03/02 无线电
phpBB BBcode处理的漏洞
2006/10/09 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
PHP实现留言板功能的详细代码
2017/03/25 PHP
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
vue 循环加载数据并获取第一条记录的方法
2018/09/26 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
微信小程序自定义底部弹出框动画
2020/11/18 Javascript
详解如何为eclipse安装合适版本的python插件pydev
2018/11/04 Python
解决python3中cv2读取中文路径的问题
2018/12/05 Python
python使用插值法画出平滑曲线
2018/12/15 Python
把pandas转换int型为str型的方法
2019/01/29 Python
django之状态保持-使用redis存储session的例子
2019/07/28 Python
pytorch实现线性拟合方式
2020/01/15 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
详解用python -m http.server搭一个简易的本地局域网
2020/09/24 Python
CSS3实现线性渐变用法示例代码详解
2020/08/07 HTML / CSS
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
德国大型箱包和皮具商店:Koffer
2019/10/01 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
小摄影师教学反思
2014/04/27 职场文书
环保倡议书100字
2014/05/15 职场文书
CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
2021/03/30 HTML / CSS
一文搞懂python异常处理、模块与包
2021/06/26 Python
python获取字符串中的email
2022/03/31 Python
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript