EXT学习经验分享：深刻理解EXT与服务器端的交互
时间：2008-09-18
来源：互联网
EXT是一款强大的AJAX框架，其UI设计非常华丽，所以在对UI要求高的项目中可以使用！
前面一段时间发了一篇封装的EXT CRUD面板，地址为http://www.phpchina.com/bbs/thread-59552-1-1.html
只是单纯的贴出了代码，对于其中的运行原理并未提及到，这篇文章将分享该CRUD面板实现原理，好了，不废话，正式开始。
下面的内容是毕业论文中的一部分，所以大家看看就是
EXT做为与用户交互的前端，其功能可以概括为：生成用户界面，与用户实现交互，并与程序（PHP,.NET等）后台通信来完成与用户的交互。下面就这几个功能的实现原理做介绍。
1.1
生成用户界面
EXT别广泛接受认可的原因之一便是他拥有良好的用户外观。
一个系统中最主要的功能便是实现CRUD（新增，读取，更新，删除），同时还有查询。为了将这些功能集中在一起，特意封装了一个EXT的CRUD面板，将这些常用的功能封装成一个类，以便创建易用性良好的界面。该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面板，效果见下图
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.Js****tore({
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, "");
Resp****e.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号污水处理厂"}]}
EXT读取上面的JSON，兵将数据显示在表格中，这是与服务器的第一次通信
效果如下
=700) window.open('http://bbs.phpchina.com/images/default/attachimg.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" > =700) window.open('http://bbs.phpchina.com/attachments/month_0805/20080521_f756529c552e0ec2544fPoj9YRtisjqu.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" > =700) window.open('http://bbs.phpchina.com/images/attachic****/image.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >show.JPG (19.7 KB)
主要流程
=700) window.open('http://bbs.phpchina.com/images/default/attachimg.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" > =700) window.open('http://bbs.phpchina.com/attachments/month_0805/20080521_851f09b87169b6462054IL8K1BoYAC3L.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" > =700) window.open('http://bbs.phpchina.com/images/attachic****/image.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >1111.JPG (42.77 KB)
页面呈现给用户后接着就是与用户执行交互。
在Mis.Ext.CrudPane基类的初始化函数initComponent中有下面这段代码
tbar: [{
id:'addButton',
text: '新增',
iconCls:'addIconCss',
tooltip:'添加新纪录',
handler: this.create,
scope:this
},'-',//'-'给工具栏按钮之间添加'|'
{
id:'editButton',
text:'编辑',
iconCls:'editIconCss',
tooltip:'修改记录',
handler: this.edit,
scope:this
},'-',
{
text:'删除',
iconCls:'deleteIconCss',
tooltip:'删除所选中的信息',
handler: this.removeData,
scope:this
},'-',
{
text:'刷新',
iconCls:'refreshIcon',
tooltip:'刷新纪录',
handler: this.refresh,
scope:this
},'->',//'->'代表让工具栏按钮到右边去
'Search: ',this.name,
{
text: '查询',
pressed: true,
iconCls:'selectIconCss',
handler: this.search,
scope:this
},'
'
],
上面定义了面板顶部工具栏的按钮（效果见上图中的按钮），每个按钮都有一个handler，其参数是该类里的一个成员方法。当点击一个按钮时，便触发这个按钮handler对应的方法，比如点击新增，那么便会触发this.create方法，下面我们跟踪其执行路径。
见下面……
附件
=700) window.open('http://bbs.phpchina.com/images/attachic****/image.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >success.JPG (22.6 KB)
2008-5-21 22:58
=700) window.open('http://bbs.phpchina.com/attachments/month_0805/20080521_d4410b17099382671fb9oupuYyLfLaLV.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >
=700) window.open('http://bbs.phpchina.com/images/attachic****/image.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >save.JPG (23.49 KB)
2008-5-21 22:58
=700) window.open('http://bbs.phpchina.com/attachments/month_0805/20080521_5ec128cb710ad19eaceejEyBgoO62lZK.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >
=700) window.open('http://bbs.phpchina.com/images/attachic****/image.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >wushui2.jpg (30.71 KB)
2008-5-21 22:58
=700) window.open('http://bbs.phpchina.com/attachments/month_0805/20080521_4fbbc2a7a8e282c97517oBYmq9RbaWHO.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >
前面一段时间发了一篇封装的EXT CRUD面板，地址为http://www.phpchina.com/bbs/thread-59552-1-1.html
只是单纯的贴出了代码，对于其中的运行原理并未提及到，这篇文章将分享该CRUD面板实现原理，好了，不废话，正式开始。
下面的内容是毕业论文中的一部分，所以大家看看就是
EXT做为与用户交互的前端，其功能可以概括为：生成用户界面，与用户实现交互，并与程序（PHP,.NET等）后台通信来完成与用户的交互。下面就这几个功能的实现原理做介绍。
1.1
生成用户界面
EXT别广泛接受认可的原因之一便是他拥有良好的用户外观。
一个系统中最主要的功能便是实现CRUD（新增，读取，更新，删除），同时还有查询。为了将这些功能集中在一起，特意封装了一个EXT的CRUD面板，将这些常用的功能封装成一个类，以便创建易用性良好的界面。该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面板，效果见下图
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.Js****tore({
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, "");
Resp****e.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号污水处理厂"}]}
EXT读取上面的JSON，兵将数据显示在表格中，这是与服务器的第一次通信
效果如下
=700) window.open('http://bbs.phpchina.com/images/default/attachimg.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" > =700) window.open('http://bbs.phpchina.com/attachments/month_0805/20080521_f756529c552e0ec2544fPoj9YRtisjqu.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" > =700) window.open('http://bbs.phpchina.com/images/attachic****/image.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >show.JPG (19.7 KB)
主要流程
=700) window.open('http://bbs.phpchina.com/images/default/attachimg.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" > =700) window.open('http://bbs.phpchina.com/attachments/month_0805/20080521_851f09b87169b6462054IL8K1BoYAC3L.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" > =700) window.open('http://bbs.phpchina.com/images/attachic****/image.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >1111.JPG (42.77 KB)
页面呈现给用户后接着就是与用户执行交互。
在Mis.Ext.CrudPane基类的初始化函数initComponent中有下面这段代码
tbar: [{
id:'addButton',
text: '新增',
iconCls:'addIconCss',
tooltip:'添加新纪录',
handler: this.create,
scope:this
},'-',//'-'给工具栏按钮之间添加'|'
{
id:'editButton',
text:'编辑',
iconCls:'editIconCss',
tooltip:'修改记录',
handler: this.edit,
scope:this
},'-',
{
text:'删除',
iconCls:'deleteIconCss',
tooltip:'删除所选中的信息',
handler: this.removeData,
scope:this
},'-',
{
text:'刷新',
iconCls:'refreshIcon',
tooltip:'刷新纪录',
handler: this.refresh,
scope:this
},'->',//'->'代表让工具栏按钮到右边去
'Search: ',this.name,
{
text: '查询',
pressed: true,
iconCls:'selectIconCss',
handler: this.search,
scope:this
},'
'
],
上面定义了面板顶部工具栏的按钮（效果见上图中的按钮），每个按钮都有一个handler，其参数是该类里的一个成员方法。当点击一个按钮时，便触发这个按钮handler对应的方法，比如点击新增，那么便会触发this.create方法，下面我们跟踪其执行路径。
见下面……
附件
=700) window.open('http://bbs.phpchina.com/images/attachic****/image.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >success.JPG (22.6 KB)
2008-5-21 22:58
=700) window.open('http://bbs.phpchina.com/attachments/month_0805/20080521_d4410b17099382671fb9oupuYyLfLaLV.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >
=700) window.open('http://bbs.phpchina.com/images/attachic****/image.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >save.JPG (23.49 KB)
2008-5-21 22:58
=700) window.open('http://bbs.phpchina.com/attachments/month_0805/20080521_5ec128cb710ad19eaceejEyBgoO62lZK.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >
=700) window.open('http://bbs.phpchina.com/images/attachic****/image.gif');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >wushui2.jpg (30.71 KB)
2008-5-21 22:58
=700) window.open('http://bbs.phpchina.com/attachments/month_0805/20080521_4fbbc2a7a8e282c97517oBYmq9RbaWHO.jpg');" onload="if(this.offsetWidth>'700')this.width='700';if(this.offsetHeight>'700')this.height='700';" >
作者: kyabcd 发布时间: 2008-09-18
相关阅读 更多
热门阅读
-
office 2019专业增强版最新2021版激活秘钥/序列号/激活码推荐 附激活工具
阅读：74
-
如何安装mysql8.0
阅读：31
-
Word快速设置标题样式步骤详解
阅读：28
-
20+道必知必会的Vue面试题（附答案解析）
阅读：37
-
HTML如何制作表单
阅读：22
-
百词斩可以改天数吗？当然可以，4个步骤轻松修改天数！
阅读：31
-
ET文件格式和XLS格式文件之间如何转化？
阅读：24
-
react和vue的区别及优缺点是什么
阅读：121
-
支付宝人脸识别如何关闭?
阅读：21
-
腾讯微云怎么修改照片或视频备份路径?
阅读：28
