在 ExtJs 中本地过滤组合框远程存储

Posted 2023-02-26

【中文标题】在 ExtJs 中本地过滤组合框远程存储

【英文标题】：Filtering a comboxes remote store locally in ExtJs

【发布时间】：2011-01-21 12:13:05

【问题描述】：

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

问题是我想在客户端进行过滤（默认情况下，组合的模式属性是“远程”）。我不希望我的组合每次输入内容时都重新加载它的商店。 我该怎么做？

谢谢。

这是我的商店类：

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'

【参考方案1】：

要实现这一点，您必须：

构造 MyStore 类，将“isAutoLoad”配置选项设置为“true” 在您的组合框配置中，将“模式”配置选项设置为“本地”（有关其他配置，请参阅下面的构建组合配置代码）

这是我的简短示例：

构造 myStoreData 变量

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

构建组合配置

     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

【讨论】：

谢谢，这有帮助。 （虽然不是isAutoLoad，而是autoLoad，试图编辑它，但我没有编辑权限）由于项目特定的限制，我无法使用autoLoad功能，但我在combo的焦点事件上手动加载了商店和它在“本地”模式组合上运行良好。

很高兴知道它对您有帮助。祝你的项目好运

这对我不起作用。我使用 ExtJS 4.2 并设置了queryMode: 'local'，但它本质上只是调用store.filter()，当商店有配置remoteFilter: true 时，它会加载商店。

【参考方案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

]);

【讨论】：

是的，combo 在其 doQuery 方法中调用此方法。你的意思是我应该重写这个方法吗？如果是这样，怎么做？谢谢

初始数据集是静态的吗？您可以将其输出到可用于填充本地数据存储的 json 文件。然后您可以尝试使用 mode:local 选项.... 从那里您可以使用对组合框使用的存储的引用来执行 filter() 方法。请参阅 Gajahlemu 的代码......那里有很多很好的设置可以满足您的要求。

【参考方案3】：

就我而言，我必须将配置选项 lastQuery:'' 添加到组合中。

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

【参考方案4】：

在“加载”事件时将侦听器添加到您的商店，通过删除或标记记录进行过滤，如果删除它是明确加载到组合组件，如果标记您需要识别组合中的那些标记并显示与否...

如果我没有看到您的商店和组合代码，很难提供更多细节，所以我只能给您大致的想法