extjs5 嵌套网格（表：子表）

Posted 2023-02-26

【中文标题】extjs5 嵌套网格（表：子表）

【英文标题】：extjs5 nested grid (table:subtable)

【发布时间】：2014-08-08 09:45:51

【问题描述】：

实际上我有两张桌子（Amenazas 和 Salvaguardas），第一张桌子显示 Amenazas 和第二张 Salvaguardas。每个 Salvaguarda 都与任何 Amenazas 相关联，因此我想在每一行中使用带有 ExtJS5 的 rowExpand 显示另一个子表（带有 Salvaguardas 表）。 类似于this example 的东西。我如何使用 salvaguardaStore 插入另一个网格并仅显示与该行的 Amenaza 相关的 Salvaguardas？ （类似于客户 - 购买） 这是代码：

 //MODEL
    // AMENAZAS
Ext.define('Amenazas', 
    extend: 'Ext.data.Model',
    fields: [ 'id', 'codigo', 'denominacion', 'a_impacto', 'a_riesgo','c_impacto', 'c_riesgo','i_impacto', 'i_riesgo', 'd_impacto', 'd_riesgo','t_impacto', 't_riesgo','total_impacto', 'total_riesgo',]
);

    // SALVAGUARDAS
Ext.define('Salvaguardas', 
    extend: 'Ext.data.Model',
    fields: [ 'id_amenaza','tipo','modo', 'codigo','denominacion', 'eficiencia',]
);

DataStore（在我的 DB Amenaza.id = Salvaguardas.id_amenaza 在每一行创建一个 1:n 关联）

// DATASTORE
    //AMENAZAS
var amenazaStore = Ext.create('Ext.data.Store', 
    model: 'Amenazas',
    data: [
         id: 1, codigo: 'E.1', denominacion: 'Errores de los usuarios', a_riesgo: '0', c_riesgo: '0', i_riesgo: '0', d_riesgo: '1015875', t_riesgo: '0',  total_riesgo: '1015875',
         id: 2, codigo: 'E.5', denominacion: 'Deficiencias en la organización', a_riesgo: '0',  c_riesgo: '0',  i_riesgo: '0',  d_riesgo: '526750',  t_riesgo: '0',  total_riesgo: '526750',
         id: 3, codigo: 'E.8', denominacion: 'Escapes de información',  a_riesgo: '0', c_riesgo: '0',  i_riesgo: '0',  d_riesgo: '752500', t_riesgo: '0',  total_riesgo: '752500',
         id: 4, codigo: 'E.9', denominacion: 'Alteración accidental de la información',  a_riesgo: '0',  c_riesgo: '0',  i_riesgo: '0',  d_riesgo: '376250',  t_riesgo: '0',  total_riesgo: '376250'
    ]
);

    //SALVAGUARDAS
    var salvaguardaStore = Ext.create('Ext.data.Store', 
    model: 'Salvaguardas',
    data: [
         id_amenaza: 1, tipo: 'Correctiva', modo: 'Correctiva', codigo: 'corr-01', denominacion: 'correctiva 1', eficiencia: 'MB' 
 ]
);

并且 Grid 使用 rowExpander 来扩展每一行并显示信息，我想在 rowExpand 中显示第二个表并使用他自己的 Salvaguardas。

//GRIDPANEL
Ext.create('Ext.grid.Panel', 
    renderTo: 'example-grid',
    store: amenazaStore,
    width: 980,
    height: 790,
    title: '<bean:write name="informesAGRForm" property="nombreActivo"/>',
    plugins: [
              
        ptype: 'rowexpander',
        rowBodyTpl : new Ext.XTemplate(
            '<p><b>Denominación:</b> denominacion</p>',
            '<p><b>Código:</b> codigo</p><br>',
            '<p><b>Riesgo Total:</b> total_riesgo</p>')
              
    ],
    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'
        ]
    );

提前谢谢你

【问题讨论】：

问题是什么？

对不起，我以为我已经指出了。我的问题是：“我如何使用 salvaguardaStore 插入另一个网格，并且只显示与该行的 Amenaza 相关的 Salvaguardas？”。

【参考方案1】：

其实很简单。你应该在你的项目中包含子表插件（你可以从http://dev.sencha.com/extjs/5.0.0/examples/ux/grid/SubTable.js下载它）。 然后像这样配置它：

    ptype: "subtable",
    headerWidth: 24,
    columns: [
        text: 'id_amenaza',
        dataIndex: 'id_amenaza',
        width: 100
    , 
        width: 100,
        text: 'codigo',
        dataIndex: 'codigo'
    ],
    getAssociatedRecords: function(record) 
        var result = Ext.Array.filter(
            salvaguardaStore.data.items,
            function(r)  return r.get('id_amenaza') == record.get('id'); 
        );
        return result;
    

最重要的一点是getAssociatedRecords 覆盖。您必须返回要显示的记录数组，因此您基本上可以过滤salvaguardaStore数据。

工作样本：http://jsfiddle.net/7czs02yz/11/

【讨论】：

谢谢，现在它可以完美运行了。 getAssociatedRecords 是关键。