ExtJs學(xué)習(xí)資料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) / 對性別進行數(shù)據(jù)映射 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 之間的數(shù)字 ）"," ageValidMask":/0-9/i

7、); /*/personInfoPanel =Ext. extend (,/1constructor :function(_cfg)/0if(_cfg=null) /_cfg不為 null 時_cfg=;Ext. apply (this ,_cfg); / 應(yīng)用于當(dāng)前實例本身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",/ 設(shè)計時有效 frame :true, / 設(shè)計時有效 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: 這個成員用來定義新的子類的構(gòu)造函數(shù) , 并且被返回/ 如果沒有指定這個成員 , 將生成并返回一個新的的構(gòu)造函數(shù) , 在這個構(gòu)造函數(shù)中 ,/ 僅僅使用傳遞進來的參數(shù)調(diào)用父類的構(gòu)造函數(shù)(來生成子類實例)

12、 。 constructor :function()/1this. form =new personInfoPanel ();/* 每個函數(shù)都有一個 prototype 屬性，構(gòu)造函數(shù)也是函數(shù)，所以也有 prototype 屬性。 prototype 屬性在定義函數(shù)的時候會自 動創(chuàng)建并初始化 . 也就是說 , 在寫下 RectAngle=function(widht,height)/.的時候 ,RectAngle 的 prototype 屬性就已經(jīng)被創(chuàng)建了 , 這個時候 prototype 里面只有一個屬性 , 它就是 constructor( 構(gòu)造器 ), 這個 constructor 指回

13、了 RectAngle 函數(shù)本身。 這樣就形成了一個圈一樣的鏈條 */,/2plain :true, width :320, autoHeight :true, items :this.form, closeAction modal :true, / 設(shè)計(或運行 )時有效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 / 觸發(fā) submit 事件(參數(shù):事件名稱 ,作用域,記錄集)=2與4對應(yīng)比較 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 (); / 盡量與在構(gòu)造函數(shù)中:"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)" 系統(tǒng)提示 ",_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 / 觸發(fā)窗口的 submit 事件(參數(shù):事件

20、名,回調(diào)函數(shù) ,作用域)=3" submit ",this.onInsertWinSubmit,this);" submit ",this.onUpdateWinSubmit,this);this. addEvents (" rowselect ");,/1insert :function(_record)/ 插入數(shù)據(jù)記錄事件方法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();/ 清除修改標(biāo)記 this. fireEvent (" rowselect ",_sr); catch(_err)" 系統(tǒng)提示 ",_err.description);,remove :function()trythis. getStore (). remove(this. getSelected (); /this.getFirstRow(); this. fireEvent (" rowselect ",ne

22、w name:"", age:"", sexValue :1 ); catch(_err)" 系統(tǒng)提示 ",_err.description);,/ 提交數(shù)據(jù)事件方法 (參數(shù):作用域 ,記錄集 )=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(