Extjs 4 actioncolumn issue

Question

I have an Ext.grid.Panel with this items:

items:[
                   {
                           xtype:'actioncolumn', 
                           width:20,
                           align:'center',
                           items: [
                                   {
                                       icon:'resources/images/icons/table_edit.png',
                                       tooltip: 'Edita Registro',
                                       action:'edit'
                                   },
                           ]
                   },
                   {header:'<span style="color:blue;">Estado</span>', dataIndex:'testado', width:90},
                   {header:'<span style="color:blue;">Cliente</span>', dataIndex:'tcliente', width:110, sortable: true},
                   {header:'<span style="color:blue;">N&#176; Expediente</span>', dataIndex:'Expediente', width:100},
                   {header:'<span style="color:blue;">Organismo</span>', dataIndex:'torganismo', width:255, sortable: true},
                   {header:'<span style="color:blue;">Convocatoria</span>', dataIndex:'F_Convocatoria', width:80, sortable: true},
                   {header:'<span style="color:blue;">Presentacion</span>', dataIndex:'F_Presentacion', width:80, sortable: true},
                   {header:'<span style="color:blue;">Aviso</span>', dataIndex:'F_Aviso', width:80, sortable: true},
                   {header:'<span style="color:blue;">Importe sin IVA</span>', dataIndex:'Total_Licitacion_sIVA', width:105, sortable: true},
                   {header:'<span style="color:blue;">Responsable</span>', dataIndex:'tresponsable', width:140, sortable: true},
            ]

In my controller I want to hand when user clicks on the button of the actioncolumn. I have the following code:

this.control({
    'viewGridRECO actioncolumn':{
        click:this.onPulsarEditar
    }
});

With the previous code in my controller,the function onPulsarEditar executes when the user clicks everywhere in the cell of the action column,but I want it to execute only when click on the button,not everywhere in the cell of the actioncolumn.

I have tried to put action:'edit' property in the button and in the controller:

this.control({
    'viewGridRECO actioncolumn button[action=edit]':{
        click:this.onPulsarEditar
    }
});

And nothing happends.

Answer 1

As @Abdul Rehman Yawar Khan comented to view this post, after update my code it is:

In the view,the column items:

items:[
                   {
                           xtype:'actioncolumn', 
                           width:20,
                           align:'center',
                           items: [
                                   {
                                       icon:'resources/images/icons/table_edit.png',
                                       tooltip: 'Edita Registro',
                                       handler: function(view, rowIndex, colIndex, item, e, record, row) {
                                            this.fireEvent('itemClick', view, rowIndex, colIndex, item, e, record, row, 'edit');
                                       }
                                   }
                           ]
                   },
                   {header:'<span style="color:blue;">Estado</span>', dataIndex:'testado', width:90},
                   {header:'<span style="color:blue;">Cliente</span>', dataIndex:'tcliente', width:110, sortable: true},
                   {header:'<span style="color:blue;">N&#176; Expediente</span>', dataIndex:'Expediente', width:100},
                   {header:'<span style="color:blue;">Organismo</span>', dataIndex:'torganismo', width:255, sortable: true},
                   {header:'<span style="color:blue;">Convocatoria</span>', dataIndex:'F_Convocatoria', width:80, sortable: true},
                   {header:'<span style="color:blue;">Presentacion</span>', dataIndex:'F_Presentacion', width:80, sortable: true},
                   {header:'<span style="color:blue;">Aviso</span>', dataIndex:'F_Aviso', width:80, sortable: true},
                   {header:'<span style="color:blue;">Importe sin IVA</span>', dataIndex:'Total_Licitacion_sIVA', width:105, sortable: true},
                   {header:'<span style="color:blue;">Responsable</span>', dataIndex:'tresponsable', width:140, sortable: true},
            ]

In the controller:

this.control({
    'actioncolumn':{
        itemClick:this.onPulsarEditar
});

Note that itemClick of actioncolumn in controller is write the same way as it is in the view handler event.

And in the controller in the function onPulsarEdit you can add all the code you need to execute the function as you want.