Extjs4 中使用actioncolumn 显示表格的操作列

      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，而像批量删除这样的批量操作采用 表头按钮。当然具体情况还得具体分析。