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/

第一个回答：方法是。过滤器（）。例如：

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所说，过滤器可以解决您的问题：

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

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

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

所以：

在HTML DOM可访问的位置/范围中添加一些应用过滤器以添加和删除的函数
将它们添加到（纯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等），因此变量不会使全局变得混乱（窗口）范围
重写过滤器变量以更好地共享实现（类似于获取名称列表并生成过滤器数组的函数或过滤掉这些名称的过滤器函数将是明智的）

ExtJS 4.1.3过滤组合框

2 个答案: