在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/