ExtJS组合框和过滤存储

ExtJS comboboxes and filtered store

本文关键字：过滤 存储 组合 ExtJS      更新时间：2023-09-26

我在运行带有已预过滤的存储的 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 结合使用，以尝试在那里按 SOURCE 进行过滤，但这有点像视图获得太多的业务逻辑，同样让控制器寻找组合框来轻弹查询会增加视图和控制器的耦合。

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

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

控制器的 init 函数几乎在应用程序启动时被调用，并按预期设置存储的过滤器。

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

为了纠正此问题，我将过滤代码绑定到视图的"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');
                }
           });
      }

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

相关文章：