dynamic url inside a extjs table dont work

问题:

I have a gridpanel with a subtable inside every row. Im trying to include a double click functionality (if you click 2 times in a row, obtain the id_amenaza and redirent with an url). The code works but if i make double click collapses the row. How can i add this functionality? (or insert an image that acts as a link?)

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

Thank you in advance.

回答1:

First of all you must attach rowdblclick to main grid. To detect which subtable row was clicked you must use event object.

Example:

'rowdblclick': function (view, record, tr, columnIndex, e) {
    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 subRecord = records[rowIdx];
    console.log(subRecord);
}

To turn off expanding/collapsing set expandOnDblClick: false on plugin.

Working sample: http://jsfiddle.net/7czs02yz/18/