Extjs模块中组件的编写规范

请注意，组件的类定义中，不允许使用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不超过浏览器顶端。