Локальная фильтрация удаленного хранилища comboxes в ExtJs

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

Для этого необходимо:

1. Создать класс MyStore с параметром конфигурации «isAutoLoad» как «true»
2. В вашей конфигурации combobox установите опцию конфигурации «mode» на «local» (см. «Встроенный код конфигурации комбо» ниже для другой конфигурации)

Вот мой короткий пример:

Создание переменной 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

В моем случае мне пришлось добавить опцию конфигурации lastQuery:'' в комбо.

объяснение: http://progex.wordpress.com/2010/03/26/extjs-combo-dropdown-does-not-filter-on-first-trigger/

Answer 3

Вы захотите использовать метод store.filter ().Вы можете использовать это, чтобы использовать введенную пользователем информацию для фильтрации вашего магазина, который использует поле со списком.Это взято из документации ExtJS API для data.store.

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

Добавьте прослушиватель в свой магазин по событию 'load', выполните фильтрацию, удалив или пометив записи, если при удалении будет очищена загрузка в комбо-компонент, если при пометке необходимо распознать эти флажки в комбо и показать или нет ...

Трудно представить более подробную информацию, если я не вижу ваш код для магазина и комбо, поэтому я могу дать вам только общее представление