extjs subtable checkcolumn click - extjs

Question

I am very new to extjs, and I saw this excellent post:
dynamic url inside a extjs table dont work
I was wondering if there is a way to enable checkbox functionality on the subtable?
I tried making slight modifications to the sample, but I can't find a way to have the checkboxes clickable and capture the events associated with it.
Please see the modified code below. Is it possible to have a clickable checkbox inside a Subtable?
Thanks in advance!
// SALVAGUARDAS -- added Approved field
Ext.define('Salvaguardas', {
extend: 'Ext.data.Model',
fields: ['Approved', 'id_amenaza', 'tipo', 'modo', 'codigo', 'denominacion', 'eficiencia', ]
});
//SALVAGUARDAS
var salvaguardaStore = Ext.create('Ext.data.Store', {
model: 'Salvaguardas',
data: [
{Approved: true, id_amenaza: 1, tipo: 'Correctiva', modo: 'Correctiva', codigo: 'corr-01', denominacion: 'correctiva 1', eficiencia: 'MB' }
]
});
//GRIDPANEL
Ext.create('Ext.grid.Panel', {
renderTo: 'example-grid',
store: amenazaStore,
//width: 748,
//height: 598,
title: '<bean:write name="informesAGRForm" property="nombreActivo"/>',
plugins: [{
ptype: "subtable",
headerWidth: 24,
listeners: {
'rowdblclick': function(grid, rowIndex, columnIndex, e){
// Get the Record, this is the point at which rowIndex references a
// record's index in the grid's store.
var record = grid.getStore().getAt(rowIndex);
// Get field name
var fieldName = grid.getColumnModel().getDataIndex(columnIndex);
var data = record.get(fieldName);
alert(data);
}
},
columns: [{
//text: 'Approved',
//dataIndex: 'Approved',
//hidden: true,
//width: 100
xtype: 'checkcolumn',
header: 'Approved',
dataIndex: 'Approved',
width: 85,
listeners: {
checkChange: function ()
{
console.log('checkChange');
}
}
}, {
text: 'id_amenaza',
dataIndex: 'id_amenaza',
hidden: true,
width: 100
}, {
width: 100,
text: 'id_salvaguarda',
dataIndex: 'id_salvaguarda'
},
{
text: 'denominacion',
dataIndex: 'denominacion',
width: 100
},{
text: 'descripcion',
dataIndex: 'descripcion',
width: 100
},{
text: 'eficacia',
dataIndex: 'eficacia',
width: 100
},
],
getAssociatedRecords: function (record) {
var result = Ext.Array.filter(
salvaguardaStore.data.items,
function (r) {
return r.get('id_amenaza') == record.get('id');
});
return result;
}
}],
listeners: {
rowdblclick: function (view, record, tr, columnIndex, e) {
console.log('rowdblclick');
var cell = e.getTarget('.x-grid-subtable-cell');
if (!cell) {
return;
}
var row = Ext.get(cell).up('tr');
var tbody = row.up('tbody');
var rowIdx = tbody.query('tr', true).indexOf(row.dom);
//var records = view.up('grid').getPlugin('subtable').getAssociatedRecords(record);
var records = view.up('grid').plugins[0].getAssociatedRecords(record);
var subRecord = records[rowIdx];
console.log('rowdblclick: ' + rowIdx + ' - ' + subRecord);
},
rowclick: function (view, record, tr, columnIndex, e) {
console.log('rowclick');
var cell = e.getTarget('.x-grid-subtable-cell');
if (!cell) {
return;
}
var row = Ext.get(cell).up('tr');
var tbody = row.up('tbody');
var rowIdx = tbody.query('tr', true).indexOf(row.dom);
//var records = view.up('grid').getPlugin('subtable').getAssociatedRecords(record);
var records = view.up('grid').plugins[0].getAssociatedRecords(record);
var subRecord = records[rowIdx];
console.log('rowclick: ' + rowIdx + ' - ' + subRecord);
}
},
collapsible: false,
animCollapse: false,
columns: [
{
text: 'ID',
hidden: true,
hideable: false,
dataIndex: 'id'
},
{
text: 'Codigo',
width: 50,
sortable: true,
hideable: false,
dataIndex: 'codigo'
},
{
text: 'Denominación',
width: 150,
dataIndex: 'denominacion',
},
{
text: ' Autenticidad',
flex: 1,
dataIndex: 'a_riesgo'
},
{
text: 'Confidencialidad',
flex: 1,
dataIndex: 'c_riesgo'
},
{
text: 'Integridad',
flex: 1,
dataIndex: 'i_riesgo'
},
{
text: 'Disponibilidad',
flex: 1,
dataIndex: 'd_riesgo'
},
{
text: 'Trazabilidad',
flex: 1,
dataIndex: 't_riesgo'
},
{
text: 'Total',
flex: 1,
dataIndex: 'total_riesgo'
}]
});