ExtJS - 远程过滤导致问题 [英] ExtJS - Remote filtering causes problems

问题描述

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

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

是否有无论如何不这样做甚至在商店的过滤器之后，组合框中的数据保持不变。我似乎无法找到这样的组合框的双重细节。

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

 听众：{
展开：{
 fn：function（）{
名称。 clearFilter（真）; 
 names.filter（'id'，1）; 
 
 
 
 
 $ div class =h2_lin>解决方案事实上，你不应该在组件之间共享商店。这可能是违反直觉的，但商店不代表整个数据，但只是组件当前正在使用的子集。整个数据的接口是代理。 
 
 
 组件< =>存储< =>代理< =>实际数据
  
所以如果你想共享数据，你需要共享的是代理，而不是
 
 
 
例如，如何修复你的小提琴： 
 
 
  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}，
 { '：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}] 
}）; 
 $ b $ var store2 = Ext.create（'Ext.data.Store'，{
 proxy：proxy，
 fields：['id'，'FirstName'，'LastName' ]，
 remoteFilter：true，
 remoteSort：true，
 filters：[{property：'id'，value：2}] 
}）; 
 
 //创建连接到状态数据存储区的组合框
 Ext.create（'Ext.form.ComboBox'，{
 fieldLabel：'选择名称'，
 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（）
}）; 
 
 //创建连接到状态数据存储区的组合框
 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请求，把它放到一个内存代理，并通过这个代理到所有的商店。
 
 
或者你可以变得有创意，并尝试实现你自己的代理混合加载服务器和客户端上的缓存。这很简单，通过覆盖内存代理，但很快就会遇到一堆棘手的问题...如何处理不同params的操作缓存？如何处理请求参数？除了阅读，其他CRUD操作呢？等如果你想尝试一下，你可以看这个（它是为Touch编写的，所以你不能直接使用它，但是ExtJS的原理是一样的）。
a) Here's a JS fiddle to help show what's happening: http://jsfiddle.net/CKpPW/
b) To replicate the issue, select the first drop down and notice how the full name appears. Then expand the second drop down and notice how the display of the first drop down goes away.

My assumption is that this happens because both comboboxes use the same store so when a filter is applied to the store it applies to everything, and thus when that record no longer exists it defaults back to whatever the value is.

Is there anyway to make that not happen, aka even after a filter on a store the data in the combobox stays the same. I can't seem to find any details on dualing comboboxes like this.

Here's the listener that needs to happen on expand as I need the ability to filter each combobox differently:
 listeners: {
     expand: {
         fn: function(){
             names.clearFilter(true);
            names.filter('id', 1);                
        }
    }
},

解决方案
Indeed, you're not supposed to share stores between components. That may be counter-intuitive, but store do not represent the whole data, but only the subset the component is currently working with. The interface to the whole data is the proxy.
component <=> store <=> proxy <=> actual data
So if you want to share data, what you need to share is the proxy, not the store.

Here's, for example, how to fix your 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()
});
Now, your next question will probably be about how to get your sever-side data into that client-side memory proxy... Unfortunately, the framework doesn't offer any solution out of the box.

The most straightforward way is probably to load your data once with a regular AJAX request, put it into a memory proxy, and pass this proxy to all your stores.

Or you can get creative and try to implement your own proxy that mixes loading from the server and caching on the client. That's quite simple to achieve by overriding the Memory proxy, but soon enough you'll be running into a bunch of tough questions... How to handle the caching for operations with different params? How to handle request params at all? What about the other CRUD operations, beyond read? Etc. If you want to give it a try anyway, you can look at this extension for inspiration (it is written for Touch, so you can't use it directly, but the principles are the same for ExtJS).

                        
这篇关于ExtJS  - 远程过滤导致问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！