Question

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

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

无论如何都没有发生这种情况，即使在商店中的过滤器之后，组合框中的数据保持不变。我似乎无法找到像这样的双重组合框架的任何细节。

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

 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编写的，所以你不能直接使用它，但ExtJS的原理是相同的。）< / p>

ExtJS - 远程过滤会导致问题

1 个答案: