ExtJs gridPanel行添加操作按钮的方法

需求

在gridPanel中添加操作列是非常常见的，实现如下效果

在ExtJs中有两种添加按钮的方法：

一、如第二三列

• xtype: ‘actioncolumn’

{
    text: '操作2',
    xtype: 'actioncolumn',
    align:"center",
    width: 100,
    items: [
        {
            tooltip: '更改',
            icon: "images/edit.png",
            handler: function(grid, rowIndex, colIndex) {
                alert(1);
            }
        }
    ]
},

二、如最后一列

{
  text: '查看明细',
    xtype: 'gridcolumn',
    width: 150,
    align: 'center',
    renderer: function (value, metaData, record) {
        var id = metaData.record.id;
        metaData.tdAttr = 'data-qtip="查看当前明细"';
        Ext.defer(function () {
            Ext.widget('button', {
                renderTo: id,
                height: 20,
                width: 50,
                // style:"margin-left:5px;background:blue;",
                text: '明细',
                handler: function () {
                    //相应事件方法
                    alert(1);
                }
            });
        }, 50);
        return Ext.String.format('<div id="{0}"></div>', id);
    }
}

三、添加多个按钮时

{
   xtype: 'gridcolumn',
    width: 180,
    dataIndex: 'operate',
    text: '操作项',
    align: 'center',
    renderer: function (value, metaData, record) {
        var bflag = false;
        var id = metaData.record.id;//Ext.id();
        metaData.tdAttr = 'data-qtip="提示信息"';
        Ext.defer(function () {
            Ext.widget('toolbar', {
                renderTo: id,
                dock: 'top',
                style: 'margin:0',
                ui: 'footer',
                height: 40,
                width: 150,
                items: [
                    {
                        xtype: 'button',
                        width: 50,
                        height: 25,
                        text: '操作按钮1',
                        disabled: bflag,
                        handler: function () {
                                 //相应事件方法
                        }
                    },
                    {
                        xtype: 'button',
                        width: 80,
                        height: 25,
                        text: '操作按钮2',
                        handler: function () {
                               //相应事件方法
                        }
                    }
                ]
            });
        }, 50);
        return Ext.String.format('<div id="{0}"></div>', id);
    }
}