Javascript 不同组件上的单个或多个存储实例？

这更像是我在这里提出的最佳实践/建议，因为我已经找到了解决问题的方法，但我不知道：

• "问题"是否得到解决;
• 如果解决方案是最好的

等等，让我们回到问题上来。我有一个book manager应用程序，它使用两种对象：

book

和

Author

。可以想象，每本

书

都有一位

作者

，因此，我需要：

• 定义作者的管理者（我使用了网格）
• 为一本书选择作者的方法（我使用了一个组合框）

在ExtJS中，这涉及一个

Ext.grid.Panel

和一个

Ext.form.field.ComboBox

。 我在每个小部件上使用了相同的存储（

AuthorStore

），因为我的

Author

类非常简单（只有

id

和

authorName

作为字段）。最初，我对存储使用了

autoLoad:true

属性，但是，正如我发现的，有一种更好的方法：在

render

或

afterrender

事件中为所需组件加载存储。我完全同意这一点

之后，我注意到网格和组合都有不同的存储实例（每个实例都加载数据）。这对我来说似乎很奇怪，因为基本上，两个存储实例都持有完全相同的数据。此时，我希望以某种方式为这两个组件共享相同的存储实例。我做了这样的事情：

• 定义了一个返回单个存储实例的函数：

  function getAuthorStore(){
       return Ext.StoreMgr.lookup('authorStore') || Ext.create('BM.store.AuthorStore');
  }
  

• 将网格的存储属性从

  store:'AuthorStore'，

  更改为

  store:getAuthorStore（）

• 对组合框也做了同样的事情

• 更改了

  AuthorStore

  以声明

  load

  事件的附加属性和侦听器：

      storeId: 'authorStore',            
      loaded: false,
      listeners: {
          load: function(store, records, success, operation, options) {
              store.loaded = success;
              console.log('store <<' + store.storeId + '>> was fully reloaded');
          }
      }
  

• 最后，我做了一些类似于组合框的事情（请注意使用的

  queryMode:'local'

  ），这样组合的存储在打开组合项时不会自动加载

      ....
      queryMode: 'local',
      store: getAuthorStore(),
      listeners: {
          render: function(combo, options) {
              var store = combo.getStore();
              if (!store.loaded) {
                  store.load();
              }
          }
      }
  

我想知道的是以下问题的答案：

单店实例的想法是好还是坏

让我们假设网格上有一些过滤器。这些过滤器将导致组合显示，比如说，组合中的项目较少， 因为他们共享同一个商店？（因此，在本例中，商店 不应在多个小部件之间共享）

是否有更好/更清洁的解决方案

非常感谢您花时间阅读我的问题。如果您有想法，请分享您的想法

如果您希望在多个视图中具有相同的数据，则单个存储是一个好主意

没错，过滤器将应用于所有商店

在Ext5中，实现了“连锁商店”的概念，有关更多信息，请参见此处：

---

你可以在这里看到Ext5连锁商店的运作：谢谢大家的回答。@Saki：你的ExtJS例子很有名！继续努力！；-）

    ....
    queryMode: 'local',
    store: getAuthorStore(),
    listeners: {
        render: function(combo, options) {
            var store = combo.getStore();
            if (!store.loaded) {
                store.load();
            }
        }
    }