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实现回车键(Enter)切换文本框焦点的代码实例
May 05 Javascript
jQuery中size()方法用法实例
Dec 27 Javascript
jQuery实现的登录浮动框效果代码
Sep 26 Javascript
javascript常用函数(2)
Nov 05 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
node.js中module.exports与exports用法上的区别
Sep 02 Javascript
AngularJS表单基本操作
Jan 09 Javascript
使用JavaScriptCore实现OC和JS交互详解
Mar 28 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
Dec 06 Javascript
使用javascript做时间倒数读秒功能的实例
Jan 23 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 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类中的$this,static,final,const,self这几个关键字使用方法
2015/12/14 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
在js中使用"with"语句中跨frame的变量引用问题
2007/03/08 Javascript
JavaScript 匿名函数(anonymous function)与闭包(closure)
2011/10/04 Javascript
给超链接添加特效鼠标移动展示提示信息且随鼠标移动
2013/10/17 Javascript
js日期联动示例
2014/05/02 Javascript
jQuery xml字符串的解析、读取及查找方法
2016/03/01 Javascript
jQuery技巧之让任何组件都支持类似DOM的事件管理
2016/04/05 Javascript
浅析Bootstrap验证控件的使用
2016/06/23 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
2017/09/07 Javascript
微信小程序之数据缓存的实例详解
2017/09/29 Javascript
Koa项目搭建过程详细记录
2018/04/12 Javascript
js canvas实现写字动画效果
2018/11/30 Javascript
vue的$http的get请求要加上params操作
2020/11/12 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
java直接调用python脚本的例子
2014/02/16 Python
python基于pyDes库实现des加密的方法
2017/04/29 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python Tkinter的图片刷新实例
2019/06/14 Python
python3+PyQt5 自定义窗口部件--使用窗口部件样式表的方法
2019/06/26 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
pytorch torch.nn.AdaptiveAvgPool2d()自适应平均池化函数详解
2020/01/03 Python
Python Selenium安装及环境配置的实现
2020/03/17 Python
Bally巴利英国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/05/07 全球购物
如何提高SQL Server的安全性
2016/07/25 面试题
山海经纬软件测试笔试题和面试题
2013/04/02 面试题
工商管理实习自我鉴定
2013/09/28 职场文书
创先争优活动心得体会
2014/09/04 职场文书
Django实现drf搜索过滤和排序过滤
2021/06/21 Python
微信小程序scroll-view不能左右滑动问题的解决方法
2021/07/09 Javascript
Python实现打乒乓小游戏
2021/09/25 Python