《ExtJs学习资料36Ext.GridEditPanel添加修改删除操作》由会员分享，可在线阅读，更多相关《ExtJs学习资料36Ext.GridEditPanel添加修改删除操作（6页珍藏版）》请在金锄头文库上搜索。
1、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.js side;function sexDisplay (_value) / 对性别进行数据映射 return (_value=0?女: 男); /*/var _cols =new
2、new , / 行号列header : 姓名 , dataIndex :name, menuDisabled :true, header: 年龄 ,dataIndex:age,menuDisabled:true,header: 性别 ,dataIndex:sexValue,menuDisabled:true,renderer :sexDisplay);var _store =newdata : 刘俊 ,30,1, 刘勇,23,1,刘玲,21,0 ,fields :name, name:age,type:int ,name:sexValue,type:int);*/ 正则表表达式验证年龄是否合法
3、Ext. apply (,ageValid :function(_v)var _age=parseInt(_v);if(_age200)return true;return false;, ageValidText: 输入的年龄不符合范围 （0-200 之间的数字 ）, ageValidMask:/0-9/i); /*/personInfoPanel =Ext. extend (,/1constructor :function(_cfg)/0if(_cfg=null) /_cfg不为 null 时_cfg=;Ext. apply (this ,_cfg); / 应用于当前实例本身var _bo
4、ol=thisreadOnly=null?false:thisreadOnly;,/2labelWidth :30, defaultType :textfield, bodyStyle :padding:5, labelAlign :right, defaults : anchor :94%,/ 注意下面的写法readOnly :_bool,baseCls :x-plain,/ 设计时有效 frame :true, / 设计时有效 items : fieldLabel : 姓名 , allowBlank :_bool, name:name, fieldLabel : 年龄 , allowBla
5、nk :_bool, name:age, vtype :ageValid, xtype :combo, fieldLabel : 性别 , hiddenName:sexValue,store :newdata :1, 男 ,0, 女 ,fields : name:sexValue,type:int ,sex),emptyText : 请选择 ., mode:local, triggerAction :all, displayField :sex, valueField :sexValue, value :1, selectOnFocus :true, readOnly :true, / 注意下
6、面的写法disabled :_bool, editable :false,typeAhead :true);/2,/0getRecord :function()if(this. getForm (). isValid () return (new ;else throw Error( 表单验证没有通过 );,setValues :function(_record) this.getForm (). loadRecord (_record); ,reset :function()this. getForm (). reset (););/1/*/PersonInfoWindow =Ext. ex
7、tend (Ext. Window,/0form :null,/constructor: 这个成员用来定义新的子类的构造函数 , 并且被返回/ 如果没有指定这个成员 , 将生成并返回一个新的的构造函数 , 在这个构造函数中 ,/ 仅仅使用传递进来的参数调用父类的构造函数(来生成子类实例) 。 constructor :function()/1this. form =new personInfoPanel ();/* 每个函数都有一个 prototype 属性，构造函数也是函数，所以也有 prototype 属性。 prototype 属性在定义函数的时候会自 动创建并初始化 . 也就是说 ,
8、在写下 RectAngle=function(widht,height)/.的时候 ,RectAngle 的 prototype 属性就已经被创建了 , 这个时候 prototype 里面只有一个属性 , 它就是 constructor( 构造器 ), 这个 constructor 指回了 RectAngle 函数本身。 这样就形成了一个圈一样的链条 */,/2plain :true, width :320, autoHeight :true, items :this.form, closeAction modal :true, / 设计(或运行 )时有效buttons : text : 确
9、定 , handler :this.onSubmitClick, scope:this, text : 取 消, handler :this.onCancelClick,scope :this);/2/ 添加 submit 事件 =1 this. addEvents ( submit );,/1close :function() ; this. hide (); , onSubmitClick :function()try / 触发 submit 事件(参数:事件名称 ,作用域,记录集)=2与4对应比较 this. fireEvent ( submit ,this,;catch(_err)re
10、turn;this. close (); /alert(Ext.encode(;, onCancelClick :function() this. close (); );/0/*/ InsertPersonInfoWindow =Ext. extend ( PersonInfoWindow ,/ 继承 PersonInfoWindow title : 添加人员信息 );/*/UpdatePersonInfoWindow =Ext. extend ( PersonInfoWindow ,title : 修改人员信息 , load :function(_record) ; ); /*/ Pers
11、onView =Ext. extend ( personInfoPanel ,/ 继承 personInfoPanel constructor :function(),renderTo :Ext.getBody(), width :350, readOnly :true););/*/GridEditPanel =Ext. extend (,/0title : 人员信息一览表 , collapsible :true, titleCollapse :true, insertWin :null,/ UpdateWin :null, constructor :function()/1this. insertWin =new InsertPers
