Ext与后台服务器的交互操作.doc
文本预览下载声明
Ext与后台服务器的交互操作
EXT做为与用户交互的前端，其功能可以概括为：生成用户界面，与用户实现交互，并与程序(.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 style=FONT-SIZE：xx-small；FONT-FAMILY：plantID)；
this.fp.form.setValues({ID：id})；
}
},
//保存
save：function()
{
var style=COLOR：#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：污水
显示全部