extjs subtable checkcolumn click

Question

我对extjs很新，我看到了这篇优秀文章：

dynamic url inside a extjs table dont work

我想知道是否有办法在子表上启用复选框功能？

我尝试对示例进行略微修改，但是找不到可以单击复选框并捕获与之关联的事件的方法。

请参阅下面的修改后的代码。是否可以在子表中包含可点击的复选框？

提前致谢！

    // 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'
            }]
    });