您的位置:首页 > Web前端 > JavaScript

Extjs模块中组件的编写规范

2012-01-18 22:58 183 查看
请注意,组件的类定义中,不允许使用new来定义子成员,若有必要,则使用xtype。

Ext.ns("modScoreManage.EditForm");

/** 放置在一个window中的用于编辑学生信息的表单
* @arguments String:sName,sGender,dBirthday,nAge,nClazzId,sId 分别为学生的各项信息
* @author William
* @lastEdit William
* @version 2012/1/12
* */
modScoreManage.EditForm = Ext.extend(Ext.FormPanel,{

//初始化组件
constructor:function(sName,sGender,dBirthday,nAge,nClazzId,sId){

// 变量定义
this.nFormWidth = 280;
this.nLabelWidth = 45;
this.storeStudentsData = global.util.Stores.getStudentsStore();

// 调用父类构造函数
modScoreManage.EditForm.superclass.constructor.call(this,{

labelWidth:this.nLabelWidth,
frame:true,
bodyStyle:'padding:5px 5px 5px',
width:this.nFormWidth,
autoHeight:true,
waitMsgTarget:true,
reader:this.reader,
defaultType:'textfield'

/*---------------------定义表单中包含的控件----------------------*/
,items:[{
fieldLabel:'姓名',
name:'EditForm_sName',
value:sName,
allowBlank:false
},{
fieldLabel:'性别',
name:'EditForm_sGender',
value:sGender,
allowBlank:false
}
,{
xtype:'datefield' // 使用xtype来实现对象延迟创建
,fieldLabel:'生日'
,name:'EditForm_dBirthday'
,value:dBirthday
,format:'Y-m-d'  // 注意这里 y 的大小写是有区别的。
}
//	 		 	,new Ext.form.DateField({
//	 		 		fieldLabel:'生日'
//	 		 		,name:'EditForm_dBirthday'
//	 		 		,value:dBirthday
//	 		 		,format:'Y-m-d'  // 注意这里 y 的大小写是有区别的。
//	 		 	})
,{fieldLabel:'年龄',
name:'EditForm_nAge',
value:nAge,
allowBlank:true
},{fieldLabel:'班级',
name:'EditForm_nClazzId',
value:nClazzId,
allowBlank:true
},{
name:'EditForm_sId',
hidden:true,   // hidden 和 hideLabel同时设置才能隐藏这个表单域
hideLabel:true,
value:sId
}
]
,buttons: [{
text:'修改',
disabled:false,
handler:this.onBtnEditClick
},{
text:'取消',
handler:this.onBtnCancelClick
}]
/*--------------------/定义表单中包含的控件----------------------*/
});

}
/*------------------------------Methods------------------------------------------*/
/**销毁该表单窗口
* @author William
* */
,destroyWnd:function(){
this.ownerCt.destroy();
}
/*-----------------------------/Methods------------------------------------------*/
/*------------------------------Event Handlers-----------------------------------*/
,onBtnEditClick:function(){

// 将提交按钮禁用,防止用户重复提交
this.setDisabled(true);

// 发送表单提交请求
this.ownerCt.ownerCt.getForm().submit({
url:'student_edit.do',
method:'POST',
scope:this.ownerCt.ownerCt, // 回到formPanel这一层

/*------------------------------请求返回的处理------------------------------*/
success: function(form,action){
Ext.Msg.alert('信息','信息修改成功',function(){

});
this.storeStudentsData.reload();
this.destroyWnd();

},
failure: function(form,action){
Ext.Msg.show({
title: '信息提示',
icon:Ext.MessageBox.QUESTION,
msg:'修改失败',
buttons:Ext.MessageBox.OK
});
this.storeStudentsData.reload();

this.destroyWnd();
}
/*-----------------------------/请求返回的处理------------------------------*/
});

}
,onBtnCancelClick:function() {
// 这里的this是 Cancel按钮
this.ownerCt.ownerCt.destroyWnd();

}
/*-----------------------------/Event Handlers-----------------------------------*/

// 注册该类
Ext.reg('modScoreManage_EditForm', modScoreManage.EditForm );
});


针对若干特定组件:

1. Ext.window组件,必须设置 constrainHeader:true 。保证window不超过浏览器顶端。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: