javascript - extjs 表内的动态 url 不起作用

Question

我有一个网格面板，每行内都有一个子表。我试图包含双击功能(如果您连续单击两次，则获取 id_amenaza 并使用 url 重新定向)。该代码有效，但如果我双击会折叠该行。我怎样才能添加这个功能？ (或插入充当链接的图像？)

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

提前谢谢您。

Answer 1

首先，您必须将 rowdblclick 连接到主网格。要检测单击了哪个子表行，您必须使用事件对象。

示例:

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

要关闭扩展/折叠，请在插件上设置 expandOnDblClick: false。

工作示例:http://jsfiddle.net/7czs02yz/18/