实际上,您不应该在组件之间共享存储。这可能违反直觉,但 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的原理是一样的)。