ExtJS在网格中为hasMany关联添加过滤

Question

我有一个数据模型，希望能够向其中添加通用数量的过滤器。我正在指定一个名称和一个值。如何将这些hasMany关联字段添加为网格中的过滤器？我试图编写自定义过滤选项，但是没有附加的dataIndex，我将无法显示过滤器，该数据索引不适用于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;
                }
            }

数据。对数据进行建模，以便可以输入可变数量的元数据，并且系统不会识别“标签”。

{
      "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"
   } 

Answer 1

我能够通过动态地展平数据模型并在加载商店后添加列来解决此问题。尽管这破坏了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
}