1

a) 这里有一个 JS fiddle 来帮助展示正在发生的事情：http: //jsfiddle.net/CKpPW/ b) 要复制这个问题，选择第一个下拉菜单并注意全名是如何出现的。然后展开第二个下拉菜单并注意第一个下拉菜单的显示是如何消失的。

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

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

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

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

1 回答 1

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

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

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

或者您可以发挥创意并尝试实现自己的代理，混合从服务器加载和在客户端缓存。通过覆盖内存代理很容易实现，但很快你就会遇到一堆棘手的问题......如何处理具有不同参数的操作的缓存？如何处理请求参数？除了读取之外的其他 CRUD 操作呢？等等，反正如果你想尝试一下，你可以看看这个扩展来获得灵感（它是为Touch编写的，所以你不能直接使用它，但是ExtJS的原理是一样的）。

于 2013-06-20T22:42:23.170 回答