ExtJS 4.1.3 过滤器组合框答案

【问题标题】：ExtJS 4.1.3 filter comboboxExtJS 4.1.3 过滤器组合框
【发布时间】：2012-11-16 16:34:55
【问题描述】：

这是一个两部分的问题：

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

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

注意：禁用是指“不存在”，也就是在 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'
}

【问题讨论】：

标签： extjs drop-down-menu combobox filter visibility

【解决方案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();

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

【讨论】：

这行得通，但由于这个问题我希望不使用过滤器：jsfiddle.net/thecaligarmo/ZyWRf 我在页面上有不是通过 extjs 创建的按钮（嗯，它们是，但是通过 tpl所以我真的不能用它们做很多事情）......我如何能够从保管箱中添加/删除詹姆斯？

【解决方案2】：

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

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

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

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

所以：

在 HTML DOM 可访问的位置/范围内添加一些应用过滤器来添加和删除的函数
将它们添加到（纯 HTML）按钮的 onclick 处理程序

真正的诀窍是通过使用 Ext 的 id 查找来访问商店。

因此，如果以下代码（在 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 等），这样变量就不会弄乱全局（窗口）范围
重写过滤器变量以更好地共享实现（类似于获取名称列表并生成过滤器数组的函数或过滤掉这些名称的过滤器函数是明智的）

【讨论】：