docs - Grilla ExtJS: manejo del evento de clic de la columna de acción en el controlador

extjs docs

Question

Tengo una vista ''EmployeeList''. En su interior hay una cuadrícula. Necesito manejar el evento click de la accióncolumn desde el controlador. Aquí está la vista:

Ext.define(''ExtApp.view.Employees'', {
extend: ''Ext.panel.Panel'',
alias: ''widget.employees'',
.
.
.
.
.
});

Esta vista contiene una grilla:

xtype: ''grid'',
columns:[{
.
.
.
.
xtype: ''actioncolumn'',
text: ''Delete'',
width: 100,
items: [{
icon: ''images/deleteEmployee.jpg'',
tooltip: ''Delete''
}]
}]

¿Cómo manejo el evento click de la accióncolumn en mi controlador?

Aquí está el código del controlador:

Ext.define(''ExtApp.controller.Employees'', {
extend: ''Ext.app.Controller'',
refs: [{
ref: ''employees'',
selector: ''employees''
}],
init: function () {
//reference for the grid''s actioncolumn needed here
}
});

Answer 1

Si desea manejar los clics con su controlador, deberá agregar un controlador a su columna de acción de esta manera:

xtype:''actioncolumn'',
width:50,
items: [{
icon: ''extjs/examples/shared/icons/fam/cog_edit.png'', // Use a URL in the icon config
tooltip: ''Edit'',
handler: function(view, rowIndex, colIndex, item, e, record, row) {
this.fireEvent(''itemClick'', view, rowIndex, colIndex, item, e, record, row, ''edit'');
}
}]

Y luego agregue controlador de eventos en su controlador para el evento itemClick

init: function() {
this.control({
''actioncolumn'': {
itemClick: this.onActionColumnItemClick
}
});
},
onActionColumnItemClick : function(view, rowIndex, colIndex, item, e, record, row, action) {
alert(action + " user " + record.get(''firstname''));
}

Y debería verlo funcionando, violín aquí: https://fiddle.sencha.com/#fiddle/grb