《ExtJs学习资料36-Ext.GridEditPanel添加修改删除操作.doc》由会员分享，可在线阅读，更多相关《ExtJs学习资料36-Ext.GridEditPanel添加修改删除操作.doc（6页珍藏版）》请在三一文库上搜索。
1、ExtJs学习资料Ext.GridEditPanel实例(添加/修改/删除操作) 2021年5月7日星期五1、引入ExtJs框架文件（存入Global.js文件中）document.write( );document.write();document.write();document.write();2、引入Global.js文件 .icon background:url(./images/3.gif) no-repeat !important 3、效果图=4、JS源代码GridEditPanel3.jsExt.QuickTips.init();Ext.form.Field.prototype
2、.msgTarget=side;/*/function sexDisplay(_value) /对性别进行数据映射return (_value=0?女:男); /*/var _cols=new Ext.grid.ColumnModel(new Ext.grid.RowNumberer(), /行号列header:姓名,dataIndex:name,menuDisabled:true,header:年龄,dataIndex:age,menuDisabled:true,header:性别,dataIndex:sexValue,menuDisabled:true,renderer:sexDispla
3、y);var _store=new Ext.data.SimpleStore(data:刘俊,30,1,刘勇,23,1,刘玲,21,0,fields:name,name:age,type:int,name:sexValue,type:int); /*/正则表表达式验证年龄是否合法Ext.apply(Ext.form.VTypes,ageValid:function(_v)if(/d+$/.test(_v)var _age=parseInt(_v);if(_age200)return true;return false;,ageValidText:输入的年龄不符合范围(0-200之间的数字),a
4、geValidMask:/0-9/i); /*/personInfoPanel=Ext.extend(Ext.form.FormPanel,/-1constructor:function(_cfg)/-0if(_cfg=null) /_cfg不为null时_cfg=;Ext.apply(this,_cfg); /应用于当前实例本身var _bool=thisreadOnly=null?false:thisreadOnly;personInfoPanel.superclass.constructor.call(this,/-2labelWidth:30, defaultType:textfiel
5、d, bodyStyle:padding:5, labelAlign:right,defaults:anchor:94%,/注意下面的写法readOnly:_bool,baseCls:x-plain,/设计时有效frame:true, /设计时有效items: fieldLabel:姓名, allowBlank:_bool, name:name, fieldLabel:年龄, allowBlank:_bool, name:age, vtype:ageValid,xtype:combo, fieldLabel:性别, hiddenName:sexValue,store:new Ext.data.
6、SimpleStore(data:1,男,0,女,fields:name:sexValue,type:int,sex),emptyText:请选择., mode:local, triggerAction:all, displayField:sex,valueField:sexValue, value:1, selectOnFocus:true, readOnly:true,/注意下面的写法disabled:_bool, editable:false, typeAhead:true);/-2,/-0getRecord:function()if(this.getForm().isValid() r
7、eturn (new Ext.data.Record(this.getForm().getValues();else throw Error(表单验证没有通过);,setValues:function(_record) this.getForm().loadRecord(_record); ,reset:function()this.getForm().reset(););/-1/*/PersonInfoWindow=Ext.extend(Ext.Window,/-0form:null,/constructor:这个成员用来定义新的子类的构造函数,并且被返回/如果没有指定这个成员,将生成并返回
8、一个新的的构造函数,在这个构造函数中,/仅仅使用传递进来的参数调用父类的构造函数（来生成子类实例）。 constructor:function()/-1this.form=new personInfoPanel();/*每个函数都有一个prototype属性，构造函数也是函数，所以也有prototype属性。prototype属性在定义函数的时候会自动创建并初始化.也就是说,在写下RectAngle=function(widht,height)/.的时候,RectAngle的prototype属性就已经被创建了,这个时候prototype里面只有一个属性,它就是constructor(构造器)
9、,这个constructor指回了RectAngle函数本身。这样就形成了一个圈一样的链条*/PersonInfoWindow.superclass.constructor.call(this,/-2plain:true, width:320, autoHeight:true, items:this.form, closeAction:hide,modal:true, /设计(或运行)时有效buttons: text:确 定, handler:this.onSubmitClick, scope:this, text:取 消, handler:this.onCancelClick, scope:
10、this);/-2/添加submit事件=1this.addEvents(submit);,/-1close:function() this.form.reset(); this.hide();,onSubmitClick:function()try/触发submit事件(参数:事件名称,作用域,记录集)=2与4对应比较this.fireEvent(submit,this,this.form.getRecord();catch(_err)return;this.close(); /alert(Ext.encode(this.form.getRecord().data);,onCancelCli
11、ck:function() this.close(); );/-0/*/InsertPersonInfoWindow=Ext.extend(PersonInfoWindow,/继承PersonInfoWindowtitle:添加人员信息); /*/UpdatePersonInfoWindow=Ext.extend(PersonInfoWindow,title:修改人员信息,load:function(_record) this.form.setValues(_record); );/*/PersonView=Ext.extend(personInfoPanel,/继承personInfoPan
12、elconstructor:function()PersonView.superclass.constructor.call(this,renderTo:Ext.getBody(), width:350, readOnly:true););/*/GridEditPanel=Ext.extend(Ext.grid.GridPanel,/-0title:人员信息一览表, collapsible:true, titleCollapse:true, insertWin:null,/先声明UpdateWin:null,constructor:function()/-1this.insertWin=new
13、 InsertPersonInfoWindow(); /尽量与在构造函数中this.UpdateWin=new UpdatePersonInfoWindow();GridEditPanel.superclass.constructor.call(this,/-2renderTo:Ext.getBody(), colModel:_cols, frame:true, store:_store, width:330, autoHeight:true,stripRows:true, enableColumnHide:false, enableColumnMove:false, enableColumn
14、Resize:false,enableHdMenu:true, stripeRows :true,tbar: text:添加信息, iconCls:icon,handler:function()this.insertWin.show();,scope:this,-, text:修改信息, iconCls:icon,handler:function()this.UpdateWin.show();trythis.UpdateWin.load(this.getSelected();catch(_err)Ext.Msg.alert(系统提示,_err.description);this.UpdateW
15、in.close();,scope:this,-,text:删除信息,iconCls:icon,handler:function()Ext.Msg.confirm(删除记录信息,确定要删除该条记录吗?,this.onRemovePerson,this);,scope:this,selModel:new Ext.grid.RowSelectionModel(singleSelect:true,listeners:rowselect:fn:this.onRowSelect,scope:this),listeners:render:function()this.getFirstRow(););/-2
16、/触发窗口的submit事件(参数:事件名,回调函数,作用域)=3this.insertWin.on(submit,this.onInsertWinSubmit,this); this.UpdateWin.on(submit,this.onUpdateWinSubmit,this);this.addEvents(rowselect);,/-1insert:function(_record)/插入数据记录事件方法this.getStore().add(_record);,update:function(_record)tryvar _sr=this.getSelected();var _data
17、=_sr.data;for(var _i in _data)_sr.set(_i,_record.get(_i);/_mit();/清除修改标记this.fireEvent(rowselect,_sr);catch(_err)Ext.Msg.alert(系统提示,_err.description);,remove:function()trythis.getStore().remove(this.getSelected(); /this.getFirstRow();this.fireEvent(rowselect,new Ext.data.Record( name:, age:, sexValu
18、e:1 );catch(_err)Ext.MessageBox.alert(系统提示,_err.description);,/提交数据事件方法(参数:作用域,记录集)=4onInsertWinSubmit:function(_win,_record)this.insert(_record); /this.getFirstRow();,onUpdateWinSubmit:function(_win,_r)this.update(_r); /this.getFirstRow();,getSelected:function(_record)var _sm=this.getSelectionModel
19、();if(_sm.getCount()=0)throw Error(请先选中记录后再操作);return _sm.getSelected();,onRemovePerson:function(_btn)if(_btn=yes)this.remove();,getFirstRow:function()this.getSelectionModel().selectFirstRow(); /选中表格中的第一行,onRowSelect:function(sm, rowIndex, record)this.fireEvent(rowselect,record););/-0/*/5、HTML源代码Ext
20、.onReady(function()/-开始-var _grid=new GridEditPanel();/_grid.on(rowselect,function()alert(ok););var _info=new PersonView();/new InsertPersonInfoWindow().show();/_grid.on(rowselect,function(_r)alert(Ext.util.JSON.encode(_r.data););_grid.on(rowselect,function(_r)/alert(Ext.util.JSON.encode(_r.data);_info.setValues(_r););/-结束-);第 6 页 / 共 6 页