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实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
解析prototype,JQuery中跳出each循环的方法
Dec 12 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
浅析Javascript中bind()方法的使用与实现
Apr 29 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
Aug 15 Javascript
微信小程序与php 实现微信支付的简单实例
Jun 23 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
JS实现集合的交集、补集、差集、去重运算示例【ES5与ES6写法】
Feb 18 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
详解Vue Cli浏览器兼容性实践
Jun 08 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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
为IP查询添加GOOGLE地图功能的代码
2010/08/08 PHP
过滤掉PHP数组中的重复值的实现代码
2011/07/17 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
Linux中用PHP判断程序运行状态的2个方法
2014/05/04 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
20款非常优秀的 jQuery 工具提示插件 推荐
2012/07/15 Javascript
JQuery切换显示的效果实例代码
2013/02/27 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
jQuery根据name属性进行查找的用法分析
2016/06/23 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
JavaScript仿支付宝6位数字密码输入框
2016/12/29 Javascript
详解nodejs微信公众号开发——6.自定义菜单
2017/04/13 NodeJs
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
JS面向对象编程基础篇(二) 封装操作实例详解
2020/03/03 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python 含参构造函数实例详解
2017/05/25 Python
定制FileField中的上传文件名称实例
2017/08/23 Python
Python tkinter事件高级用法实例
2018/01/31 Python
详解Python 协程的详细用法使用和例子
2018/06/15 Python
python实现名片管理器的示例代码
2019/12/17 Python
TensorFlow获取加载模型中的全部张量名称代码
2020/02/11 Python
python GUI库图形界面开发之PyQt5状态栏控件QStatusBar详细使用方法实例
2020/02/28 Python
如何在python中执行另一个py文件
2020/04/30 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
viagogo英国票务平台:演唱会、体育比赛、戏剧门票
2017/03/24 全球购物
香港万宁官方海外旗舰店:香港健与美连锁店
2018/09/27 全球购物
一名毕业生的自我鉴定
2013/12/04 职场文书
公司庆典活动邀请函
2014/01/09 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
工会经费申请报告
2015/05/15 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python