Ext.grid.column.Action 是 Ext.grid.column.Column的子类,用来在Grid的单元格里渲染一个或多个图标。 每个图标均可自定义点击处理事件。
var store = Ext.create('Ext.data.Store',{ fields:['userName','loginName'],
data:[{userName:"Michael", loginName:"Scott"},
{userName:"Dwight", 'loginName:"Schrute"},
{userName:"Jim", loginName:"Halpert"}]});
var grid = Ext.create('Ext.grid.Panel',{
store:store,
columns:[{
text:'姓名',
dataIndex:'userName'
},{
text:'用户名',
dataIndex:'loginName'
},{
xtype:'actioncolumn',
width:50,
items:[{
icon:'extjs/examples/shared/icons/fam/cog_edit.png',
handler:function(grid, rowIndex, colIndex){ var record = grid.store.getAt(rowIndex); alert("edit" + record.get('userName')); }
},{
icon:'extjs/examples/restful/images/delete.png',
tooltip:'Delete',
handler:function(grid, rowIndex, colIndex){var rec = grid.getStore().getAt(rowIndex);
alert("Terminate "+ rec.get('firstname'));}}]
}],
renderTo:Ext.getBody();
});
对于用户操作表格的方式,目前主要是两种:一是使用表格的toolbar添加 crud按钮,二是使用actioncolumn列。按钮方式提供了批量操作表格记录的方式。actioncolumn则直接操作单条记录。我推荐对于单条记录的操作如查看详情、修改记录、删除单条记录采用actioncolumn,而像批量删除这样的批量操作采用 表头按钮。当然具体情况还得具体分析。