ExtJs4中gird列中增加操作列，并给操作按钮绑定事件

为什么80%的码农都做不了架构师？>>>   

在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);
    }
}]

在controller控制层中，在来编写itemclick的事件：

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...
    }
}

转载于:https://my.oschina.net/mayude/blog/592764