ExtJS — удаленная фильтрация вызывает проблемы

Действительно, вы не должны разделять хранилища между компонентами. Это может показаться нелогичным, но хранилище представляет не все данные, а только подмножество, с которым в данный момент работает компонент. Интерфейсом ко всем данным является прокси.

component <=> store <=> proxy <=> actual data

Поэтому, если вы хотите поделиться данными, вам нужно поделиться прокси, а не хранилищем.

Вот, например, как исправить скрипку:

var proxy = Ext.create('Ext.data.proxy.Memory', {
    reader: 'json',
    data : [
        {'id':0,"FirstName":"Frédéric", "LastName":"Bastiat"},
        {'id':1,"FirstName":"John", "LastName":"Alcatraz"},
        {'id':2,"FirstName":"Nasha", "LastName":"Cartoga"}
        //...
    ]    
});

var store1 = Ext.create('Ext.data.Store', {
    proxy: proxy,
    fields: ['id','FirstName', 'LastName'],
    remoteFilter:true,
    remoteSort:true,
    filters: [{property: 'id', value: 1}]
});

var store2 = Ext.create('Ext.data.Store', {
    proxy: proxy,
    fields: ['id','FirstName', 'LastName'],
    remoteFilter:true,
    remoteSort:true,
    filters: [{property: 'id', value: 2}]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose Name',
    store: store1,
    id: 'nameCombo',
    queryMode: 'local',
    displayField: 'FirstName',
    valueField: 'FirstName',
    displayTpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
        '<tpl if="FirstName">',
        '{FirstName}',
        '</tpl>',
        ' ',
        '<tpl if="LastName">',
        '{LastName}',
        '</tpl>',
        '</tpl>'),
    renderTo: Ext.getBody()
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose Name',
    id: 'nameCombo2',
    queryMode: 'local',
    displayField: 'FirstName',
    valueField: 'FirstName',
    store: store2,
    displayTpl: Ext.create('Ext.XTemplate',
        '<tpl for=".">',
        '<tpl if="FirstName">',
        '{FirstName}',
        '</tpl>',
        ' ',
        '<tpl if="LastName">',
        '{LastName}',
        '</tpl>',
        '</tpl>'),
    renderTo: Ext.getBody()
});

Теперь ваш следующий вопрос, вероятно, будет о том, как передать ваши данные на стороне сервера в этот прокси-сервер памяти на стороне клиента... К сожалению, фреймворк не предлагает готового решения.

Самый простой способ, вероятно, — загрузить ваши данные один раз с помощью обычного запроса AJAX, поместить их в прокси-сервер памяти и передать этот прокси-сервер всем вашим магазинам.

Или вы можете проявить творческий подход и попробовать реализовать свой собственный прокси, который сочетает загрузку с сервера и кэширование на клиенте. Этого довольно просто добиться, переопределив прокси-сервер памяти, но достаточно скоро вы столкнетесь с кучей сложных вопросов... Как обрабатывать кэширование для операций с разными параметрами? Как вообще обрабатывать параметры запроса? А как насчет других операций CRUD, помимо чтения? И т. д. Если вы все равно хотите попробовать, вы можете посмотреть эту расширение для вдохновения (оно написано для Touch, поэтому вы не можете использовать его напрямую, но принципы те же, что и для ExtJS).