ExtJS Добавить фильтрацию в Grid для ассоциации hasMany - PullRequest
Новая
       55

ExtJS Добавить фильтрацию в Grid для ассоциации hasMany

0 голосов
/ 28 октября 2019

У меня есть модель данных, в которую я хочу добавить общее количество фильтров. Я указываю имя и значение. Как я могу добавить эти связанные с hasMany поля в качестве фильтров к моей сетке? Я попытался написать пользовательскую опцию фильтрации, но не могу отображать фильтры без прикрепленного индекса данных, который недоступен для ассоциации hasMany. 

Ext.define('AirGon.model.Project', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'Link', type: 'string' },
        { name: 'Title', type: 'string' },
        { name: 'Description', type: 'string' },
        { name: 'MappedMetadata', mapping: 'Metadata'},
        { name: 'XMax', type: 'float' },
        { name: 'XMin', type: 'float' },
        { name: 'YMax', type: 'float' },
        { name: 'YMin', type: 'float' }
    ],
    hasMany: { model: 'Metadata', name: 'Metadata', associationKey: 'Metadata' }    
});

Ext.define('Metadata', {
    extend: 'Ext.data.Model',
    fields: ['Name', 'Value']
});

Это моя попытка пользовательской фильтрации. Я получаю DataStore из основного хранилища, а затем добавляю пользовательский рендеринг, но не могу отфильтровать или отсортировать этот столбец из-за отсутствия dataIndex. 

var column = {
                header: 'Meta',
                //?????????dataIndex: 'MappedMetadata[0]',????? 
                sortable: true,
                filterable: true,
                filter: {
                    type: 'string'
                },
                renderer: function (value, meta, record) {
                    console.log(record.MetadataStore.data.items[index].data)
                    return record.MetadataStore.data.items[index].data.Value;
                }
            }

Data. Данные моделируются таким образом, чтобы можно было вводить переменное количество метаданных, и «тег» не будет известен системе. 

{
      "Link": "link.com",
      "Title": "project",
      "Description": "descript",
      "State": "",
      "Metadata": [
         {
            "Name": "County",
            "Value": "32"
         },
         {
            "Name": "Info",
            "Value": "info"
         },
         {
            "Name": "State",
            "Value": "TN"
         }
      ],
      "XMin": "-1",
      "XMax": "-1",
      "YMin": "1",
      "YMax": "1"
   }

1 Ответ

0 голосов
/ 30 октября 2019

Мне удалось решить эту проблему путем динамического выравнивания модели данных и добавления столбцов после загрузки хранилища. Хотя это нарушает структуру MVC, это было лучшее решение, которое я придумал, поэтому оно могло бы вам помочь. 

var defaultColumns = [];
var store = Ext.getStore('store');

        store.on('load', function (store) {
            var model = store.model;
            var fields = model.getFields();
            store.getAt(0).MetadataStore.data.items.forEach(function (item, index) {                
                var header = item.data.Name;
                //isField returns a boolean if the field is already part of the data model
                if (!isField(fields, header)) {
                    //Add a new metadata field to the data model
                    var field = { name: header, mapping: 'Metadata[' + index + '].Value' }
                    fields.push(field)

                    //Add a new metadata column
                    var column = {
                        header: header,
                        dataIndex: header,
                        sortable: true,
                        filterable: true,
                        filter: {
                            type: 'list'
                        },
                        flex: 0.2
                    }

                    defaultColumns.push(column);
                }
            });
            model.setFields(fields);

            //reload the grid after adding columns
            var gridView = Ext.ComponentQuery.query('gridpanel')[0];
            gridView.reconfigure(store, defaultColumns);      
        });

        //reload the data after creating new fields
        store.load();

Затем я установил для столбцов сетки значение defaultColumns. 

{
    xtype: 'grid',                    
    store: 'Projects',
    overflowX: 'auto',
    autoScroll: true,
    features: [filters],
    columns: defaultColumns
}
...