javascript - Controller 如何在 Extjs 应用程序中与 MVC 一起使用

Question

我是 Extjs 的新手，在阅读了一些关于 Extjs MVC 模式的教程和博客之后，我不清楚如何在 extjs 平台上构建一个复杂的应用程序(比如 10 - 15 个页面导航)。

来自 sencha 论坛，建议所有 Controller 都需要在 app.js 中预先定义(因为与加载 DOM 的 UI 相比，预先加载 Controller 不会影响性能。请注意，这是由sencha 论坛管理员)。

通过上述方法，我有几个问题:

• Controller 何时被实例化？它们是否都在应用加载时加载和实例化，并一直监听其中定义的事件直到应用的生命周期？

• 在 Controller 类中定义 Models[]、Stores[] 和 Views[] 是什么意思？它们何时加载和实例化？

• 页面导航如何与 Controller 协同工作？如果导航到新页面只是转换为 getParentContainer.remove(componentX) 和 getParentContainer.add(componentY)，那么 Controller 的用途仅仅是一个处理事件的文件？

• Controller 有任何作用域(实例化 > 销毁)吗？如果不是，如何创建和销毁多个实例，以便我的操作不会被错误的实例监听(我看到一些博客提到 Controller 大多是单例的)？

有人可以解释一下吗？任何示例/插图都会有很大帮助。

谢谢

Answer 1

在 Ext JS 中，Ext.app.Controller 类(开箱即用)随应用程序的初始化而实例化。事实上， Controller 的 init() 在应用程序本身的 launch() 之前被调用。所以，是的， Controller 是“lifers”，从应用程序启动的那一刻起在应用程序的整个生命周期中监听。 有动态创建和销毁 Controller 的方法，但这需要自定义实现。

然而，在 Ext JS 5 中，引入了 ViewController 的概念。它扩展了与 Ext.app.Controller 相同的基础 (Ext.app.BaseController)，但与上面不同的是，ViewController 与其绑定(bind)的 View 实例一起创建和销毁。这是由框架自动处理的——无需自定义实现即可工作。

关于模型:[]、存储:[]和 View :[]，这些基本上是 Controller 的 requires()，指示它确保加载这些类。这些约定只是从它们的特定命名空间(例如，AppName.view、AppName.store 等)要求这些类的简写方式。对于 View 和存储，此约定还将为所需的类生成 getter。

关于导航，由您决定。您可以通过多种方式创建 Ext JS 应用程序。你可以做“单页”应用程序，其中导航可能与你提到的非常相似(我的很多人都这样做)。您还可以创建多页面应用程序，这些应用程序可以提供更传统的网站页面到页面的感觉，但根据每个页面的需要为每个页面利用通用代码和类。

最后，关于监听器碰撞的问题，答案是“视情况而定”。如果你使用的是 Ext JS 4，你只有有“lifer” Controller ，所以避免监听器中的冲突是非常了解你在监听器中使用的选择器的问题( ) 或 control() 部分，并确保您没有复制监听器(通过显式复制或过于广泛的选择器)，除非这是您想要做的。然而，在 Ext JS 5 中，ViewController 的概念或多或少消除了这个问题，因为 ViewController 的“监听”域被限制在它所绑定(bind)的 View 的实例中。

就示例而言，我肯定会鼓励您从 Ext JS 5 的文档开始:

http://docs.sencha.com/extjs/5.0/whats_new/5.0/whats_new.html

http://docs.sencha.com/extjs/5.0.1/

“新功能”文档有一些非常棒的架构讨论，深入探讨了这些概念的细节，比 SO 上可行的要多得多。