EXT CRUD封装

/**

* 定义命名空间

*/
Ext.namespace("Mis.Ext");
/*
*CRUD面板基类
*/
//继承EXT的Panel，创建CRUD面板
Mis.Ext.CrudPanel=Ext.extend(Ext.Panel,{……})；
//限于篇幅就不列出全部代码

EXT里的继承用的是Ext.extend(组件名,{实现代码})；
要使用这个CRUD面板，需要继承实现它，我们举一个例子
//继承CrudPanel，创建污水厂管理面板
AddPlantPanel=Ext.extend(Mis.Ext.CrudPanel,{

id:"AddPlantPanel",//id号是表示一个面板的唯一标志

title:"污水厂管理",//面板的名称，见上图

baseUrl:"Plant.aspx",//数据源地址

//根据实际需要，重载编辑方法

edit:function()

{

CommentPanel.superclass.edit.call(this);//调用基类方法


var record=this.grid.getSelectionModel().getSelected();

if(record){

var id=record.get("plantID");

this.fp.form.setValues({ID:id});

}

},


//保存

save:function()

{



var id=this.fp.form.findField("ID").getValue();



this.fp.form.submit({

waitMsg:'正在保存。。。',


url:this.baseUrl+"?cmd="+(id?"Update":"Save"),


method:'POST',


success:function(form_instance_create, action) {


Ext.MessageBox.alert('友情提示', action.result.info);

},

failure:function(form_instance_create1, action1){


Ext.MessageBox.alert('友情提示', action1.result.info);


},


scope:this

});

},
//删除

removeData:function(){

this.remove('plantID');

} ,

//创建新建和修改的表单
createForm:function(){

var formPanel=new Ext.form.FormPanel({

frame:true,

labelWidth:60,

labelAlign:'right',

items:[{

xtype:'fieldset',

title:'基本信息',

autoHeight:true,

defaults:{xtype:"textfield",width:300},

items:[

{xtype:"hidden",name:"ID"},

{fieldLabel:'编号',name:'plantID'},

{fieldLabel:'名称',name:'plantName'}]

}]

});

return formPanel;

},
//创建放置表单的窗口，见上图新增和修改的效果

createWin:function()

{


return this.initWin(438,180,"污水厂管理");

//创建新增、添加面板
},

//指定JSON数据的mapping


storeMapping:["plantID","plantName"],

//初始化界面

initComponent : function(){

var sm = new Ext.grid.CheckboxSelectionModel();

this.cm=new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),//获得行号

sm,
//定义GRID的表头信息


{header: "污水厂编号", sortable:true,width: 100, dataIndex:"plantID"},

{header: "污水厂名称", sortable:true,width: 200, dataIndex:"plantName"}

]);


AddPlantPanel.superclass.initComponent.call(this);

}
});

这样就完成了一个能应用到实际中的CRUD面板，效果见下图
1.2
与用户实现交互和与程序后台实现通信

EXT的组件在执行时是从initComponent开始的
我们来看看AddPlantPanel这个具体的CRUD面板的执行过程
initComponent : function(){

var sm = new Ext.grid.CheckboxSelectionModel();

this.cm=new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),//获得行号

sm,
//定义GRID的表头信息


{header: "污水厂编号", sortable:true,width: 100, dataIndex:"plantID"},

{header: "污水厂名称", sortable:true,width: 200, dataIndex:"plantName"}

]);


AddPlantPanel.superclass.initComponent.call(this);

}
    首先是定义Grid表格的相关信息,接着是调用基类的initComponent方法，注意，EXT里面调用基类的方法是用superclass.方法名.call(this);
    接着看基类方法里的initComponent
initComponent : function(){

       //首先是定义数据源

this.store=new Ext.data.JsonStore({

id:"Id",


url: this.baseUrl+'?cmd=List',//默认的数据源地址，继承时需要提供


root: "rows",


totalProperty:"totalCount",


remoteSort:true,




fields:this.storeMapping});


this.cm.defaultSortable=true;//开启排序


this.sm= new Ext.grid.CheckboxSelectionModel(); //选择框


Mis.Ext.CrudPanel.superclass.initComponent.call(this);//初始化panel

var viewConfig=Ext.apply({forceFit:true},this.gridViewConfig);  //添加配置信息
        //Grid表格

this.grid=new Ext.grid.GridPanel({

store: this.store,

cm: this.cm,

sm:this.sm,

trackMouseOver:false,


loadMask: true,

viewConfig:viewConfig,

tbar: [……],//顶部工具栏

bbar: new Ext.PagingToolbar({

pageSize: 10,

store: this.store,

displayInfo: true,

displayMsg: '显示第 {0} - {1} 条记录，共 {2}条记录',

emptyMsg: "没有记录"

})//底部工具栏，放置分页信息


            
});
//双击时执行修改


this.grid.on("celldblclick",this.edit,this);



this.add(this.grid); //将Grid表格添加到panel内，很重要



this.store.load({params:{start:0,limit:10}});//Grid表格生成后，接着是加载数据，这里是与服务器端通信的关键
上面代码与服务器通讯的关键在于url: this.baseUrl+'?cmd=List',和this.store.load({params:{start:0,limit:10}});
    url:指定了数据源的地址，在页面初始化时EXT调用this.store.load方法从this.baseUrl+'?cmd=List获取数据，参数为start=0&limit=10，即从 Plant.aspx?cmd=List& start=0&limit=10获取数据
当请求到达服务器端Plant.aspx?cmd=List& start=0&limit=10时（毕业设计用的.NET，其实后台都很简单），下面的代码执行
if(Request.Params["cmd"].ToString()=="List")

{

int start =Convert.ToInt32(Request.Params["start"].ToString());

int
limit = Convert.ToInt32(Request.Params["limit"].ToString());

string json = pnt.GetJsonAll(start, limit, "");

Response.Write(json);

}
//ps这是c#，php的以前发过，自己去找

上面的代码生成了一段JSON数据
{'totalCount':'5','rows': [{"plantID":"8","plantName":"ss"},{"plantID":"7","plantName":"7号污水处理厂修改 banben"},{"plantID":"23","plantName":"222"}, {"plantID":"22","plantName":"22"},{"plantID":"15","plantName":"15号污水处理厂"}]}

 原文地址：http://www.phpchina.com/bbs/thread-63137-1-1.html