Javascript ExtJS-远程筛选导致问题

a） 下面是一个JS提琴来帮助展示正在发生的事情： b） 要复制问题，请选择第一个下拉列表并注意全名的显示方式。然后展开第二个下拉列表，注意第一个下拉列表的显示是如何消失的

我的假设是，之所以会发生这种情况，是因为两个组合框使用相同的存储，因此当过滤器应用于存储时，它将应用于所有内容，因此当该记录不再存在时，它将默认返回到值为多少的值

不管怎样，有没有办法避免这种情况发生，也就是说，即使在存储区上设置了过滤器，组合框中的数据也会保持不变。我似乎找不到像这样的双重组合框的任何细节

以下是展开时需要使用的侦听器，因为我需要能够以不同方式过滤每个组合框：

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

---

事实上，您不应该在组件之间共享存储。这可能违反直觉，但store并不表示整个数据，而仅表示组件当前使用的子集。整个数据的接口是代理

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()
});

var proxy=Ext.create（'Ext.data.proxy.Memory'{
读者：“json”，
数据：[
{'id'：0，“FirstName”：“Frédéric”，“LastName”：“Bastiat”}，
{'id'：1，“名字”：“约翰”，“姓氏”：“恶魔岛”}，
{'id'：2，“名字”：“纳沙”，“姓氏”：“卡托加”}
//...
]    
});
var store1=Ext.create（'Ext.data.Store'{
代理：代理，
字段：['id'，'FirstName'，'LastName']，
remoteFilter:true，
remoteSort：是的，
筛选器：[{property:'id'，value:1}]
});
var store2=Ext.create（'Ext.data.Store'{
代理：代理，
字段：['id'，'FirstName'，'LastName']，
remoteFilter:true，
remoteSort：是的，
筛选器：[{property:'id'，value:2}]
});
//创建附加到状态数据存储的组合框
Ext.create（'Ext.form.ComboBox'{
fieldLabel:“选择名称”，
店面：店面1，
id:'名称组合'，
queryMode:'本地'，
displayField:“FirstName”，
valueField:'名字'，
displayTpl:Ext.create（'Ext.XTemplate'，
'',
'',
“{FirstName}”，
'',
' ',
'',
“{LastName}”，
'',
''),
renderTo:Ext.getBody（）
});
//创建附加到状态数据存储的组合框
Ext.create（'Ext.form.ComboBox'{
fieldLabel:“选择名称”，
id:'nameCombo2'，
queryMode:'本地'，
displayField:“FirstName”，
valueField:'名字'，
店面:店面2,，
displayTpl:Ext.create（'Ext.XTemplate'，
'',
'',
“{FirstName}”，
'',
' ',
'',
“{LastName}”，
'',
''),
renderTo:Ext.getBody（）
});

现在，您的下一个问题可能是关于如何将服务器端数据放入客户端内存代理。。。不幸的是，该框架没有提供任何现成的解决方案

最直接的方法可能是使用常规AJAX请求加载数据一次，将其放入内存代理，然后将该代理传递给所有存储

---

或者，您可以发挥创意，尝试实现自己的代理，将服务器加载和客户端缓存混合在一起。通过重写内存代理实现这一点非常简单，但很快您就会遇到一系列棘手的问题。。。如何处理具有不同参数的操作的缓存？如何处理请求参数？除了读取之外，其他CRUD操作呢？等等。如果你想尝试一下，你可以从中寻找灵感（它是为触摸而写的，所以你不能直接使用它，但是ExtJS的原理是一样的）。

事实上，你不应该在组件之间共享存储。这可能违反直觉，但store并不表示整个数据，而仅表示组件当前使用的子集。整个数据的接口是代理

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()
});

var proxy=Ext.create（'Ext.data.proxy.Memory'{
读者：“json”，
数据：[
{'id'：0，“FirstName”：“Frédéric”，“LastName”：“Bastiat”}，
{'id'：1，“名字”：“约翰”，“姓氏”：“恶魔岛”}，
{'id'：2，“名字”：“纳沙”，“姓氏”：“卡托加”}
//...
]    
});
var store1=Ext.create（'Ext.data.Store'{
代理：代理，
字段：['id'，'FirstName'，'LastName']，
remoteFilter:true，
remoteSort：是的，
筛选器：[{property:'id'，value:1}]
});
var store2=Ext.create（'Ext.data.Store'{
代理：代理，
字段：['id'，'FirstName'，'LastName']，
remoteFilter:true，
remoteSort：是的，
筛选器：[{property:'id'，value:2}]
});
//创建附加到状态数据存储的组合框
Ext.create（'Ext.form.ComboBox'{
fieldLabel:“选择名称”，
店面：店面1，
id:'名称组合'，
queryMode:'本地'，
displayField:“FirstName”，
valueField:'名字'，
displayTpl:Ext.create（'Ext.XTemplate'，
'',
'',
“{FirstName}”，
'',
' ',
'',
“{LastName}”，
'',
''),
renderTo:Ext.getBody（）
});
//创建附加到状态数据存储的组合框
Ext.create（'Ext.form.ComboBox'{
fieldLabel:“选择名称”，
id:'nameCombo2'，
queryMode:'本地'，
displayField:“FirstName”，
valueField:'名字'，
店面:店面2,，
displayTpl:Ext.create（'Ext.XTemplate'，
'',
'',
“{FirstName}”，
'',
' ',
'',
“{LastName}”，
'',
''),
renderTo:Ext.getBody（）
});

现在，你的下一个问题可能是关于如何得到你的服务