ExtJS 在網格中為 hasMany 關聯添加過濾

Question

我有一個數據 model 我希望能夠添加通用數量的過濾器。 我正在指定一個名稱和一個值。 如何將這些 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

我能夠通過動態展平數據 model 並在加載存儲后添加列來解決此問題。 盡管這破壞了 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
}