I have been working with ExtJS 4 these days. The framework provides new MVC architecture help their sheeps to improve the flexibility of the application. Remember the Design Pattern principle "close to modify but open to extend". Ok, let go to the main point of this entry.

To create an action column in a data-grid:

columns: [
   {
      header : 'Name',
      dataIndex : 'name',
      width: 150,
      editor: {allowBlank: false}
   },
   {
      header : 'Email',
      dataIndex : 'email',
      flex: true,
      editor: {allowBlank: false, vtype: 'email'}
   },
   {
      xtype: 'actioncolumn',
      width: 30,
      align: 'center',
      items: [
         {
            icon: 'images/delete.gif',
            tooltip: 'Please delete me',
            iconCls:'act-destroy',
            handler: function(grid, rowIndex, colIndex) {
               console.log("clicked on me!!!!");
            }
         }
      ]
   }
]
In the controller, let detect what action is proceed:
init: function() {
   this.control({
      'userlist actioncolumn': {
         click: this.handleUserClickAction
      }
   });
},
handleUserClickAction: function(view, cell, rowIndex, colIndex, e) {
   var m = e.getTarget().className.match(/\bact-(\w+)\b/);
   if (m === null || m === undefined) {
      return;
   }
   var action = m[1];
   switch (action) {
      case 'destroy':
         var store = this.getStore('Users');
         var store = this.getStore('Users');
         var record = store.getAt(rowIndex);
         store.remove(record);
         break;
   }
}
I am sure this is an ugly way to detect an action. Hope to see any support from Secha team.

PS: The stuff is available here