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 统计时间
Mar 09 Javascript
关于include标签导致js路径找不到的问题分析及解决
Jul 09 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
百度地图自定义控件分享
Mar 04 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
Jul 03 Javascript
前端主流框架vue学习笔记第二篇
Jul 26 Javascript
vue.js  父向子组件传参的实例代码
Oct 29 Javascript
原生JS实现循环Nodelist Dom列表的4种方式示例
Feb 11 Javascript
了不起的11个JavaScript代码重构最佳实践小结
Jan 11 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蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
php在数据库抽象层简单使用PDO的方法
2015/11/03 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
总结PHP中DateTime的常用方法
2016/08/11 PHP
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
基于jQuery的获取标签名的代码
2012/07/16 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
Angular.js如何从PHP读取后台数据
2016/03/24 Javascript
原生js仿淘宝网商品放大镜效果
2017/02/28 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
jQuery Validate表单验证插件实现代码
2017/06/08 jQuery
BootStrap Fileinput上传插件使用实例代码
2017/07/28 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
JavaScript面向对象精要(下部)
2017/09/12 Javascript
vue 插值 v-once,v-text, v-html详解
2018/01/19 Javascript
对angular 实时更新模板视图的方法$apply详解
2018/10/09 Javascript
浅谈webpack性能榨汁机(打包速度优化)
2019/01/09 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
简单谈谈Python中的闭包
2016/11/30 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
python中 * 的用法详解
2019/07/10 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
python中执行smtplib失败的处理方法
2020/07/01 Python
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
斐乐美国官方网站:FILA美国
2019/03/01 全球购物
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
vue使用element-ui按需引入
2022/05/20 Vue.js
Win11 vmware不兼容怎么办?Win11与VMware虚拟机不兼容的解决方法
2023/01/09 数码科技