ExtJs学习资料36Ext.GridEditPanel添加修改删除操作

1、1、引入 ExtJs 框架文件(存入 Global.js 文件中)document.write("<link rel="stylesheet" type="text/css" href="./extjs/resources/css/ext-all.css"/> "); document.write("<script type="text/javascript" src="./extjs/adapter/ext/ext-base.js"><

2、;/script>"); document.write("<script type="text/javascript" src="./extjs/ext-all.js"></script>"); document.write("<script type="text/javascript" src="./extjs/ext-lang-zh_CN.js"></script>");2、引入 Global.js 文件&l

3、t;script type="text/javascript" src="Global.js"></script><script type="text/javascript" src="./js/GridEditPanel3.js"></script><style type="text/css"> .icon background:url(./images/3.gif) no-repeat !important </style>3

4、、效果图 4、JS 源代码GridEditPanel3.js "side"function sexDisplay (_value) / 对性别进行数据映射 return (_value=0?"女":" 男"); /*/var _cols =newnew , / 行号列header :" 姓名 ", dataIndex :"name", menuDisabled :true, header:" 年龄 ",dataIndex:"age",menuDisable

5、d:true,header:" 性别 ",dataIndex:"sexValue",menuDisabled:true,renderer :sexDisplay);var _store =newdata :" 刘俊 ","30","1"," 刘勇","23","1","刘玲","21","0" ,fields :"name", name:"age&

6、quot;,type:"int" ,name:"sexValue",type:"int");*/ 正则表表达式验证年龄是否合法Ext. apply (,"ageValid ":function(_v)var _age=parseInt(_v);if(_age<200)return true;return false;," ageValidText":" 输入的年龄不符合范围 （0-200 之间的数字 ）"," ageValidMask":/0-9/i

7、); /*/personInfoPanel =Ext. extend (,/1constructor :function(_cfg)/0if(_cfg=null) /_cfg不为 null 时_cfg=;Ext. apply (this ,_cfg); / 应用于当前实例本身var _bool=this"readOnly"=null?false:this"readOnly",/2labelWidth :30, defaultType :"textfield", bodyStyle :"padding:5", lab

8、elAlign :"right", defaults : anchor :"94%",/ 注意下面的写法readOnly :_bool,baseCls :"x-plain",/ 设计时有效 frame :true, / 设计时有效 items : fieldLabel :" 姓名 ", allowBlank :_bool, name:"name", fieldLabel :" 年龄 ", allowBlank :_bool, name:"age", vty

9、pe :"ageValid", xtype :"combo", fieldLabel :" 性别 ", hiddenName:"sexValue",store :newdata :1," 男 ",0," 女 ",fields : name:"sexValue",type:"int" ,"sex"),emptyText :" 请选择 .", mode:"local", trigg

10、erAction :"all", displayField :"sex", valueField :"sexValue", value :1, selectOnFocus :true, readOnly :true, / 注意下面的写法disabled :_bool, editable :false,typeAhead :true);/2,/0getRecord :function()if(this. getForm (). isValid () return (new ;else throw Error(" 表单验证没有通

11、过 ");,setValues :function(_record) this.getForm (). loadRecord (_record); ,reset :function()this. getForm (). reset (););/1/*/PersonInfoWindow =Ext. extend (Ext. Window,/0form :null,/constructor: 这个成员用来定义新的子类的构造函数 , 并且被返回/ 如果没有指定这个成员 , 将生成并返回一个新的的构造函数 , 在这个构造函数中 ,/ 仅仅使用传递进来的参数调用父类的构造函数(来生成子类实例)

12、 。 constructor :function()/1this. form =new personInfoPanel ();/* 每个函数都有一个 prototype 属性，构造函数也是函数，所以也有 prototype 属性。 prototype 属性在定义函数的时候会自 动创建并初始化 . 也就是说 , 在写下 RectAngle=function(widht,height)/.的时候 ,RectAngle 的 prototype 属性就已经被创建了 , 这个时候 prototype 里面只有一个属性 , 它就是 constructor( 构造器 ), 这个 constructor 指回

13、了 RectAngle 函数本身。 这样就形成了一个圈一样的链条 */,/2plain :true, width :320, autoHeight :true, items :this.form, closeAction modal :true, / 设计(或运行 )时有效buttons : text :" 确 定 ", handler :this.onSubmitClick, scope:this, text :" 取 消", handler :this.onCancelClick,scope :this);/2/ 添加 submit 事件 =1 th

14、is. addEvents (" submit ");,/1close :function() ; this. hide (); , onSubmitClick :function()try / 触发 submit 事件(参数:事件名称 ,作用域,记录集)=2与4对应比较 this. fireEvent (" submit ",this,;catch(_err)return;this. close (); /alert(Ext.encode(;, onCancelClick :function() this. close (); );/0/*/ Inse

15、rtPersonInfoWindow =Ext. extend ( PersonInfoWindow ,/ 继承 PersonInfoWindow title :" 添加人员信息 ");/*/UpdatePersonInfoWindow =Ext. extend ( PersonInfoWindow ,title :" 修改人员信息 ", load :function(_record) ; ); /*/ PersonView =Ext. extend ( personInfoPanel ,/ 继承 personInfoPanel constructor

16、: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 InsertPersonInfoWindow (); / 尽量与在构造函数中:"hid

17、e",先声明this. UpdateWin=new UpdatePersonInfoWindow ();,/2renderTo :Ext.getBody(),colModel :_cols,frame :true, store :_store, width :330, autoHeight :true,stripRows :true, enableColumnHide :false,enableColumnMove:false, enableColumnResize :false,enableHdMenu:true, stripeRows :true, tbar : text :&q

18、uot; 添加信息 ", iconCls :"icon", handler :function(),scope:this,"-", text :" 修改信息 ", iconCls :"icon", handler :function()JtryJ catch(_err)" 系统提示 ",_err.description);, scope:this,"-",text :" 删除信息 ", iconCls :"icon", han

19、dler :function()" 删除记录信息 "," 确定要删除该条记录吗 ?",this. onRemovePerson,this); , scope:this,selModel :new singleSelect :true, listeners :"rowselect ":fn :this. onRowSelect , scope :this),listeners :" render ":function()this. getFirstRow (););/2 / 触发窗口的 submit 事件(参数:事件

20、名,回调函数 ,作用域)=3" submit ",this.onInsertWinSubmit,this);" submit ",this.onUpdateWinSubmit,this);this. addEvents (" rowselect ");,/1insert :function(_record)/ 插入数据记录事件方法this. getStore (). add(_record);,update :function(_record)tryvar _sr=this. getSelected ();var _data=_sr.

21、data;for(var _i in _data)_sr. set (_i,_record.get(_i);/_mit();/ 清除修改标记 this. fireEvent (" rowselect ",_sr); catch(_err)" 系统提示 ",_err.description);,remove :function()trythis. getStore (). remove(this. getSelected (); /this.getFirstRow(); this. fireEvent (" rowselect ",ne

22、w name:"", age:"", sexValue :1 ); catch(_err)" 系统提示 ",_err.description);,/ 提交数据事件方法 (参数:作用域 ,记录集 )=4 onInsertWinSubmit :function(_win,_record)this. insert (_record); /this.getFirstRow();, onUpdateWinSubmit :function(_win,_r) this. update (_r); /this.getFirstRow();,getSelected :function(_record)var _sm=this. getSelectionModel ();if(_sm.getCount(