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

Question

a) Вот скрипка JS, которая поможет показать, что происходит: http://jsfiddle.net/CKpPW/ b) Чтобы воспроизвести проблему, выберите первый снимок и обратите внимание, как появится полное имя. Затем разверните второй снимок и обратите внимание, как отображает первый снимок.

Я предполагаю, что это происходит из-за того, что оба comboboxes используют один и тот же магазин, поэтому, когда фильтр применяется к хранилищу, он применяется ко всему, и, следовательно, когда эта запись больше не существует, она по умолчанию возвращает значение независимо от значения.

Есть ли все равно, чтобы этого не произошло, иначе даже после фильтра в хранилище данные в combobox остаются неизменными. Кажется, я не могу найти никаких подробностей о дуальности comboboxes, подобных этому.

Вот слушатель, который должен произойти на расширение, как мне нужна возможность фильтровать каждый выпадающий по-разному:

listeners: { 
    expand: { 
     fn: function(){ 
      names.clearFilter(true); 
      names.filter('id', 1);     
     } 
    } 
}, 

Answer 1

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

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, кроме чтения? И т. Д. Если вы хотите все равно попробовать, вы можете посмотреть на this extension для вдохновения (написано для Touch, поэтому вы не можете использовать его напрямую, но принципы для OSJ) одинаковы.