ext的cuda

EXT做为与用户交互的前端，其功能可以概括为：生成用户界面，与用户实现交互，并与程序（PHP,.NET等）后台通信来完成与用户的交互。

生成用户界面 :EXT被广泛接受认可的原因之一便是他拥有良好的用户外观。

一个系统中最主要的功能便是实现CRUD（新增，读取，更新，删除），同时还有查询。为了将这些功能集中在一起，特意封装了一个EXT的CRUD面板，将这些常用的功能封装成一个类，以便创建易用性良好的界面。CRUD面板是从EXT的panel继承来的
/**

* 定义命名空间

*/
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面板