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不超过浏览器顶端。相关文章推荐
- 淘宝模板开发系列之模块编写规范
- layui是一款采用自身模块规范编写的前端 UI 框架
- Android的硬件抽象层模块编写规范
- Layui 是一款采用自身模块规范编写的国产前端UI框架(5600个Star)
- Extjs用户组件编写
- Android硬件抽象层(HAL)模块编写规范
- C语言的模块编写规范
- Dojo初探之1:AMD规范,编写符合AMD规范(异步模块加载机制)的模块化JS(其中dojo采用1.11.2版本)
- Android硬件抽象层模块编写规范
- 【10】淘宝sdk模块的编写规范
- Atitit 常用sdk 模块 组织架构切分 规范与范例attilax总结
- ExtJS 4 Grid组件
- [转]软件开发规范—模块开发卷宗(GB8567——88)
- [翻译]Writing Component Editors 编写组件的编辑器
- ReactNative(嵌入到android)调用android原生组件与原生模块(比如某个方法)
- 使用C#轻松编写.Net组件
- 周末发现一个BUG,时有时无,一出程序就崩溃,郁闷了好久,终于跟出来来了,记之,提醒自己今后一定规范编写,只要规范,绝对不会出问题
- 026医疗项目-模块二:药品目录的导入导出-导入功能的Service的编写
- ExtJs4.2—Window组件
- react实现一个优雅的图片占位模块组件详解