Question

我有一个ExtJs组合框。它的存储使用JSON加载（使用下面的MyStore类）。我想将所有值加载到商店，然后使用在组合的文本字段中输入的文本过滤它们（最好使用typeAhead功能）。

问题是我想在客户端进行过滤（默认情况下，combo的mode属性为'remote'）。每次输入内容时，我都不希望我的组合重新加载它的商店。我怎么能这样做？

感谢。

这是我的商店类：

MyStore = Ext.extend(Ext.data.JsonStore, {
    constructor: function(jsonUrl, storeId, id, description, isAutoLoad, cfg) {
        cfg = cfg || {};
        GenericStore.superclass.constructor.call(this, Ext.apply({
            storeId: storeId,
            root: 'result',
            url: jsonUrl,
            autoLoad: isAutoLoad,
            fields: [
                {
                    name: id
                },
                {
                    name: description
                }
            ]
        }, cfg));
    }    
});

和组合：

            xtype: 'combo',
            fieldLabel: 'The Combo',
            width: 150,
            store: myStoreData,
            valueField: 'id',
            displayField: 'name',
            minChars : 0,
            editable : false,
            itemId : 'my-combo'

Answer 1

要实现这一目标，您必须：

使用“isAutoLoad”配置选项构建MyStore类为“true”
在你的组合框配置中，将“mode”配置选项设置为“local”（参见另一个配置下的内置组合配置代码）

这是我的简短例子：

构造myStoreData变量

var myStoreData = new MyStore({
    autoLoad: true, //so the store will load automatically
    ...any_other_config_option...
});

构建了combo配置

{
     xtype: 'combo',
     fieldLabel: 'The Combo',
     width: 150,
     store: myStoreData, 
    // myStoreData is already loaded before as it have 'autoLoad' config set to true 
    // and act as localstore to populate the combo box item 
    // when the combo "mode" config set to 'local'
     valueField: 'id',
     displayField: 'name',
     minChars : 0,
     editable : true, //before was editable : false,
     itemId : 'my-combo',
     mode: 'local', // by default this was mode: 'remote'
     typeAhead: true // by default this was typeAhead: false
}

Answer 2

您将需要使用store.filter（）方法。您可以使用此信息来使用用户输入的信息来过滤组合框使用的商店。这取自data.store的ExtJS API文档。

store.filter([
{
property     : 'name',
value        : 'Ed',
anyMatch     : true, //optional, defaults to true
caseSensitive: true  //optional, defaults to true
},
//filter functions can also be passed
{
fn   : function(record) {
return record.get('age') == 24
},
scope: this
}
]);

Answer 3

在我的情况下，我必须将配置选项lastQuery:''添加到组合中。

解释：http://progex.wordpress.com/2010/03/26/extjs-combo-dropdown-does-not-filter-on-first-trigger/

Answer 4

在'load'事件中为你的商店添加监听器，通过删除或标记记录进行过滤，如果删除它是明确加载到组合组件，如果标记你需要识别组合中的那些标志并显示或不...

如果我没有看到你的商店和组合代码那么很难得到更多细节，所以我只能给你一般的想法

在ExtJs中本地过滤comboxes远程存储

4 个答案: