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 相关文章推荐
分享使用AngularJS创建应用的5个框架
Dec 05 Javascript
jQuery简单验证上传文件大小及类型的方法
Jun 02 Javascript
学习JavaScript图片预加载模块
Nov 07 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
Nov 16 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
Javascript(es2016) import和require用法和区别详解
Aug 11 Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 Javascript
详解微信图片防盗链“此图片来自微信公众平台 未经允许不得引用”的解决方案
Apr 04 Javascript
vue 进阶之实现父子组件间的传值
Apr 26 Javascript
基于JS开发微信网页录音功能的实例代码
Apr 30 Javascript
微信小程序版本自动更新的方法
Jun 14 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 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实现多条件查询实例代码
2010/07/17 PHP
PHP中使用正则表达式提取中文实现笔记
2015/01/20 PHP
一个非常完美的读写ini格式的PHP配置类分享
2015/02/12 PHP
php通过淘宝API查询IP地址归属等信息
2015/12/25 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
Javascript事件实例详解
2013/11/06 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
使用 JavaScript 创建并下载文件(模拟点击)
2019/10/25 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
python实现简单温度转换的方法
2015/03/13 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
python版学生管理系统
2018/01/10 Python
python3.x实现发送邮件功能
2018/05/22 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
PyQt4编程之让状态栏显示信息的方法
2019/06/18 Python
Django框架之登录后自定义跳转页面的实现方法
2019/07/18 Python
使用python将excel数据导入数据库过程详解
2019/08/27 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
Keras之fit_generator与train_on_batch用法
2020/06/17 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
Jupyter Notebook安装及使用方法解析
2020/11/12 Python
JoJo Maman Bébé爱尔兰官网:英国最受欢迎的精品母婴品牌
2020/12/20 全球购物
大学生期末自我鉴定
2014/02/01 职场文书
企业消防安全制度
2014/02/02 职场文书
护士感人事迹
2014/05/01 职场文书
借名购房协议书范本
2014/10/06 职场文书
2015年创先争优活动总结
2015/03/27 职场文书
2015年勤工助学工作总结
2015/04/29 职场文书
2015年街道办事处工作总结
2015/05/22 职场文书
单位病假条范文
2015/08/17 职场文书
学生会任命书范本
2015/09/21 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
业余无线电通联Q语
2022/02/18 无线电
Win11 Beta 预览版 22621.575 和 22622.575更新补丁KB5016694发布(附更新内容大全)
2022/08/14 数码科技