EditorGridPanel

ExtJS 中的可編輯表格由類Ext.grid.EditorGridPanel 表示，xtype 為editorgrid，和gridPanel的區別就是，這個表格中的內容是可編輯的

Ext.onReady(function(){var data=[{id:1,name:'小王',email:'xiaowang@easyjf.com',sex:'男',bornDate:'1991-4-4'},{id:1,name:'小李',email:'xiaoli@easyjf.com',sex:'男',bornDate:'1992-5-6'},{id:1,name:'小蘭',email:'xiaoxiao@easyjf.com',sex:'女',bornDate:'1993-3-7'}];var store=new Ext.data.JsonStore({data:data,fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]});var colM=new Ext.grid.ColumnModel([{header:"姓名",dataIndex:"name",sortable:true,editor:new Ext.form.TextField()},{header:"性別",dataIndex:"sex"},{header:"出生日期",dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日')},{header:"電子郵件",dataIndex:"email",sortable:true,editor:new Ext.form.TextField()}]);var grid = new Ext.grid.EditorGridPanel({renderTo:"hello",title:"學生基本信息管理",height:200,width:600,cm:colM,store:store,autoExpandColumn:3}); });

為了能編輯“性別”及“出生日期”列，同樣只需要在定義該列的時候指定editor 即可。由于出生日期是日期類型，因此我們可以使用日期編輯器來編輯，“性別”一列的數據不應該讓

用戶直接輸入，而應該是通過下拉框進行選擇。日期編輯器可以直接使用Ext.form.DateField組件，下拉選擇框編輯器可以使用Ext.form.ComboBox 組件，下面是實現對性別及

出生日期等列信息編輯的代碼：

Ext.onReady(function(){var data=[{id:1,name:'小王',email:'xiaowang@easyjf.com',sex:'男',bornDate:'1991-4-4'},{id:1,name:'小李',email:'xiaoli@easyjf.com',sex:'男',bornDate:'1992-5-6'},{id:1,name:'小蘭',email:'xiaoxiao@easyjf.com',sex:'女',bornDate:'1993-3-7'}];var store=new Ext.data.JsonStore({data:data,fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}]});var colM=new Ext.grid.ColumnModel([{header:"姓名",dataIndex:"name",sortable:true,editor:new Ext.form.TextField()},{header:"性別",dataIndex:"sex",editor:new Ext.form.ComboBox({transform:"sexList",triggerAction: 'all',lazyRender:true})},{header:"出生日期",dataIndex:"bornDate",width:120,renderer:Ext.util.Format.dateRenderer('Y年m月d日'),editor:new Ext.form.DateField({format:'Y年m月d日'})},{header:"電子郵件",dataIndex:"email",sortable:true,editor:new Ext.form.TextField()}]);var grid = new Ext.grid.EditorGridPanel({renderTo:"hello",title:"學生基本信息管理",height:200,width:600,cm:colM,store:store,autoExpandColumn:3,clicksToEdit:1}); }); 注意在定義EditorGridPanel 的時候，我們增加了一個屬性“clicksToEdit:1”，表示點擊一次單元格即觸發編輯，因為默認情況下該值為2，需要雙擊單元格才能編輯。為了給
ComboBox 中填充數據，我們使用設置了該組件的transform 配置屬性值為sexList，sexList是一個傳統的<select>框，我們需要在html 頁面中直接定義，代碼如下：

<select id="sexList" name="sexList"> <option>男</option> <option>女</option> </select>

ComboBox的其他重要參數

1.valueField:"valuefield"//value值字段
2.displayField："field"?//顯示文本字段
3.editable：false//false則不可編輯，默認為true
4.triggerAction:"all"//請設置為"all",否則默認為"query"的情況下，你選擇某個值后，再此下拉時，只出現匹配選項，如果設為"all"的話，每次下拉均顯示全部選項
5.hiddenName:string?//真正提交時此combo的name，請一定要注意
6.typeAhead:true,//延時查詢，與下面的參數配合
7.typeAheadDelay:3000,//默認250

總結

以上是生活随笔為你收集整理的ext2.0中EditorGridPanel （8）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。