ExtJs Form表单的客户端添加修改和删除操作

这个例子主要完成利用ExtJs存储器store实现了表单的增加，修改和删除的功能
分成三部分。1.表单 2.窗口 3.表格

表单中包含文本框等form组件，为增加和修改页面提供了FormPanel对象。
[color=red][b]1.表单[/b][/color]

//利用继承写法的目的是使formInfo组件化，添加页面和修改页面可以实例化自己的formInfo，forInfo对象如下：

formInfo = Ext.extend(Ext.form.FormPanel,{
constructor:function(){
formInfo.superclass.constructor.call(this,{
width:500 ,
height : 400 ,
frame : true ,
defaultType : 'textfield' ,
defaults : {
anchor : '90%'
} ,
//实例化form组件
items : [{
fieldLabel : '姓名' ,
name : "name"
},{
fieldLabel : '年龄' ,
name : 'age' ,
vtype : 'age'
},{
xtype : 'combo' ,
name : "sex" ,
typeAhead : true ,
fieldLabel : '性别' ,
triggerAction : 'all' ,
mode : 'local' ,
store : new Ext.data.SimpleStore({
data : [[1,'男'] , [2,'女']] ,
fields : ['myid' , 'mytext']
}) ,
valueField : 'myid' ,
displayField : 'mytext'
}] ,
//定义方法。取得当前form的输入的值
getValue : function(){
if(this.getForm().isValid()){
return new Ext.data.Record(this.getForm().getValues())
}else{
throw Error("年龄输入有错误") ;
}
} ,
//将Record对象_rset到form表单中
setValue : function(_r){
this.getForm().loadRecord(_r) ;
} ,
//清空表单
resets : function(){
this.getForm().reset() ;
}
}) ;
}
}) ;

2：[color=red][b]基类窗体。[/b][/color] 基类窗体是为添加页面的窗体和修改页面的窗体提供了一个基类。基类窗体中定义了一个form属性，他就是上面提到的formInfo，在基类的构造函数中初始化了form属性，及new formInfo(),在实现添加和修改的时候可以直接继承基类窗体。而不用继承Ext.window，基类窗体中添加了一个submit事件，当点击确定按钮的时候触发该事件，并将他本身和form中的值作为参数传递。代码如下
var infoWin = Ext.extend(Ext.Window,{
form : null , //定义属性form
closeAction : 'hide' ,
constructor : function(){
//在构造函数中初始化form属性
this.form = new formInfo() ;
infoWin.superclass.constructor.call(this,{
width : 500 ,
height : 400,
frame : true ,
items : this.form ,
buttons : [{
text : '确定' ,
//当点击确定的时候执行onAddSubmit方法
handler :this.onAddSubmit ,
scope : this
},{
text : '取消' ,
handler : this.close ,
scope : this
}]
}) ;
//添加一个事件submit
this.addEvents("submit") ;
} ,
//当点击确定后触发的事件
onAddSubmit : function(){
try{
//触发submit事件并传递参数this--窗体本身和this.form.getValue()--form中输入的值
this.fireEvent("submit" , this,this.form.getValue()) ;
}catch(err){
return ;
}
} ,
//关闭表单
close : function(){
this.form.resets() ;
this.hide() ;
}
}) ;
[color=red][b]添加页面窗体和修改页面窗体[/b][/color]
在这两个窗体中都继承了基类窗体，及infoWin,继承之后他们就有了基类窗体的所有属性，方法和事件，根据他们不同的需求实现submit触发后的功能，代码如下：
var addWin = Ext.extend(infoWin,{
title : '添加信息'
}) ;

var updateWin = Ext.extend(infoWin,{
title : '修改信息' ,
//添加方法，作用是把列表中选中的行的记录现实在表单中
setValue : function(_r){
this.form.getForm().loadRecord(_r) ;
}
}) ;

[color=red][b]gridInfo对象[/b][/color]
gridInfo对象的作用是显示表格，它定义了属性addWin和updateWin,分别是addWin和updateWin的实例，根据需要定义了一系列的方法，代码如下：
gridInfo = Ext.extend(Ext.grid.GridPanel,{

addWin:null ,
updateWin :null ,
constructor:function(){
this.addWin = new addWin() ;
this.updateWin = new updateWin() ;
gridInfo.superclass.constructor.call(this,{
title:'表格信息' ,
width:350 ,
height : 400 ,
tbar:[{
text : '添加' ,
listeners:{
'click' :{
fn:function(){
this.addWin.show() ;
},
scope : this
}
}
},{
text : '修改' ,
listeners : {
'click' : {
fn : function(){
try{
this.updateWin.setValue(this.getSelect()) ;
this.updateWin.show()
}catch(e){
Ext.Msg.alert("系统提示",e.description) ;
}
},
scope : this
}
}
},{
text : '删除' ,
listeners : {
'click' : {
fn : function(){
this.onRemoveClick(this) ;
} ,
scope : this
}
}
}] ,
colModel: new Ext.grid.ColumnModel([{
header:'姓名'
},{
header:'年龄'
},{
header:'性别'
}]) ,
store:new Ext.data.Store({
data:[['张三',28,'男'],['李四',30,'女']] ,
reader:new Ext.data.ArrayReader({

},Ext.data.Record.create([{
name : 'name'
},{
name : 'age'
},{
name : 'sex'
}]))
}) ,
sm : new Ext.grid.RowSelectionModel({
single:true ,
listeners:{
'rowselect' : {
fn:function(_sel,_index,_record){
this.fireEvent('rowselect',_record) ;
},
scope:this
}
}
}) ,
renderTo:Ext.getBody() ,
//表格中添加一条数据
insert : function(_r){
this.store.add(_r) ;
} ,
//当点击添加后触发的事件
onInsertSubmit : function(_win,_r){
this.insert(_r) ;
_win.close() ;
},
//显示修改界面
showUpdateWin : function(){
this.updateWin.show() ;
} ,
onUpdateSubmit : function(_win,_r){
this.update(_r) ;
_win.close() ;
} ,
update : function(_r){
//alert(Ext.util.JSON.encode(_r.data)) ;
var rs = this.getSelect() ;
for(_data in rs.data)
{
rs.set(_data,_r.get(_data)) ;
}
rs.commit() ;
} ,
onRemoveClick:function(_grid){
Ext.Msg.confirm("系统提示","是否删除记录",this.onRemoveRecord,this)
} ,
onRemoveRecord : function(msg){
if(msg == 'yes'){
this.removeRecord(this.getSelect()) ;
}
} ,
removeRecord : function(_r){
this.store.remove(_r) ;
} ,
//获得表格中选中的记录
getSelect : function(){
var _sel = this.getSelectionModel() ;
if(_sel.getCount()==0){
throw Error("请选择记录") ;
return ;
}else{
return this.getSelectionModel().getSelected() ;
}
}
}) ;
this.addEvents('rowselect') ;
this.addWin.on("submit",this.onInsertSubmit,this) ;
this.updateWin.on('submit',this.onUpdateSubmit,this) ;
}
}) ;