EXT 模块化 编程实现人员信息的添加

对Ext 模块化编程 研究了下。 还有 对异常的处理技巧 , 事件的公布 及 触发（可能有的叫法不同）.
自己的感悟是 和JAVA语言 非常的相似。
测试页面只需一句JS就可以调用 很多功能。
此例： 在测试页面加上 Ext.onReady(function(){new ViewGrid();}); 即可

以下是 模板的代码:
欢迎各位 投蛋 ,意见.
ViewGrid = Ext.extend(Ext.grid.GridPanel,{
insertWin:null,
updateWin:null,
constructor:function(){
this.insertWin = new InsertWindowInfo();
this.updateWin = new UpdateWindowInfo();
ViewGrid.superclass.constructor.call(this,{
title:'GridPanel',
renderTo:Ext.getBody(),
width:320,
height:200,
tbar:[{
text:'添加人员',
handler:function(){
this.insertWin.show();
},scope:this
},'-',{
text:'修改人员',
handler:function(){
this.updateWin.show();
try{
var _r = this.getSelected();
this.updateWin.form.setValues(_r);
}catch(error){
Ext.Msg.alert(error.description);
this.updateWin.close();
}
},
scope:this
},'-',{
text:'删除人员',
handler:this.deleteEmp,
scope:this
}],
colModel:new Ext.grid.ColumnModel([{
header:'姓名'
},{
header:'性别'
},{
header:'年龄'
}]),
store:new Ext.data.JsonStore({
autoLoad:true,
data:[{name:'张翔',sex:'男',age:22},{name:'李慧敏',sex:'女',age:21}],
fields:['name','sex','age']
}),
selModel:new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners:{
'rowselect':{
fn:function(_sel,_index,_r){
this.fireEvent('rowselect',_r);
},
scope:this
}
}
})
});
this.addEvents('rowselect');
this.insertWin.on('submit',this.onInsertWinSubmit,this);
this.updateWin.on('submit',this.onUpdateWinSubmit,this);
},
insertRecord:function(_r){
this.store.add(_r);
},
updateRecord:function(_r){
try{
var _nr = this.getSelected();
var _data = _r.data;
for(var i in _data){
_nr.set(i,_data[i]);
}
_nr.commit();
}catch(error){
alert(error.description);
}
},
deleteRecord:function(_r){
this.getStore().remove(_r);
},
onInsertWinSubmit:function(_win,_r){
this.insertRecord(_r);
},
getSelected:function(){
var sm = this.getSelectionModel();
if(sm.getCount() == 0)throw Error("请选择一条记录");
else return sm.getSelected();
},
onUpdateWinSubmit:function(_win,_r){
this.updateRecord(_r);
},
deleteEmp:function(_r){
try{
this.deleteRecord(this.getSelected());
}catch(error){
Ext.MessageBox.alert('系统提示','请选择一条记录');
}
}
});

//---------------------------------------------------------------------------------------------------------
FormInfo = new Ext.extend(Ext.form.FormPanel,{
constructor:function(){
FormInfo.superclass.constructor.call(this,{
frame:true,
defaultType:'textfield',
labelWidth:35,
//baseCls:'x-plain',
defaults:{'anchor':'95%'},
plain:true,
items:[{
fieldLabel:'姓名',
name:'name'
},{
fieldLabel:'年龄',
vtype:'age',
name:'age'
},{
fieldLabel:'性别',
name:'sex',
readonly:true,
xtype:'combo',
displayField:'sex',
mode:'local',
triggerAction:'all',
value:'男',
store:new Ext.data.ArrayStore({
fields:['sex'],
data:[['男'],['女']]
})
}]
});
},
getValues:function(){
if(this.getForm().isValid())
return new Ext.data.Record(this.getForm().getValues());
else
throw Error('没有通过验证');
},
setValues:function(_r){
this.getForm().loadRecord(_r);
},
reset:function(){
this.getForm().reset();
}
});

//-------------------------------------------------------------------------------------------------------------
WindowInfo =Ext.extend(Ext.Window,{
form:null,
constructor:function(){
this.form = new FormInfo();
WindowInfo.superclass.constructor.call(this,{
renderTo:Ext.getBody(),
width:300,
height:150,
plain:true,
items:this.form,
buttons:[{
text:'确定',
handler:this.onWindowSubmit,
scope:this
},{
text:'取消',
handler:this.onWindowCancel,
scope:this
}]
});
this.addEvents("submit");
},
close:function(){
this.form.reset();
this.hide();
},
onWindowSubmit:function(){
try{
this.fireEvent('submit',this,this.form.getValues());
}catch(error){
return ;
}
this.form.reset();
this.hide();
},
onWindowCancel:function(){
this.form.reset();
this.hide();
}
});
//-------------------------------------------------------------------------------------------------------
InsertWindowInfo = Ext.extend(WindowInfo,{
title:'添加人员'
});
//-------------------------------------------------------------------------------------------------------

UpdateWindowInfo = Ext.extend(WindowInfo,{
title:'修改人员'
});