javascript - ExtJS - 远程过滤导致问题

Question

a) 这是一个 JS fiddle 来帮助显示正在发生的事情:http://jsfiddle.net/CKpPW/b) 要重现该问题，请选择第一个下拉列表并注意全名的显示方式。然后展开第二个下拉列表并注意第一个下拉列表的显示如何消失。

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

有没有办法让这种情况不会发生，也就是说，即使在存储上进行过滤之后，组合框中的数据也保持不变。我似乎找不到有关这样的双重组合框的任何详细信息。

这是展开时需要发生的监听器，因为我需要能够以不同的方式过滤每个组合框:

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

Answer 1

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

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

所以如果要共享数据，需要共享的是代理，而不是存储。

例如，以下是如何修复 fiddle :

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 编写的，所以不能直接使用，但 ExtJS 的原理是一样的)。