ExtJS4 - 每个面板实例存储？

Question

我对 Ext 中的 MVC 模式非常陌生。 我有一个标签面板，其中包含同一组件的多个实例（我们称之为产品），每个实例都应在打开时调用服务器，并带有 id 参数。

现在，为了创建这些选项卡 - 我在产品控制器中使用它 这会创建一个新的视图实例，但我觉得它真的不正确。

createMainView: function (opts) {
    return Ext.widget("productDisplay", opts);
}

我从我的“主”控制器中调用它，如下所示：

var tab = this.application.getController("Products")
    .createMainView({ productId : id, closable: true })

tabs.add(tab);
tabs.setActiveTab(tab);

正确使用视图的多个实例的正确方法是什么，每个实例都有一个存储和行为的实例（通过控制器）。

我可以为他们使用一个命名的商店（在 app/store/product.js 下有一个 js 文件）吗？

我应该从控制器手动调用商店上的load（传递productId），还是有更好的方法？

Answer 1

这是一个非常广泛和有趣的问题，需要大量而彻底的解释（您可以在 Sencha.com 的指南和手册中找到顺便说一句）。我想强调几点，以便您可以开始：

1. 存储通常是全局对象。通常，您不会保留一个商店的两个实例。如果您需要在几个不同的视图中显示来自该存储的信息，您可以使用过滤（本地或远程）。唯一需要克隆商店的情况是，如果您想在 2 个以上的不同视图中同时显示来自该商店的不同信息。

2. 控制器通常由主应用程序对象生成。您不必做任何特别的事情 - 只需在 controllers: [] 属性中列出它们。然后在应用程序启动时生成（在创建和渲染视图之前）。记住这一点。

3. 如果您有模态视图 - 可以手动创建它并重新使用它或销毁并稍后重新创建。您可以向创建这些视图的控制器添加过滤和加载。如果需要，您可以为不同的选项卡重复使用相同的视图/控制器对象。

4. 如果您的视图呈现对象的一个​​实例（例如每个选项卡上显示一个产品）- 不要将商店附加到这些视图。只需将它们传递给单个模型（记录）。

Answer 2

我建议在视图的 initComponent 方法中创建仅与该视图实例相关的存储。

您的控制器的control 处理程序应该以能够区分哪个视图分派事件的方式进行编码。这应该不会太难，因为几乎所有视图事件都包含对触发事件的组件的引用。如果需要，您可以使用相关查询选择器，例如：myEventFiringComponent.up('anotherComponent') 或 myEventFiringComponent.down('anotherComponent') 在同一视图中获取不同组件的句柄。

请参阅this post 了解完整说明。