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 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
基于Jquery的淡入淡出的特效基础练习
Dec 13 Javascript
jquery ready函数、css函数及text()使用示例
Sep 27 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
javascript实现五星评分功能
Nov 10 Javascript
深入学习jQuery Validate表单验证
Jan 18 Javascript
Vue如何引入远程JS文件
Apr 20 Javascript
Angular 4.x 路由快速入门学习
May 03 Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 Javascript
微信小程序时间戳转日期的详解
Apr 30 Javascript
原生JS实现分页
Apr 19 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
人族 Terran 基本策略
2020/03/14 星际争霸
在Windows中安装Apache2和PHP4的权威指南
2006/10/09 PHP
用PHP进行MySQL删除记录操作代码
2008/06/07 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
php使用PDO获取结果集的方法
2017/02/16 PHP
php实现的统计字数函数定义与使用示例
2017/07/26 PHP
脚本合并提升javascript性能示例
2014/02/24 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
2016/12/07 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
实例讲解Vue.js中router传参
2018/04/22 Javascript
vue.js层叠轮播效果的实例代码
2018/11/08 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
vue+element导航栏高亮显示的解决方式
2019/11/12 Javascript
vant自定义二级菜单操作
2020/11/02 Javascript
[10:34]DOTA2上海特级锦标赛全纪录
2016/03/25 DOTA
[01:01:13]2018DOTA2亚洲邀请赛 4.5 淘汰赛 Mineski vs VG 第三场
2018/04/06 DOTA
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
解决python 无法加载downsample模型的问题
2018/10/25 Python
python实现维吉尼亚加密法
2019/03/20 Python
基于python分析你的上网行为 看看你平时上网都在干嘛
2019/08/13 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
The Athlete’s Foot新西兰:新西兰最大的运动鞋零售商
2019/12/23 全球购物
美国鲜花递送:UrbanStems
2021/01/04 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
司机的工作范围及职责
2013/11/13 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
护士求职信范文
2014/05/24 职场文书
群众路线领导干部个人对照检查材料(集锦)
2014/09/23 职场文书
考研英语辞职信
2015/05/13 职场文书