javascript

位置:IT落伍者 >> javascript >> 浏览文章

Extjs4 类的定义和扩展实例


发布日期:2024年05月12日
 
Extjs4 类的定义和扩展实例

一般定义方式注意方法和函数的添加方式不同(添加函数只能用override方式添加不知为什么有知道的请搞之
定义一个类并给他一个方法

复制代码 代码如下:
Extdefine(SimpleClass{
welcome:function(){
alert(Welcome to the app);
}
});


使用Extoverride方法对已有类进行重载并添加函数

复制代码 代码如下:
Extoverride(SimleClass{
goodBye:function(){
alert(Goodbye);
}
funAll:function(){
thiswelcome();
thisgoodBye();
}
});


实例化类对象并调用新的方法

复制代码 代码如下:
var app = new SimpleClass();
apprunAll(); //Welcome to the app Goodbye


重载的另一种写法

复制代码 代码如下:
SimpleClassoverride({
// New members
});


实际例子

复制代码 代码如下:
Extdefine(MyButton{
extend:ExtAction
initComponent: function(){
var me = this;
var initEnable = true; //初始权限
}
});
Extoverride(MyButton{
mysetenable:function(b){ //增加自定义函数设置按钮权限
if ( thisinitEnable ) {
if (b){
thisenable();
}
else{
thisdisable();
}
}
else{
thisdisable();
}
}
});


例子

复制代码 代码如下:


Extdefine(PO_Head_Add_Panel {
extend: ExtformPanel
alias: widgetPO_Head_Add_Panel
//height:
//width:
frame: true
layout: anchor //该form分为两列
bodyPadding: //偏移px
//baseCls: "xplain" //指定使用系统背景色
//defaults: { anchor: "%" msgTarget: "side" }
// anchor: %
defaults:{//统一设置表单字段默认属性
//autoFitErrors : false//展示错误信息时是否自动调整字段组件宽度
labelSeparator ://分隔符
labelWidth : //标签宽度
//width : //字段宽度
allowBlank : false//是否允许为空
//blankText : 不允许为空 //若设置不为空为空时的提示
labelAlign : right//标签对齐方式
msgTarget :qtip //显示一个浮动的提示信息
//msgTarget :title //显示一个浏览器原始的浮动提示信息
//msgTarget :under //在字段下方显示一个提示信息
//msgTarget :side //在字段的右边显示一个提示信息
//msgTarget :none //不显示提示信息
//msgTarget :errorMsg //在errorMsg元素内显示提示信息
}
items:[{
xtype:combobox
name: ToAddress
labelWidth:
width:
queryMode: local
store:TmpAddressStore
displayField: AddrName
valueField: AddrName
editable : false// 是否允许输入
forceSelection : true// 必须选择一个选项
msgTarget: side
allowBlank: false //是否允许空值
fieldLabel: 送货地址
}{
xtype:textfield
name: HRemark
labelWidth:
width:
msgTarget: side
allowBlank: false //是否允许空值
fieldLabel: 备注
}]
initComponent: function(){
var me = this;
var PoType = ; //可以定义属性 objPoType 使用
var TmpHeadRec = Extcreate(PO_HeadData);

Extapply(this {
buttons: [{
text: 保存
handler:function(){
if (megetForm()isValid()) { //判断提交的数据是否符合正则表达式
//保存功能
}
}
} {
text: 取消
handler: function () {
meownerCthide();
}
}]
SetFormValue:function(){ //自定义方法 objSetFormValue() 方式调用
meTmpHeadRec = HeadStoregetAt();
megetForm()findField(POType)setValue(meTmpHeadRecget(POType));
megetForm()findField(PONum)setValue(meTmpHeadRecget(PONum));
}
});

thiscallParent(arguments);
}
});

               

上一篇:JS 对输入框进行限制

下一篇:js动态为代码着色显示行号