javascript - 在 ExtJS 网格列标题中使用 ListFilter 进行远程过滤

Question

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

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

现在这段代码不会在过滤器菜单中显示任何子菜单。它只是显示加载。查看图像。

更新

我已经使用以下过滤器配置解决了这个问题。这实际上是手动填充 options 配置。所以这里没有使用store。

{
  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'), 看起来不太好。虽然它有效。

但我仍在寻找合适的方法。

注意:可以在 ExtJS 4.1.1 上找到预期的行为。看这个jsfiddle .我已经复制了它。但同样的事情在 ExtJS 4.0.7

上不起作用

Answer 1

我自己没有尝试过，但您需要使用 idField 手动设置 ID property [ExtJS4.1.3 的新功能] 默认设置为 id。所以我想这会起作用:

{
    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 应用以下更改以使其运行:

添加具有默认值的 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 函数中寻找

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

并将其替换为

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

差不多就是这样。