Javascript 使用ExtJS网格列标题中的ListFilter进行远程筛选_Javascript_Plugins_Extjs_Filter_Grid

Javascript 使用ExtJS网格列标题中的ListFilter进行远程筛选

javascript plugins extjs filter grid

Javascript 使用ExtJS网格列标题中的ListFilter进行远程筛选,javascript,plugins,extjs,filter,grid,Javascript,Plugins,Extjs,Filter,Grid,我正在使用ListFilter插件过滤网格面板上的结果。列定义为 { header: 'Provider', filter: { type: 'list', store: Ext.getStore('MyApp.store.Provider'), dataIndex: 'provider_id', labelField: 'name' } } MyApp.store.Provider创建为 Ext.c

我正在使用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'
            }
        }
    });

最后，model

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

config。所以这里没有使用

存储

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

{
键入：“列表”，
拉贝尔菲尔德：“名字”，
选项：（函数（）{
var opts=[]；
fS.load（函数（记录、操作、成功）{
对于（var i=0；i


“id”似乎是硬编码的id:records[i].get（'provider\u id'），
看起来不太好。尽管它有效
但我仍然在寻找一个合适的方法来做到这一点
注意：可以在extjs4.1.1
上找到预期的行为。看这个。我复制了它。但是同样的事情在ExtJS4.0.7
上不起作用，我自己没有尝试过，但是您需要使用idField
[ExtJS4.1.3新增]手动设置ID，默认设置为ID
。所以我想这会管用的：
{
    header: 'Provider',
    filter: {
        type: 'list',
        idField: 'provider_id',
        store: Ext.getStore('MyApp.store.Provider'),
        dataIndex: 'provider_id',
        labelField: 'name'
    }
}


更新
好的，我看了来源，现在我可以告诉你，这就是答案。因此，您必须在4.2版本发布之前继续使用您的workarround，或者您可以对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],

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

在onLoad函数中查找
itemValue = records[i].get('id');

并将其替换为
case 'object': options.push([value[me.idField], value[me.labelField]]); break;
// some more lines
fields: [me.idField, me.labelField],

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

差不多就是这样。
可能是重复的。你可以试试另一个答案，看看它是否有效——一个不是我的答案（我自己也没有试过，所以我不确定），我选择了另一个答案。这不是重复的。另一个答案很难回答。没有什么标准。而且他们对我也不起作用。现在我明白了，我会收回我的“dup”投票。4.1.3可能已经解决了这一问题，但当我在4.1.0中尝试处理这一问题时，框架中似乎出现了一些问题，因此黑客解决方案是唯一可用的。@shiplu.mokadd.im我为其创建了一个覆盖，以使其与类似“idField”配置选项的内容正常工作。不确定您是否仍然对此感兴趣，但由于它是自制的，可能对您有好处，因为它不是sencha的专有代码。如果你愿意，给我留言。我之所以这么做，是因为我在第一次使用4.0.7时遇到了同样的问题，然后在使用4.1.0时更新了。我不是Sencha Support的订户。我不能用这个。注意：我试图通过在前面添加idField
config来修改ListMenu.js
。但那没用。因此，我认为如果它起作用，可能会有一些其他的变化。仅添加idField
将不起作用。我已经测试过了。@shiplu.mokadd.im我编辑了我的答案，并提供了使其运行所需的所有更改。在问这个问题之前，我已经将硬编码的id
更改为可配置设置。此代码仅删除硬代码id
。没有别的了。这是行不通的。即使我已经应用了您的修复程序（它添加了额外的var me=this
），但仍然无法修复。@shiplu.mokadd.im您确定我们讨论的是同一个文件（examples\ux\grid\menu\ListMenu.js
），它由examples\ux\grid\FiltersFeature.js
初始化？因为如果应用“修复”，需要覆盖第一个文件或应用覆盖方法的原型。你能详细说明什么失败了吗？你把你的工作区移走了吗？好的。我发现它不仅仅是ListMenu.js
。它还取决于4.1
中的Ext.menu.*
上的更改。4.1
版本按预期工作（请参阅我的问题更新）。但它不会在4.0
上显示菜单项。我只能更改Ext.ux
。但要改变这一切是不可能的。