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中的事件驱动
May 21 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
JS实现的论坛Ajax打分效果完整实例
Oct 31 Javascript
实现非常简单的js双向数据绑定
Nov 06 Javascript
JS模仿手机端九宫格登录功能实现代码
Apr 28 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
vue-resource请求实现http登录拦截或者路由拦截的方法
Jul 11 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
如何给element添加一个抽屉组件的方法步骤
Jul 14 Javascript
JavaScript enum枚举类型定义及使用方法
May 15 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
js打印纸函数代码(递归)
2010/06/18 Javascript
Javascript 面试题随笔
2011/03/31 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
可恶的ie8提示缺少id未定义
2014/03/20 Javascript
javascript实现节点(div)名称编辑
2014/12/17 Javascript
js实现继承的5种方式
2015/12/01 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
vue-axios使用详解
2017/05/10 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
uniapp实现横向滚动选择日期
2020/10/21 Javascript
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
用python爬取租房网站信息的代码
2018/12/14 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
使用pandas的box_plot去除异常值
2019/12/10 Python
Django中的session用法详解
2020/03/09 Python
python 批量下载bilibili视频的gui程序
2020/11/20 Python
Python 实现集合Set的示例
2020/12/21 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
CSS3 box-sizing属性详解
2016/11/15 HTML / CSS
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
医药工作者的求职信范文
2013/09/21 职场文书
自荐信需注意事项
2014/01/25 职场文书
《在家里》教后反思
2014/03/01 职场文书
民族学专业求职信
2014/07/28 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
丧事答谢词大全
2015/09/30 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
Python编程中内置的NotImplemented类型的用法
2022/03/23 Python
Python OpenCV实现图形检测示例详解
2022/04/08 Python