ExtJS 4.1.3 过滤器组合框

Question

这是一个由两部分组成的问题：

主要问题：假设我有一个从商店中提取的组合框（代码如下）。假设我有一个数组，我想通过它来过滤数据，以便只有某些值实际显示在下拉列表中。我似乎找不到可以做到这一点的参数...有没有一种简单的方法可以做到这一点？

第二个问题：我还需要能够根据创建下拉列表后用户的操作禁用和重新启用下拉列表中的项目。是否有一个功能可以导致下拉列表中的项目重新启用/禁用？

注意：我所说的禁用是指“不存在”，即在 dom 中删除，但仍然存在于未过滤的存储中。

{
  xtype: 'combobox',
  anchor: '100%',
  name: 'Permission_id',
  fieldLabel: 'Permissions',
  hideLabel: false,
  displayField: 'Name',
  forceSelection: true,
  store: 'PermissionStore',
  typeAhead: true,
  valueField: 'id',
  valueNotFoundText: 'Add Permission'
}

Answer 1

我认为你所需要的就是使用过滤器。如果您只想在下拉列表中显示某些值，您唯一要做的就是过滤存储，如果您拥有的是数组，则可以使用 ArrayStore 来实现。

关于你的第二个问题，如果你过滤你的商店，原始值不会丢失，它们会在内部保存为快照，然后当你清除过滤器时，旧值会再次显示在 dropdonlist 中。

请看一下这个工作示例：http://jsfiddle.net/lontivero/Mz6S4/1/

第一个答案：方法是.filter()。例如：

var store = Ext.create('Ext.data.ArrayStore', {
    fields: ['Id', 'Name'],    
    data: [
        [ 1, 'Lucas' ],
        [ 2, 'Pablo' ],
        [ 3, 'Francisco' ]
    ]
});


Ext.create('Ext.form.field.ComboBox', {
    fieldLabel: 'Permissions',
    displayField: 'Name',
    store: store,
    valueField: 'Id',
    renderTo: Ext.getBody()
});

//Hide Pablo in the dropdownlist
store.filter([
    {filterFn: function(record) { return record.get('Name') !== 'Pablo'; }}
]);

// uncomment this to reenable hidden records (to display Pablo again)
//store.clearFilter();

第二个答案：清除商店的过滤器

Answer 2

正如 lontivero 所说，过滤器可以解决您的问题：

primary：数组可以包含数据，但过滤器会将其从下拉列表中隐藏

辅助：过滤器可以更改为在下拉列表中隐藏和显示

那么，您剩下的问题是如何从非 Ext 代码更改过滤器。在这里你可以利用这样一个事实：Ext 只是 javascript，可以从任何其他与 Ext 无关的 javascript 调用。

所以：

1. 在 HTML DOM 可访问的位置/范围中添加一些应用过滤器进行添加和删除的函数
2. 将它们添加到（纯 HTML）按钮的

   onclick

   处理程序

技巧实际上是通过 id 使用 Ext 查找来访问商店。

因此，如果以下代码（在 lontivero 的 jsfiddle 上扩展）直接位于 js 文件中（或脚本标记中），它就会执行您所要求的操作：

（jsfiddle：http://jsfiddle.net/mCv6A/）

// functions that do the filtering
var noPablo = function(record) { return record.get('Name') !== 'Pablo' }
var noJames = function(record) { return record.get('Name') !== 'James' }

// the combination of functions we'll use
var withoutJamesFilter = [{ filterFn: noPablo }, { filterFn: noJames }]
var withJamesFilter = [{ filterFn: noPablo }]

function addJames()
{
    var store = Ext.getStore('people')
    store.clearFilter()
    store.filter(withJamesFilter)
}

function delJames()
{
    var store = Ext.getStore('people')
    store.clearFilter()
    store.filter(withoutJamesFilter)
}

Ext.onReady(function()
{
    var store = Ext.create('Ext.data.ArrayStore', {
        id: 'people',
        fields: ['Id', 'Name'],    
        data: [
            [ 1, 'Lucas' ],
            [ 2, 'Pablo' ],
            [ 3, 'Francisco' ],
            [ 4 , 'James' ]
        ]
    })

    Ext.create('Ext.form.field.ComboBox', {
        fieldLabel: 'Permissions',
        displayField: 'Name',
        store: store,
        valueField: 'Id',
        renderTo: Ext.getBody()
    })

    // start without james in list
    store.filter(withoutJamesFilter)
})

实际使用时要考虑的事项（而不是简化的示例）：

• 包装

  addJames

  、

  delJames

  以及它们在对象或立即函数中使用的变量（

  noPablo

  、

  noJames

  等），这样变量就不会扰乱全局（窗口）范围
• 重写过滤器变量以更好地共享实现（类似于采用名称列表并生成过滤器数组或过滤器函数来过滤掉这些名称的函数是明智的）