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

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

//利用继承写法的目的是使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：基类窗体。 基类窗体是为添加页面的窗体和修改页面的窗体提供了一个基类。基类窗体中定义了一个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() ;
}
}) ;
添加页面窗体和修改页面窗体
在这两个窗体中都继承了基类窗体，及infoWin,继承之后他们就有了基类窗体的所有属性，方法和事件，根据他们不同的需求实现submit触发后的功能，代码如下：
var addWin = Ext.extend(infoWin,{
title : '添加信息'
}) ;

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

gridInfo对象
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 ,