可編輯表格是指可以直接在表格的單元格對表格的數據進行編輯，ExtJS中的可編輯表格由類Ext.grid.EditorGridPanel表示，xtype為editorgrid。使用EditorGridPanel與使用普通的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});});

??????? 上面的程序首先定義了一個包含學生信息的對象數組，然后創建了一個JsonStore，在創建這個store的時候，指定bornDate列的類型為日期date類型，并使用dateFormat來指定日期信息的格式為"Y-n-j"，Y代表年，n代表月,j代表日期。定義表格列模型的時候，對于“姓名”及“電子郵件”列我們使用editor來定義該列使用的編輯器，這里是使用Ext.form.TextField，最后使用new Ext.grid.EditorGridPanel(…)來創建一個可編輯的表格。執行上面的程序可以生成一個表格，雙擊表格中的“姓名”、或“電子郵件”單元格中的信息可以觸發單元格的編輯，可以在單元格的文本框中直接編輯表格中的內容，修改過的單元格會有特殊的標記，如下圖所示：

??????? 為了能編輯“性別”及“出生日期”列，同樣只需要在定義該列的時候指定editor即可。由于出生日期是日期類型，因此我們可以使用日期編輯器來編輯，“性別”一列的數據不應該讓用戶直接輸入，而應該是通過下拉框進行選擇。日期編輯器可以直接使用Ext.form.DateField組件，下拉選擇框編輯器可以使用Ext.form.ComboBox組件，下面是實現對性別及出生日期等列信息編輯的代碼：

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是一個傳統的

框，我們需要在html頁面中直接定義，代碼如下：

男

女

?

??????? 執行上面的程序，我們可以得到一個能對表格中所有數據進行編輯的表格了。點擊上面的“性別”一列的單元格時，會出現一個下拉選擇框，點擊“出生日期”一列的單元格時，會出現一個日期數據選擇框，如圖xxxx所示：

(編輯性別列中的數據)

(編輯出生日期列中的數據)

?

??????? 那么如何保存編輯后的數據呢？答案是直接使用afteredit事件。當對一個單元格進行編輯完之后，就會觸發afteredit事件，可以通過該事件處理函數來處理單元格的信息編輯。比如在http://wlr.easyjf.com這個單用戶blog示例中，當我們編輯一個日志目錄的時候，需要把編輯后的數據保存到服務器，代碼如下：

this.grid.on("afteredit",this.afterEdit,this);… afterEdit:function(obj){var r=obj.record;var id=r.get("id");var name=r.get("name");var c=this.record2obj(r);var tree=this.tree;var node=tree.getSelectionModel().getSelectedNode(); if(node && node.id!="root")c.parentId=node.id;if(id=="-1" && name!=""){?topicCategoryService.addTopicCategory(c,function(id){?if(id)r.set("id",id);if(!node)node=tree.root;node.appendChild(new Ext.tree.TreeNode({id:id,text:c.name,leaf:true}));node.getUI().removeClass('x-tree-node-leaf');node.getUI().addClass('x-tree-node-expanded');node.expand();});}else if(name!=""){?topicCategoryService.updateTopicCategory(r.get("id"),c,function(ret){ if(ret)tree.getNodeById(r.get("id")).setText(c.name);});}}

??????? 關于可編輯表格控件的詳細說明，請參考wlr.easyjf.com中的VIP文檔《ExtJS可編輯表格EditorGridPanel詳解》。

總結

以上是生活随笔為你收集整理的ExtJS2.0实用简明教程——可编辑表格EditorGridPanel的全部內容，希望文章能夠幫你解決所遇到的問題。

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