使用存储远程过滤器加载数据时如何在客户端过滤组合框答案

【问题标题】：How filter combo box on client side when data is loaded using store remote filter使用存储远程过滤器加载数据时如何在客户端过滤组合框
【发布时间】：2015-11-15 02:04:16
【问题描述】：

我有两个组合框。在第一个组合中，控制器中有选择事件，它添加过滤器以获取第二个组合的数据：

      secondComboStore.remoteFilter = true;
    filters.push({property: 'Id', value: combo.getValue()});

我想要基于键入字符的客户端的第二个组合过滤器，但问题是在我键入的每个字符上，请求都会发送到我不想要的服务器。这是第二个组合：

        xtype: 'combo',
        name: 'SomeName', 
        itemId: 'someNameId',
        fieldLabel: 'name',
        editable: true,
        allowBlank: false,
        queryParam: false,
        valueField: 'someId',
        displayField: 'someName',
        store: 'mySecondStore'

在该商店中，我只定义了读取时调用的模型和服务器端服务。到目前为止，我已经尝试将 queryParam 设置为 false 并将 queryMode 设置为本地，但请求仍然发送到服务器。我也尝试过 mySecondStore 的 load 事件将 remoteFilter 设置为 false，但是组合内没有显示任何数据。

编辑：如果我将这些行放在商店加载事件中：

        this.clearFilter(true);
        this.remoteFilter=false;

仅在第一次加载商店时才有效。再次加载时，我开始输入时不会过滤组合中的值。

【问题讨论】：

何时发送请求？
然后你在组合框 1 的 onchange 事件中使用存储加载
我知道这会解决问题，但它会导致一些我不想做的代码重构。使用过滤而不是加载时，我不能以某种方式在组合上获得相同的行为吗？

标签： javascript extjs combobox

【解决方案1】：

将editable 设置为false。当您的选择有限时，为什么需要在第二个组合中进行编辑？

编辑：使用单独的存储加载过滤后的数据。然后将其复制到设置为 local 模式的mySecondStore。将editable 设置为true。

【讨论】：

我想要客户端过滤。如果第二个组合有 50 条记录，如果用户可以通过在组合中输入一些内容来过滤这 50 条记录，那么用户将更容易选择所需的值
没有必要投票反对。你写的信息，我明白你想要什么。
您应该在每次选择第一个组合时预加载加载第二个组合。但是您的mySecondStore 必须是本地。然后您将能够过滤第二个组合的内容。

【解决方案2】：

将这两个属性用于您的第二个组合。

typeAhead: true,
forceSelection: true, // don't allow custom value typing in dropdown
queryMode: 'local'

【讨论】：