在 ExtJS 网格列标题中使用 ListFilter 进行远程过滤 [英] Remote Filtering with ListFilter in ExtJS Grid Column Header

问题描述

我正在使用 ListFilter 插件来过滤网格面板上的结果.列定义是.

I am using ListFilter plugin to filter results on a Grid panel. The column definition is.

{
    header: 'Provider',
    filter: {
        type: 'list',
        store: Ext.getStore('MyApp.store.Provider'),
        dataIndex: 'provider_id',
        labelField: 'name'
    }
}

MyApp.store.Provider 被创建为

   Ext.create('Ext.data.Store', {
        storeId: 'MyApp.store.Provider',
        autoDestroy: true,
        autoLoad: {start: 0, limit: 50},
        autoSync: true,
        model: 'MyApp.model.Provider',
        pageSize: 50,
        proxy: {
            type: 'ajax',
            api: {
                create:  'proxy/provider/create',
                read:    'proxy/provider/read',
                update:  'proxy/provider/update',
                destroy: 'proxy/provider/destroy'
            },
            reader: {
                type: 'json',
                root: 'data',
                successProperty: 'success',
                messageProperty: 'message',
                totalProperty: 'total'
            },
            writer: {
                allowSingle: false,
                type: 'json',
                writeAllFields: false,
                root: 'data'
            }
        }
    });

最后模型 MyApp.model.Provider 定义为

Ext.define('MyApp.model.Provider', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'provider_id', type: 'int'},
        'name',
        { name: 'create_time', type: 'date', dateFormat: appDateFormat },
        { name: 'status', type: 'int'}
    ],
    idProperty: 'provider_id',
    displayProperty: 'name' // A custom property used for dynamically use the property to display
})

现在此代码不会在过滤器菜单中显示任何子菜单.它只显示加载.看图.

Now this code does not show any sub-menu in the filter menu. It just shows loading. See the image.

我已经使用以下过滤器配置解决了它.这实际上会手动填充 options 配置.所以这里没有使用 store.

I have solved it using following filter config. This actually populates options config manually. So no store is used here.

{
  type: 'list',
  labelField: 'name',
  options: (function () {
    var opts = [];
    fS.load(function (records, operation, success) {
      for (var i = 0; i < records.length; i++) {
        var ar = {
          id: records[i].get('provider_id'),
          name: records[i].get('name')
        };

        opts.push(ar);
      }
    });
    return opts;
  })(),
  single: true
}

似乎id"是硬编码的.id: records[i].get('provider_id'), 看起来不太好.虽然它有效.

It seems 'id' is hard-coded. id: records[i].get('provider_id'), does not look good. Though it works.

但我仍在寻找合适的方法来做到这一点.

But I am still looking for a proper way to do it.

注意:可以在 ExtJS 4.1.1 上找到预期的行为.请参阅此 jsfiddle.我已经复制了它.但是同样的事情在 ExtJS 4.0.7

Note: The expected behavior can be found on ExtJS 4.1.1. See this jsfiddle. I have reproduced it. But this very same thing does not work on ExtJS 4.0.7

推荐答案

我自己没有尝试过，但您需要使用 idField 手动设置 ID 属性 [ExtJS4.1.3 的新特性]，默认设置为 id.所以我想这会奏效:

I didn't tried this myself but you need to set the ID manually with the idField property [new to ExtJS4.1.3] which is per default set to id. So I guess this will work:

{
    header: 'Provider',
    filter: {
        type: 'list',
        idField: 'provider_id',
        store: Ext.getStore('MyApp.store.Provider'),
        dataIndex: 'provider_id',
        labelField: 'name'
    }
}

<小时>

更新

好的，我查看了源代码，现在我可以告诉您这就是答案.因此，在 4.2 发布之前，您必须忍受您的解决方法，或者您可以将以下更改应用到您的 Ext.ux.grid.menu.ListMenu 以使其运行:

OK, I looked at the source and I can now tell you that this is the answer. So will have to either live with your workarround until 4.2 is out or you can apply the following changes to your Ext.ux.grid.menu.ListMenu to make it run:

添加具有默认值的 idField.

查看此行的构造函数

case 'object': options.push([value.id, value[this.labelField]]); break;
// some more lines
fields: ['id', this.labelField],

并将其替换为

case 'object': options.push([value[me.idField], value[me.labelField]]); break;
// some more lines
fields: [me.idField, me.labelField],

并在 onLoad 函数中查找

and within the onLoad function look for

itemValue = records[i].get('id');

并将其替换为

itemValue = records[i].get(me.idField);

差不多就是这样.

这篇关于在 ExtJS 网格列标题中使用 ListFilter 进行远程过滤的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！