ExtJS 在 Grid 中为 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;
                }
            }

数据。对数据进行建模，以便可以输入可变数量的元数据，并且系统不会知道 'tag'。

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

ExtJS 在 Grid 中为 hasMany 关联添加过滤

ExtJS Add filtering in Grid for hasMany association

javascript

extjs

extjs4.2