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