ExtJS中的面向对象设计,组件化编程思想（三）

/**//*
* @author: Lilf
* Description: ExtJS中的面向对象设计,组件化变成思想
*/
/**//***************************扩展VTypes类，增加年龄的验证****************************/
Ext.apply(Ext.form.VTypes, {
"age": function(_v){
if (/^\d+$/.test(_v)) {
var intExp = parseInt(_v);
if (intExp < 200)
return true;
}
return false;
},
ageText: "请输入正确的年龄格式，如：23"
});
/**//***************************继承自FormPanel的表单组件,用来构件Window***************************/
PersonInfoFormPanel = Ext.extend(Ext.form.FormPanel, {
constructor: function(){
PersonInfoFormPanel.superclass.constructor.apply(this, [{
baseCls: "x-plain",
buttonAlign: "right",
labelWidth: 30,
defaultType: "textfield",
defaults: {
anchor: "95%",
labelStyle: "text-align:right"
},
items: [{
fieldLabel: "姓名",
name: "name"
}, {
fieldLabel: "年龄",
name: "age",
vtype: "age"//验证年龄（通过vtype类型来验证）
}, {
xtype: "combo",
mode: "local",//本地数据
readOnly: true,
fieldLabel: "性别",
displayField: "sex",//显示下拉框的内容
triggerAction: "all",//在选择时，显示所有的项
value: "男",//默认值
store: new Ext.data.SimpleStore({
fields: ["sex"],
data: [["男"], ["女"]]
}),
name: "sex"//绑定字段
}]

}])
},
//---以下为PersonInfoFormPanel类对外提供的方法---
getValues: function(){
if (this.getForm().isValid())
return new Ext.data.Record(this.getForm().getValues());
else
throw new Error("验证没有通过");//自定义异常
},
setValues: function(_r){
this.getForm().loadRecord(_r);
},
reset: function(){
this.getForm().reset();
}

});
/**//*************继承自Window的基类,insertWindow与updateWindow都由此继承****************/
baseWindow = Ext.extend(Ext.Window, {
form: null,
constructor: function(){
this.form = new PersonInfoFormPanel();//实例化PersonInfoFormPanel类
baseWindow.superclass.constructor.apply(this, [{
plain: true,
width: 350,
//title: "新增人员",
modal: true,
resizable: false,
closeAction: "hide",
defaults: {
style: "padding:5px"
},
items: this.form,
buttons: [{
text: "确 定",
handler: this.onSubmitClick,//提交事件调用
scope: this
}, {
text: "取 消",
handler: this.onCancelClick,//取消事件调用
scope: this

}]
}]);
//给insertWindow对象添加事件（事件冒泡）
this.addEvents("submit");
},
//提交事件处理函数
onSubmitClick: function(){
try {
//发布事件
this.fireEvent("submit", this, this.form.getValues());//调用PersonInfoFormPanel类中自定义的方法getValues
this.close();

}
catch (_err) {
Ext.Msg.alert("系统提示", _err.description);//扑捉自定义错误或异常
}
},
//取消事件处理函数
onCancelClick: function(){
this.close();
},
//重置与隐藏事件处理函数
close: function(){
this.form.reset();
this.hide();
}

});
/**//******************insertWindow类****************************/
insertWindow = Ext.extend(baseWindow, {
title: "新增人员"
});
/**//****************updateWindow类******************************/
updateWindow = Ext.extend(baseWindow, {
title: "修改人员",
load: function(_r){
this.form.setValues(_r);
}
});
/**//*******根据上面组件创建新的GridPanel类,它就像我们根据不同的零件设计出来的汽车************
* ExtJs自定义PersonListGridPanel类
* 该类继承自GridPanel[使用Ext.extend(superClass,override Object)方法实现继承],
* 并override了该类的构造函�hu数
* 构造函数内部继承自GridPanel的构造函数[apply(this,arguments)实现继承]
* 该类实现了如何对外部公布一个事�件
* 在构造函数中添加一个事件[this.addEvents("事件名称"）]
* 然后使用this.fireEvent("事件名称",参数）来发布此事�件
* 最后在客户端调用的时候来订阅该事�jian件
*/
PersonListGridPanel = Ext.extend(Ext.grid.GridPanel, {
_window: null,
_updateWin: null,
constructor: function(_url){
this._window = new insertWindow();//insertWindow对象引用
this._updateWin = new updateWindow();//updateWindow对象引用
PersonListGridPanel.superclass.constructor.apply(this, [{
renderTo: Ext.getBody(),
width: 550,
height: 200,
frame: true,
layout: "form",
//工具栏
tbar: [{
text: "add",
handler: function(){
this._window.show();
},
scope: this
}, "-", {
text: "update",
handler: function(){
this._updateWin.show();
try {
this._updateWin.load(this.getSelected());
}

catch (_err) {
Ext.Msg.alert("系统提示", _err.description);
this._updateWin.close();
}
},
scope: this
}, "-", {
text: "delete",
handler: this.onRemovePerson,
scope: this
}],
enableColumnMove: false,
//列模板
columns: [{
header: "Name",
menuDisabled: true,
dataIndex: "name"
}, {
header: "Age",
menuDisabled: true,
dataIndex: "age"
}, {
header: "Sex",
menuDisabled: true,
dataIndex: "sex"
}],
//数据源
store: new Ext.data.JsonStore({
autoLoad: true,
url: _url,
fields: ["name", "age", "sex"]
}),
//选中模板
selModel: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
"rowselect": {
fn: this.onRowSelected,
scope: this
}
}
})

}]);
//添加事件
this.addEvents("rowselect");
//事件订阅
this._window.on("submit", this.onInsertWinSubmit, this);
this._updateWin.on("submit", this.onUpdateWinSubmit, this);
},
//----- 以下为自定义方法---------
//获得选中的记录
getSelected: function(){
var _sm = this.getSelectionModel();
if (_sm.getCount() == 0)
throw new Error("你没有选中任何记录,请选择一条记录后重试");
return _sm.getSelected();
},
//插入一条记录
insert: function(_r){
this.getStore().add(_r);
},
//更新选中的记录
update: function(_r){
try {
var _rs = this.getSelected();
var _data = _rs.data;
for (var _i in _data) {
_rs.set(_i, _r.get(_i));
};
_rs.commit();
}
catch (_err) {

}

},
//删除选中的记录
remove: function(){
try {
var _rs = this.getSelected();
Ext.Msg.confirm("系统提示", "你确定删除吗?", function(_btn){
if (_btn == "yes")
this.getStore().remove(_rs);
}, this);
}
catch (_err) {
Ext.Msg.alert("系统提示", _err.description);
}
},
//-------以下为自定义事件处理函数------------
//添加事件
onInsertWinSubmit: function(_win, _r){
this.insert(_r);
},
//修改事件
onUpdateWinSubmit: function(_win, _r){
this.update(_r);
},
//删除事件
onRemovePerson: function(){
this.remove();
},
//选中事件
onRowSelected: function(_sel, _index, _r){
this.fireEvent("rowselect", _r);//发布事件
}

})