javascript - ExtJs如何在一个 Controller 下创建和管理动态 View

Question

我只是非常简单地了解 ExtJs 中的 MVC 概念。您能帮我填补知识空白吗？我只知道如何以这种方式创建单个 View ...

Ext.define('My.controller.Contacts', {
    extend: 'Ext.app.Controller',
    stores: ['Contacts'],
    views: ['ContactsGrid'],
    refs: [{ref: 'grid', selector: '', xtype: 'contacts-grid', autoCreate: true}],

    getGrid: function() {
        var g = this.getGrid();
        return g;
    }
});

this.getGrid() 似乎为您提供了相同的 GridView 。但如果:

1. 我想动态创建 GridView 的多个实例，如何？按照惯例我应该将它们存储在哪里？

2. 对于我创建的每个 View ，我想给它一个配置对象，就像我的做法 Ext.create(somecontrol, config); 但在 MVC 中，它们处于这种情况引用文献？我应该在哪里为我创建的每个 View 实例插入此配置对象？

3. 我有一个商店Contacts，所有这些 View 和商店之间有什么关系？一人一个，还是全部共享一个商店？

非常感谢。

Answer 1

对于所有这些，答案都是“视情况而定”，

1. 如果您在启动时读取的内容，我会在 View 定义中创建动态 View ，否则，如果您单击按钮并添加 View 元素，则可以在 Controller 中拥有所有内容，或者您​​可以拥有 Controller 调用 View 上实际创建 View 的方法。我可能会选择后者，但这取决于您想要如何封装 View 逻辑。

   就“存储”这些 View 而言，惯例是为您的 View 提供一个唯一的 ID，以便您以后可以引用它，类似于 DOM 查找。但显然您也可以将组件的引用存储在变量中。这实际上取决于你在做什么。如果 Controller 正在构造一堆动态元素，则仅保留对 Controller 中这些元素的引用可能是有意义的。

2. View 通常在 MVC 方法下在自己的文件中定义，本质上这是一个带有配置的 Ext.define block 。 Sencha 网站上有一些示例 MVC 应用程序，我建议您查看一下。

3. 这实际上取决于您在做什么。如果您有多个“联系人” View ，则让多个 View 引用单个商店可能是有意义的，但通常商店代表特定数据的集合。例如书籍、通讯录或员工。因此，如果 View 需要显示图书和员工，则在 View 中引用这些商店是有意义的。

我认为您要问的关键是我在哪里封装动态 View 的逻辑。 我建议创建可重用的 View 组件来封装您的显示逻辑，并让 Controller 创建这些组件并为它们提供数据来填充自己。这为您提供了一个很好灵活的关注点分离。

如果您刚刚开始使用 ExtJS 及其 MVC 实现，我强烈建议您尝试一下 Sencha Architect。我不会用它构建一个真正的项目，但它非常适合组合快速的小演示应用程序，并且它会为您生成一个 MVC 结构。看看它为您提供了什么，并查看 Sencha 网站上的演示应用程序。