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

Question

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

问题是我想在客户端进行过滤（默认情况下，组合模式属性为'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”配置选项为“真”

1. 构建的MyStore类设置了“模式”配置选项为“本地” （请参阅内置的另一个配置组合配置代码波纹管）

这里是我的简单的例子：

构建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 
} 

Answer 2

添加监听到你的店的“负荷”事件，做过滤，去除或标记记录，如果删除它是明确加载组合组件，如果标记，你需要识别这些国旗在组合和显示或不...

如果我没有看到你的代码存储和组合，所以我可以给你只有一般的想法

Answer 3

你会想要使用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 4

在我而言，我不得不配置选项lastQuery:''添加到组合。

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