Ext与后台服务器的交互操作.docVIP

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：污水