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