ExtJS 4.1.3过滤器组合框

idv4meu8  于 2022-09-26  发布在  其他
关注(0)|答案(2)|浏览(165)

这是一个由两部分组成的问题:
主要问题:假设我有一个组合框(代码如下),它正在从商店中提取。假设我有一个数组,我想用它来过滤数据,以便在下拉列表中只显示某些值。我似乎找不到这样做的参数……有简单的方法吗?
第二个问题:在创建下拉列表后,我还需要能够根据用户的操作禁用和重新启用下拉列表中的项目。是否有一个功能可以在下拉列表中重新启用/禁用项目?
注意:禁用的意思是“不存在”,也就是在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'
}
bxfogqkk

bxfogqkk1#

我想你所需要的就是使用过滤器。如果您只想在下拉列表中显示某些值,您只需要过滤存储,如果您有一个数组,您可以使用ArrayStore。
关于第二个问题,如果你过滤你的商店,原始值不会丢失,它们会在内部保存为快照,然后当你清除过滤器时,旧值会再次显示在下拉列表中。
请看一下这个工作示例: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();

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

uqxowvwt

uqxowvwt2#

正如lontivero所说,过滤器解决了您的问题:

primary:数组可以包含数据,但过滤器会在下拉列表中隐藏它
次要:过滤器可以更改为在下拉列表中隐藏和显示

那么,剩下的问题是如何从非Ext代码中更改过滤器。在这里,您可以使用Ext只是javascript,可以从与Ext无关的任何其他javascript调用。
因此:
1.在HTML DOM可以访问的位置/范围中添加一些应用过滤器进行添加和删除的函数
1.将它们添加到(纯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)
})

实际使用时需要考虑的事项(而不是在简化的示例中):

  • addJamesdelJames和它们在对象或立即数函数中使用的变量(noPablonoJames等) Package 起来,这样这些变量就不会扰乱全局(窗口)范围
  • 重写过滤器变量以更好地共享实现(类似于获取名称列表并生成过滤器数组或过滤器函数以过滤掉这些名称的函数)

相关问题