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 index()方法 获取相应元素索引值
Oct 12 Javascript
使用javascript为网页增加夜间模式
Jan 26 Javascript
jquery制作居中遮罩层效果分享
Feb 21 Javascript
jQuery结合ajax实现动态加载文本内容
May 19 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
react.js 获取真实的DOM节点实例(必看)
Apr 17 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
微信小程序中this.data与this.setData的区别详解
Sep 17 Javascript
JavaScript制作3D旋转相册
Aug 02 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
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 中英文语言转换类代码
2011/08/11 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
Laravel程序架构设计思路之使用动作类
2018/06/07 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
国外的为初学者写的JavaScript教程
2008/06/09 Javascript
利用jQuery的$.event.fix函数统一浏览器event事件处理
2009/12/21 Javascript
读jQuery之五(取DOM元素)
2011/06/20 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
2013/01/23 Javascript
JQuery性能优化的几点建议
2014/05/14 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
jQuery跨域问题解决方案
2015/08/03 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
vue文件运行的方法教学
2019/02/12 Javascript
JS实现小米轮播图
2020/09/21 Javascript
简单介绍Python中的JSON模块
2015/04/08 Python
用yum安装MySQLdb模块的步骤方法
2016/12/15 Python
Flask框架响应、调度方法和蓝图操作实例分析
2018/07/24 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
python列表推导式操作解析
2019/11/26 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
python3访问字典里的值实例方法
2020/11/18 Python
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
贝玲妃美国官方网站:Benefit美国
2016/08/28 全球购物
英国自行车商店:AW Cycles
2021/02/24 全球购物
应聘教师自荐信
2013/10/12 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
个人自我剖析材料
2014/02/07 职场文书
2014村务公开实施方案
2014/02/25 职场文书
财务总监岗位职责
2014/03/07 职场文书
招标承诺书
2014/08/30 职场文书
2014年房地产工作总结范文
2014/11/19 职场文书
大学迎新生欢迎词
2015/09/29 职场文书