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模拟页面加载进度条的实现代码
Dec 19 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
浅析JQuery UI Dialog的样式设置问题
Dec 18 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
深入理解Javascript中的valueOf与toString
Jan 04 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
浅谈js中的this问题
Aug 31 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
微信小程序实现授权登录
May 15 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 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
Apache, PHP在Windows 9x/NT下的安装与配置 (一)
2006/10/09 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
PHP自带函数给数字或字符串自动补齐位数
2014/07/29 PHP
使用PHP编写发红包程序
2015/07/22 PHP
php实现中文转数字
2016/02/18 PHP
幻宇的层模拟窗口效果-提供演示和下载
2007/01/20 Javascript
学习ExtJS TextField常用方法
2009/10/07 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
JS常用函数使用指南
2014/11/23 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
Nodejs初级阶段之express
2015/11/23 NodeJs
详解jQuery中的empty、remove和detach
2016/04/11 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
JQuery的常用选择器、过滤器、方法全面介绍
2016/05/25 Javascript
DataTables+BootStrap组合使用Ajax来获取数据并且动态加载dom的方法(排序,过滤,分页等)
2016/11/09 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
微信小程序商城项目之淘宝分类入口(2)
2017/04/17 Javascript
jquery实现图片轮播器
2017/05/23 jQuery
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
解决VantUI popup 弹窗不弹出或无蒙层的问题
2020/11/03 Javascript
python基于三阶贝塞尔曲线的数据平滑算法
2019/12/27 Python
python绘制封闭多边形教程
2020/02/18 Python
python实现一个猜拳游戏
2020/04/05 Python
Python求凸包及多边形面积教程
2020/04/12 Python
Django Form设置文本框为readonly操作
2020/07/03 Python
Pytorch之扩充tensor的操作
2021/03/04 Python
佐卡伊官网:中国知名珠宝品牌
2017/02/05 全球购物
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
维多利亚的秘密官方网站:Victoria’s Secret
2018/10/24 全球购物
课改先进个人汇报材料
2014/01/26 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
团代会开幕词
2015/01/28 职场文书
推荐信范文大全
2015/03/27 职场文书
如何在python中实现ECDSA你知道吗
2021/11/23 Python