Extjs4 带有搜索/筛选选项的ExtJS项目选择器

我正在寻找一个带有搜索/筛选选项的ExtJS项目选择器。是否有一个现有的插件或任何想法来实现它？由于itemselector在内部使用Multiselect，我是否需要在Multiselect上实现我自己的版本？

Multiselect扩展具有配置tbar（顶栏）属性的选项。我使用以下代码配置itemselector的“toField”：

 tbar : {
                xtype: 'toolbar',
                flex: 1,
                dock: 'top',
                items: [
                    'Filter:',
                    {
                        xtype: 'textfield', 
                        fieldStyle: 'text-align: left;',                            
                        enableKeyEvents: true,
                        listeners: {
                            scope: this,
                            change : function(field, newValue, oldValue, options) {                                 
                                var toStore = this.toField.boundList.getStore();                                    
                                toStore.clearFilter();
                                if (String(newValue).trim() != "")
                                {
                                    toStore.filterBy(function(rec, id){
                                        return this.filterFunc(rec, newValue);  
                                    }, this);
                                }
                            }
                        }
                    }
                ]
            }

我的过滤基金是：

filterFunc: function(rec, filter)
{        
    var value = rec.get(this.displayField);

    if (this.filterIgnoreCase) value = value.toLocaleUpperCase();
    if (this.filterIgnoreCase) filter = filter.toLocaleUpperCase();

    if (Ext.isEmpty(filter)) return true;

    if (this.filterAnyMatch && this.filterWordStart)
    {
        var re_opts = this.filterIgnoreCase ? 'i' : '';
        var re = new RegExp('(^|[\\s\\.!?;"\'\\(\\)\\[\\]\\{\\}])'+Ext.escapeRe(filter), re_opts);
        return re.test(value);
    }
    else if (this.filterAnyMatch)
    {
        var re_opts = this.filterIgnoreCase ? 'i' : '';
        var re = new RegExp(Ext.escapeRe(filter), re_opts);
        return re.test(value);
    }
    else
    {
        var re_opts = this.filterIgnoreCase ? 'i' : '';
        var re = new RegExp('^\s*'+Ext.escapeRe(filter), re_opts);
        return re.test(value);
    }
}

---

multiselect扩展具有配置tbar（顶栏）属性的选项。我使用以下代码配置itemselector的“toField”：

 tbar : {
                xtype: 'toolbar',
                flex: 1,
                dock: 'top',
                items: [
                    'Filter:',
                    {
                        xtype: 'textfield', 
                        fieldStyle: 'text-align: left;',                            
                        enableKeyEvents: true,
                        listeners: {
                            scope: this,
                            change : function(field, newValue, oldValue, options) {                                 
                                var toStore = this.toField.boundList.getStore();                                    
                                toStore.clearFilter();
                                if (String(newValue).trim() != "")
                                {
                                    toStore.filterBy(function(rec, id){
                                        return this.filterFunc(rec, newValue);  
                                    }, this);
                                }
                            }
                        }
                    }
                ]
            }

我的过滤基金是：

filterFunc: function(rec, filter)
{        
    var value = rec.get(this.displayField);

    if (this.filterIgnoreCase) value = value.toLocaleUpperCase();
    if (this.filterIgnoreCase) filter = filter.toLocaleUpperCase();

    if (Ext.isEmpty(filter)) return true;

    if (this.filterAnyMatch && this.filterWordStart)
    {
        var re_opts = this.filterIgnoreCase ? 'i' : '';
        var re = new RegExp('(^|[\\s\\.!?;"\'\\(\\)\\[\\]\\{\\}])'+Ext.escapeRe(filter), re_opts);
        return re.test(value);
    }
    else if (this.filterAnyMatch)
    {
        var re_opts = this.filterIgnoreCase ? 'i' : '';
        var re = new RegExp(Ext.escapeRe(filter), re_opts);
        return re.test(value);
    }
    else
    {
        var re_opts = this.filterIgnoreCase ? 'i' : '';
        var re = new RegExp('^\s*'+Ext.escapeRe(filter), re_opts);
        return re.test(value);
    }
}

---

这对我来说效果很好，但我不得不对ItemSelector代码进行一些修改，以便将tbar放入其中。我是否错过了一些东西，可以让您在不修改原始ux.form.ItemSelector代码的情况下实现此功能？@codekoala我记不起我到底做了什么，我已经8个月没有使用ExtJS了。据我所知，我当时在ExtJS4上，我不记得对ItemSelector做过任何特殊更改。可能只是版本问题。这对我来说非常有效，但我不得不对ItemSelector代码进行一些修改，以便将tbar放在那里。我是否错过了一些东西，可以让您在不修改原始ux.form.ItemSelector代码的情况下实现此功能？@codekoala我记不起我到底做了什么，我已经8个月没有使用ExtJS了。据我所知，我当时在ExtJS4上，我不记得对ItemSelector做过任何特殊更改。可能只是版本问题。