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

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

[javascript]  view plain copy

1. Ext.create('Ext.grid.Panel', {  
2.     renderTo: Ext.getBody(),  
3.     width: 500,  
4.     height: 400,  
5.     store: Ext.create('Ext.data.Store', {  
6.         fields: ['id', 'name'],  
7.         data: [  
8.             {id: '1', name: '张三'},  
9.             {id: '2', name: '李四'}  
10.         ]  
11.     }),  
12.     columns: [  
13.         {text: '姓名', dataIndex: 'name', flex: 1},  
14.         {  
15.             xtype: 'actioncolumn',  
16.             text: '操作',  
17.             width: 100,  
18.             tdCls: 'action',  
19.             items: [{  
20.                 icon: 'images/edit.png',  
21.                 tooltip: '编辑',  
22.                 handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {  
23.                     // do something...  
24.                 }  
25.             }, {  
26.                 icon: 'images/delete.png',  
27.                 tooltip: '删除',  
28.                 handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {  
29.                     // do something...  
30.                 }  
31.             }]  
32.     }  
33.     ]  
34. });  

但如果采用Ext MVC来编写的话，这样的写法就不太适合，要想把handler中的处理移到controller控制层里面去，就必须给handler绑定触发事件：

[javascript]  view plain copy

1. items:[{  
2.     action: 'edit',  
3.     icon: 'images/edit.png',  
4.     tooltip: '编辑',  
5.     handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {  
6.         this.fireEvent('itemclick', this, grid, rowIndex, colIndex, node, e, record, rowEl);  
7.     }  
8. }, {  
9.     action: 'delete',  
10.     icon: 'images/delete.png',  
11.     tooltip: '删除',  
12.     handler: function (grid, rowIndex, colIndex, node, e, record, rowEl) {     
13.         this.fireEvent('itemclick', this, grid, rowIndex, colIndex, node, e, record, rowEl);  
14.     }  
15. }]  

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

[javascript]  view plain copy

1. init: function () {  
2.     this.control({  
3.         'grid actioncolumn': {  
4.             itemclick: this.actionBtnEvent  
5.         }  
6.     })  
7. },  
8. actionBtnEvent: function (column, grid, rowIndex, colIndex, node, e, record, rowEl) {  
9.     if (node.action == 'edit') {  
10.         // do something...  
11.     } else if (node.action == 'delete') {  
12.         // do something...  
13.     }  
14. }