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

Module.js文件的编写规范

2012-01-18 22:35 337 查看
在模块化后,每个模块应按如下方式编写:(需注意以下内容的和注释方式)

Ext.namespace("modScoreManage");
/**文件名:	Module.js
* 功能:	作为显示成绩信息页面的模块。 该文件中包含作为Module类主体的一个类的定义。
* @author William
* @lastEdit William
* @version 2012/1/12
* */

/*----------------------------------- 定义 GridStudent---------------------------------------*/
/**类名:成绩信息Grid
* @author William
* @lastEdit William
* @version 2012/1/12
* */
modScoreManage.GridStudent = Ext.extend(Ext.grid.GridPanel,{

// 属性代码
viewConfig : {
forceFit : true
}
/*-----------------------------------GridStudent 的构造函数---------------------------------------*/
,constructor:function(){

// 创建所需成员
this.nRecordStart 	= 0;
this.nPageSize		= 10;
this.store = global.util.Stores.getStudentsStore();
this.store.load({params:{start:this.nRecordStart,limit:this.nPageSize}});
this.cmScore = new Ext.grid.ColumnModel([
{header:'学号',dataIndex:'id', width:20}
,{header:'姓名',dataIndex:'name'}
,{header:'性别',dataIndex:'gender'}
,{header:'生日',dataIndex:'birthday', renderer :global.util.Render.renderDate('Y-m-d')}
,{header:'年龄',dataIndex:'age'}
,{header:'班级',dataIndex:'clazz_id'}
]);
this.cmScore.defaultSortable = true;

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

// 属性设置
loadMask:{
msg:'数据加载中...'
}
,title:'学生信息管理'
,cm:this.cmScore
,stripeRows : true
,split : true

//视图代码全部写在这里
,bbar:{
xtype:'paging'
,pageSize:this.nPageSize
,store:this.store
,displayInfo:true
,displayMsg:'显示第{0}条到第{1}条记录,一共{2} 条记录'
,emptyMsg:'没有记录'
}
,tbar:[
{
xtype:'button'
,text:'修改'
//						,iconCls:'editpart'
}
,'-'
,{
xtype:'button'
,text:'删除'
,iconCls:'deletepart'
}
]

});
/*----------------------------------/ 调用父类构造函数---------------------------------------*/

// 创建事件侦听器
this.getTopToolbar().findByType('button')[0].on('click',this.onBtnEdit,this);
this.getTopToolbar().findByType('button')[1].on('click',this.onBtnDelete,this);

}
/*----------------------------------/GridStudent 的构造函数---------------------------------------*/
/**创建编辑信息表单
* @author William
* @lastEdit William
* @version 2012/1/12
* */
,createEditForm:function(sName,sGender,dBirthday,nAge,nClazzId,sId){

var frmEdit = new modScoreManage.EditForm(sName,sGender,dBirthday,nAge,nClazzId,sId);
var wndEdit = new modScoreManage.FormWnd("修改学生信息", frmEdit );
wndEdit.show();

}
/**弹出删除确认提示框
* @author William
* @lastEdit William
* @version 2012/1/12
* */
,createDelConfirmBox:function(recSelected){

Ext.Msg.confirm('确定','您确定要删除 '+ recSelected.get('name') + " 吗?",
function(btn){
if(btn =='yes'){
/*-------------- 发送请求----------------*/
Ext.Ajax.request({
url:'student_delete.do', // 删除功能现在在action中被注释掉了。
params:{
//						        				 sId:slId
},
scope:this,
success: function(){
this.store.remove(recSelected);
this.store.reload();
Ext.Msg.show({
title:'提示',
msg:'删除成功',
icon:Ext.Msg.OK,
buttons:Ext.MessageBox.OK
});
}
});
/*-------------/ 发送请求----------------*/
}
}
,this
);

}

/*--------------------------------/this的方法-----------------------------------*/
/*-----------------------------------------------事件处理函数-------------------------------------------------*/
/**编辑按钮的事件处理函数
* @author William
* @lastEdit William
* @version 2012/1/12
* */
,onBtnEdit:function(){

//判断是否选中了修改的记录
var recSelected = this.getSelectionModel().getSelected();
//根据判断结果处理
if(!recSelected){

//如果没有选中记录
Ext.Msg.show({
title:'提示',
msg:'没有选中要修改的记录',
icon:Ext.MessageBox.Error,
buttons:Ext.MessageBox.OK
});
} else{
//如果选中了某条记录
//得到选中grid中的对象的属性值
var sId = recSelected.get('id');  // 注意,这里一定要采用匈牙利命名法来标注变量属性
var sName = recSelected.get('name');
var sGender = recSelected.get('gender');
var dBirthday = recSelected.get('birthday');
var nAge = recSelected.get('age');
var nClazzId = recSelected.get('clazz_id');

// 创建表单
this.createEditForm(sName,sGender,dBirthday,nAge,nClazzId,sId);
}
}
/**删除按钮的事件处理函数
* @author William
* @lastEdit William
* @version 2012/1/12
* */
,onBtnDelete:function(){

//判断是否选中了修改的记录
var recSelected = this.getSelectionModel().getSelected();
//根据判断结果处理
if(!recSelected){
Ext.Msg.show({
title:'提示',
msg:'没有选择相应的数据',
icon:Ext.Msg.Error,
buttons:Ext.MessageBox.OK
});
return;
}else{

// 弹出确认提示框
this.createDelConfirmBox(recSelected);
}
}
/*----------------------------------------------/事件处理函数-------------------------------------------------*/
});
/*----------------------------------/ 定义 GridStudent---------------------------------------*/

Ext.extend(main.Module,{
init:function(){

// 创建Module中所需对象
this.gridStudent = new modScoreManage.GridStudent();

// 添加事件

// 将母体组件添加到this.main(那个tab)中
this.main.add(this.gridStudent;);
this.main.doLayout();

}
/*---------------------------------this的方法-----------------------------------*/
/*--------------------------------/this的方法-----------------------------------*/
/*-----------------------------------------------事件处理函数-------------------------------------------------*/
/*----------------------------------------------/事件处理函数-------------------------------------------------*/

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: