首页 / 脚本样式 / JavaScript / Extjs4 类的定义和扩展实例

一般定义方式，注意方法和函数的添加方式不同。（添加函数只能用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）;
}
}）;