可編輯表格是指可以直接在表格的儲存格對錶格的資料進行編輯，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 //單擊可編輯 預設是2 為雙擊
}); 注意在定義EditorGridPanel的時候，我們增加了一個屬性“clicksToEdit:1”，表示點擊一次儲存格即觸發編輯，因為預設情況下 該值為2，需要雙擊儲存格才能編輯。為了給ComboBox中填充資料，我們使用設定了該組件的transform配置屬性值為 sexList，sexList是一個傳統的<select>框，我們需要在html頁面中直接定義，代碼如下： <select. id="sexList" name="sexList">
<option>男</option>
<option>女</option>
</select> 執行上面的程式，我們可以得到一個能對錶格中所有資料進行編輯的表格了。點擊上面的“性別”一列的儲存格時，會出現一個下拉選擇框，點擊“出生日期”一列的儲存格時，會出現一個日期資料選擇框，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詳解》。 |
