一个extjs表中的动态url不工作 [英] dynamic url inside a extjs table dont work

问题描述

我有一个网格，每行都有一个子表。我试图包括一个双击功能（如果你连续点击2次，获取id_amenaza和redirent与一个url）。代码工作，但如果我双击折叠该行。我如何添加这个功能？ （或插入一个充当链接的图像）

  // GRIDPANEL 
 Ext.create（'Ext。 grid.Panel'，{
 renderTo：'example-grid'，
 store：amenazaStore，
 width：748，
 height：598，
 title：'< ; bean：write name =informesAGRFormproperty =nombreActivo/>'，
 plugins：[{
 ptype：subtable，
 headerWidth：24，
 listeners ：{
'rowdblclick'：function（grid，rowIndex，columnIndex，e）{
 //获取记录，这是rowIndex引用
 //记录的索引的点网格的商店
 var record = grid.getStore（）。getAt（rowIndex）; 
 
 //获取字段名称
 var fieldName = grid.getColumnModel（）。getDataIndex（columnIndex ）; 
 var data = record.get（fieldName）; 
 alert（data）; 
} 
}，
列： [{
 text：'id_amenaza'，
 dataIndex：'id_amenaza'，
 hidden：true，
 width：100 
}，{
 width： 100，
文本：'id_salvaguarda'，
 dataIndex：'id_salvaguarda'
}，
 {
文本：'denominacion'，
 dataIndex：'denominacion '，
 width：100 
}，{
 text：'descripcion'，
 dataIndex：'descripcion'，
 width：100 
}，{ 
文本：'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'）; 
}）; 
返回结果; 
} 
}]，
 collapsible：false，
 animCollapse：false，
列：[
 {
 text：'ID' 
 hidden：true，
可隐藏：false，
 dataIndex：'id'
}，
 {
文本：'Codigo'，
宽度：50，
可排序：true，
可隐藏：false，
 dataIndex：'codigo'
}，
 {
文本：'Denominación' 
 width：150，
 dataIndex：'denominacion'，
}，
 {
 text：'Autenticidad'，
 flex：1，
 dataIndex：'a_riesgo'
}，
 {
文本：'Confidencialidad'，
 flex：1，
 dataIndex：'c_riesgo'
} 
 {
 text：'Integridad'，
 flex：1，
 dataIndex：'i_riesgo'
}，
 {
文本：'Disponibilidad'，
 flex：1，
 dataIndex：'d_riesgo '
}，
 {
文本：'Trazabilidad'，
 flex：1，
 dataIndex：'t_riesgo'
}，
 { 
 text：'Total'，
 flex：1，
 dataIndex：'total_riesgo'
}] 
}）; 
} 
  

提前谢谢。

解决方案

首先，您必须将 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/

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.

解决方案

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/

这篇关于一个extjs表中的动态url不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！