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

柔光的暖阳◎ 2022-01-15 14:21 129阅读 0赞

[为什么80%的码农都做不了架构师？>>> ][80_]  ![hot3.png][]

在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

[80_]: https://my.oschina.net/u/2663968/blog/3051541
[hot3.png]: /images/20220115/f4b03d686f8640caa559af740461c1ed.png