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