在ExtJs4中，grid元件有Ext.grid.column.Action元件，所有要增加操作列，只需指定列的xtype為actioncolumn即可，例如：

Ext.create('Ext.grid.Panel', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 400,
    store: Ext.create('Ext.data.Store', {
        fields: ['id', 'name'],
        data: [
            {id: '1', name: '張三'},
            {id: '2', name: '李四'}
        ]
    }),
    columns: [
        {text: '姓名', dataIndex: 'name', flex: 1},
        {
            xtype: 'actioncolumn',
            text: '操作',
            width: 100,
            tdCls: 'action',
            items: [{
                icon: 'images/edit.png',
                tooltip: '編輯',
                handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {
                    // do something...
                }
            }, {
                icon: 'images/delete.png',
                tooltip: '刪除',
                handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {
                    // do something...
                }
            }]
	}
    ]
});
 

但如果採用Ext MVC來編寫的話，這樣的寫法就不太適合，要想把handler中的處理移到controller控制層裡面去，就必須給handler繫結觸發事件：

items:[{
    action: 'edit',
    icon: 'images/edit.png',
    tooltip: '編輯',
    handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {
        this.fireEvent('itemclick', this, grid, rowIndex, colIndex, node, e, record, rowEl);
    }
}, {
    action: 'delete',
    icon: 'images/delete.png',
    tooltip: '刪除',
    handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {   
        this.fireEvent('itemclick', this, grid, rowIndex, colIndex, node, e, record, rowEl);
    }
}]
 

init: function () {
    this.control({
        'grid actioncolumn': {
            itemclick: this.actionBtnEvent
        }
    })
},
actionBtnEvent: function (column, grid, rowIndex, colIndex, node, e, record, rowEl) {
    if (node.action == 'edit') {
        // do something...
    } else if (node.action == 'delete') {
        // do something...
    }
}