Вложенная сетка extjs5 (таблица: подтаблица)

На самом деле у меня есть две таблицы (Amenazas и Salvaguardas), первая таблица показывает Amenazas, а вторая Salvaguardas. Каждый Salvaguarda связан с любым Amenazas, поэтому я хочу показать в каждой строке другую подтаблицу (с таблицей Salvaguardas), используя rowExpand с ExtJS5. Что-то похожее на этот пример. Как вставить другую сетку в магазин salvaguardaStore и показать только Salvaguardas, связанные с Amenaza этой строки? (Что-то похожее на Клиенты - Покупки) Вот код:

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

Хранилище данных (в моей БД 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'
        }]
    });

заранее спасибо


person S. Moreno    schedule 08.08.2014    source источник
comment
А в чем вопрос?   -  person Krzysztof    schedule 09.08.2014
comment
извините, я думал, что уже указал. Мой вопрос: как мне вставить другую сетку с магазином salvaguardaStore и показать только Salvaguardas, связанные с Amenaza этой строки?.   -  person S. Moreno    schedule 10.08.2014


Ответы (1)


На самом деле это легко. Вы должны включить плагин subtable в свой проект (вы можете загрузить его с 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/

person Krzysztof    schedule 13.08.2014
comment
Спасибо, теперь работает идеально. Ключом был getAssociatedRecords. - person S. Moreno; 13.08.2014