ExtJs学习资料32Ext.grid.EditorGridPanel远程数据实例.doc

1、引入ExtJs框架文件（存入Global.js文件中）document.write( );document.write();document.write();document.write();2、引入Global.js文件 .icon background:url(./images/1.gif) 0 5px no-repeat !important 3、效果图=4、JS源代码Ext.QuickTips.init();var _store=new Ext.data.JsonStore(url:./ServerFile/ListMoney.asp, root:record,fields:name:id,type:int,type,name:money,type:int, autoLoad:true);var _editType=new Ext.form.ComboBox( store:new Ext.data.SimpleStore( data:支出,收入, fields:type ),displayField:type, valueField:type, hiddenName:type, triggerAction:all, editable:false, mode:local);var _editMoney=new Ext.form.NumberField( minValue:1, maxValue:2000, allowBlank:false );var _column=new Ext.grid.ColumnModel(new Ext.grid.CheckboxSelectionModel(singleSelect:false,width:25), new Ext.grid.RowNumberer(header:序号,width:30,sortable:true),header:类型,dataIndex:type,editor:_editType,header:金额,dataIndex:money,editor:_editMoney);/*/MoneyGridPanel=Ext.extend(Ext.grid.EditorGridPanel,/-0typeCombo:null,conn:new Ext.data.Connection(), /更新信息连接对象1conn2:new Ext.data.Connection(),/插入信息连接对象2inserted:, iconCls:icon,constructor:function()/-1this.typeCombo=new Ext.form.ComboBox(store:new Ext.data.SimpleStore( data:支出,收入,全部, fields:type ),width:80, triggerAction:all, displayField:type, mode:local, value:全部, editable:false,listeners:select:fn:this.onViewTypeSelect,scope:this /将当前对象作为事件的参数及作用域);MoneyGridPanel.superclass.constructor.call(this,/-2title:个人理财情况一览表, cm:_column, store:_store, width:400, height:240, collapsible:true,titleCollapse:true, renderTo:Ext.getBody(), frame:true,sm:new Ext.grid.RowSelectionModel(singleSelect:true),viewConfig:forceFit:true,tbar: text:远程保存/更新, handler:this.onButtonClick,scope:this /作用域及对象作为参数传入相应的方法中且scope不能省略,-, text:删除记录,handler:this.onRemoveButtonClick,scope:this,-,查看方式:,this.typeCombo,-,text:添加新记录,handler:this.onInsertButtonClick,scope:this /作用域不能丢失,loadMask:true /显示加裁提示框/或:loadMask:msg:正在读取信息.);/-2,/-1onViewTypeSelect:function(_combo)/当前对象作为参数传入 /alert(typeof _combo); /alert(_combo.getValue(); /alert(this.store);if(_combo.getValue()!=全部)this.store.filter(type,_combo.getValue();elsethis.getStore().clearFilter();,onCommitChanges:function()this.getStore().commitChanges();,onrejectChanges:function()this.store.rejectChanges();,onRemoveButtonClick:function()var _sm=this.getSelectionModel();tryif(_sm.getCount()0)Ext.Msg.confirm(确认删除,要删除该条记录吗?,this.onRemoveRecord,this);elsethrow Error(尚未选定一条记录);catch(_err)Ext.Msg.alert(系统提示,_err.description);,onRemoveRecord:function(btnId) /alert(btnId); /alert(this.constructor);if(btnId=yes)var _sm=this.getSelectionModel(); var _record=_sm.getSelected();/alert(_record.get(id);/删除侦听事件this.conn2.un(requestcomplete,this.onSaveInsertData,this);if(_record.get(id)!=)/删除服务器端的记录集this.conn.request( url:./ServerFile/DeleteMoney.asp, params:id:_record.get(id),success:function(_response)this.getStore().remove(_record); Ext.Msg.alert(系统提示,删除成功);,failure:function(_response) Ext.Msg.alert(系统提示,删除失败); , scope:this /作用域不能丢失);else/清除未提交到服务器端的记录集 /alert(this.inserted.length);this.getStore().remove(_record);/从当前数据记录集中清除选中的记录this.inserted.remove(_record);/从临时记录集中清除新添加而没有提交到服务器端记录this.getStore().modified.remove(_record); /清除更改后而没有提交到服务器端记录,onButtonClick:function(btnId)/modified:一个包含键和值的对象数组，它存储了所有被修改过的字段的原来的值，如果没有字段被修改，则为nullvar _modiRecord=this.getStore().modified; /alert(_modiRecord.length);if(_modiRecord.length0)var _temp; var temp=; var temp2=for(var i=0;i0)this.conn.request(url:./ServerFile/UpdateMoney.asp,success:function(_conn,_response)this.onCommitChanges(); Ext.Msg.alert(系统提示,批处理更新成功); temp=;,failure:function(_conn,_response)/this.onrejectChanges();Ext.Msg.alert(系统提示,批处理更新失败);,scope:this, /作用域不能丢失/encode(Mixed o):格式化成JSON字符串/decode(String json):JSON字符串转变为JSON对象params:content:Ext.util.JSON.encode(temp);for(var _i=0;_i0)/添加侦听事件this.conn2.on(requestcomplete,this.onSaveInsertData,this);this.conn2.request(url:./ServerFile/InsertMoney.asp,success:function(_conn,_response)this.onCommitChanges();temp2=;Ext.Msg.alert(系统提示,批处理添加成功);,failure:function(_conn,_response) /this.onrejectChanges();Ext.Msg.alert(系统提示,批处理添加失败);,scope:this, /作用域不能丢失/encode(Mixed o):格式化成JSON字符串 ，decode(String json):JSON字符串转变为JSON对象params:content:Ext.util.JSON.encode(temp2);this.onViewTypeSelect(this.typeCombo); /getModifiedRecords():获得最后一次提交之后被外部修改过的Record数组/或是用modified属性代替getModifiedRecords()方法/*var _mr=this.store.getModifiedRecords();/alert(_mr.length);var temp=; var _temp;for(var i=0;i_mr.length;i+) /temp.push(_mri.data); /显示被修改的记录信息(包含未被修改的内容)/Ext.apply:将记录信息id附加到修改后,保存原始值的记录集上/_mri.modified:存储被修改前的记录信息(不包含未被修改的内容)_temp=Ext.apply(_mri.modified,id:_mri.get(id);temp.push(_temp);alert(Ext.encode(temp);*/,onInsertButtonClick:function()var _r=new Ext.data.Record( id:, type:, money:0 );/终止所有当前正在进行的编辑this.stopEditing(); this.getStore().add(_r);_r.set(type,支出); /重新分配值可以显示更新提示图标_r.set(money,1);this.inserted.push(_r); /将新添加的对象数据存入到临时数组中 /alert(Ext.encode(this.inserted0.data);/开始编辑指定的row/columnthis.startEditing(this.store.getCount()-1,0); ,onSaveInsertData:function(_conn,_response)var temp=; var obj=Ext.d