ExtJS 组合框和过滤存储答案

【问题标题】：ExtJS comboboxes and filtered storeExtJS 组合框和过滤存储
【发布时间】：2016-03-11 17:40:01
【问题描述】：

我在运行 ExtJS 4.1 组合框时遇到问题，该组合框带有我预先过滤的商店，因为它只是清除过滤器并显示所有数据。

我知道我遇到的问题是由于组合框清除了过滤器并应用了它自己的过滤器（有点烦人，因为它不是您对组合框的立即期望），但我不确定让它停止的最佳方法。

我目前（尝试）将 MVC 模型与在单独的存储文件中定义的一些 AJAX 样式存储一起使用，该模型在其存储数组中定义了存储并在其视图数组中定义视图，调用

    var targetStore = this.getStore('app.store.STargets');
    targetStore.filter('SOURCE', 'X');
    targetStore.load();

作为它的初始化函数的一部分

以及视图中的组合框，该组合框在其存储配置变量中引用控制器定义的存储。

xtype: 'combobox',
flex: 75,
fieldLabel: 'Target',
name: 'TargetId',
itemId: 'targetIdCombo',
store: 'app.store.STargets',
valueField: 'SYSID',
displayField: 'DISPLAY_NAME',
//typeAhead: true,
queryMode: 'local', 
triggerAction: 'all',
lastQuery: '',
emptyText: 'Select a target',
margin: '0 5 0 0',
listeners: {
    scope: this,
    change: function () {
        this.fireEvent('targetChanged'); // probably needs on select
        },
        beforequery: function(qe){
            // qe.query = qe.query +'&SOURCE=X'
            // delete qe.combo.lastQuery;
            // delete qe.combo.allQuery;
        }

根据文档，您应该使用 lastQuery 或 beforequery 事件来做一些事情，尽管还不清楚是什么。我假设消隐内部查询也会阻止它在您键入时减少组合框中的项目数量，这不是很好，理想情况下我想保持这个功能但仍然过滤我的商店以仅显示带有 SOURCE 的记录='X'。我可以确认我的商店在加载时被过滤，因为我的数据数组比我的 store.getCount()

来自我尝试过的网络示例：

beforequery 中的两个 delete qe.combo 语句 - 结果 = 根本没有过滤
将 lastQuery 设置为 '' - 结果 = 根本没有过滤
添加 triggerAction: 'all' - 结果 = 根本没有过滤

我还考虑过将allQuery 与 triggerAction all 结合使用以尝试按 SOURCE 在那里进行过滤，但这有点视图的业务逻辑过多，并且同样让控制器寻找组合框来轻弹查询增加了视图和控制器的耦合。

我看到的另一个建议是从预过滤的数据集创建一个副本存储。这是有道理的，并且应该保持所需的过滤器键入行为，但作为一个相对的 Ext 和 JS 初学者，我不确定如何从我的视图中引用控制器创建的存储，例如我看到使用的 stores 数组都是以前定义的商店（或者我是否打算在我的视图中从过滤的商店创建副本）

【问题讨论】：

标签： javascript extjs combobox

【解决方案1】：

看来我太早应用过滤器了。

Controller 的 init 函数几乎在应用程序启动时被调用，并按预期设置了 store 的过滤器。

但是，当我导航到我的视图时，其他一些代码已从我的商店中清除了过滤器，因此组合框再次显示未过滤的列表。

为了纠正这个问题，我将过滤代码绑定到视图的“afterrender”事件。

即而不是

Controller.js
init: function () {
  ...
  var targetStore = this.getStore('app.store.STargets');
  targetStore.filter('SOURCE', 'X');
}

我现在有：

Controller.js
init: function () {
         this.control(
           {
           'viewitemid': {
                afterrender: function(){
                    var targetStore = this.getStore('app.store.STargets');
                    targetStore.filter('SOURCE', 'X');
                }
           });
      }

这现在按预期过滤我的组合框，并且过滤器未清除

【讨论】：