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之解决IE下不渲染的bug
Jun 29 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
js实现页面a向页面b传参的方法
May 29 Javascript
js eval函数使用,js对象和字符串互转实例
Mar 06 Javascript
Node.js设置CORS跨域请求中多域名白名单的方法
Mar 28 Javascript
js分页之前端代码实现和请求处理
Aug 04 Javascript
React根据宽度自适应高度的示例代码
Oct 11 Javascript
React 组件间的通信示例
Jun 14 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
js加减乘除精确运算方法实例代码
Jan 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创建动态图像
2006/10/09 PHP
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
php不使用插件导出excel的简单方法
2014/03/04 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
JQuery Ajax 跨域访问的解决方案
2010/03/12 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
2014/05/02 Javascript
node.js不得不说的12点内容
2014/07/14 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
jQuery获得字体颜色16位码的方法
2016/02/20 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
vue 使某个组件不被 keep-alive 缓存的方法
2018/09/21 Javascript
详解vue-cli 脚手架 安装
2019/04/16 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
解决vue 子组件修改父组件传来的props值报错问题
2019/11/09 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
vue - props 声明数组和对象操作
2020/07/30 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
python对url格式解析的方法
2015/05/13 Python
Python实现Mysql数据库连接池实例详解
2017/04/11 Python
Python 中Pickle库的使用详解
2018/02/24 Python
图解Python变量与赋值
2018/04/03 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python根据当前日期取去年同星期日期
2019/04/14 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
PyCharm2018 安装及破解方法实现步骤
2019/09/09 Python
python实现最速下降法
2020/03/24 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
CSS3中的display:grid,网格布局介绍
2019/10/30 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
2017/09/12 HTML / CSS
写出二分查找算法的两种实现
2013/05/13 面试题
2015年个人自我剖析材料
2014/12/29 职场文书
财务部会计岗位职责
2015/02/03 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书