控制器如何在 Extjs 应用程序中与 MVC 一起使用

Posted

技术标签:

【中文标题】控制器如何在 Extjs 应用程序中与 MVC 一起使用【英文标题】:How are Controllers used with MVC in Extjs application 【发布时间】:2014-09-25 13:09:13 【问题描述】:

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

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

按照上述方法,我有几个问题:

控制器何时被实例化?它们是否在应用加载时全部加载并实例化,并一直监听其中定义的事件直到应用生命周期?

在控制器类中定义 Models[]、Stores[] 和 Views[] 是什么意思?它们什么时候被加载和实例化?

页面导航如何与控制器一起使用?如果导航到新页面只是转换为 getParentContainer.remove(componentX) 和 getParentContainer.add(componentY),那么控制器的目的仅仅是处理事件的文件?

控制器是否有任何范围(实例化>破坏)?如果不是,如何创建和销毁多个实例,这样我的操作就不会被错误的实例监听(我看到一些博客提到控制器大多是单例的)?

有人可以对此有所了解吗?任何示例/插图都会有很大帮助。

谢谢

【问题讨论】:

【参考方案1】:

在 Ext JS 中,Ext.app.Controller 类(开箱即用)通过应用程序的初始化进行实例化。实际上,控制器的 init() 是在应用程序本身的 launch() 之前调用的。所以是的,控制器是“生命者”,从应用程序启动的那一刻起就在应用程序的整个生命周期中进行监听。 种方法可以动态创建和销毁控制器,但这需要自定义实现。

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

关于模型:[]、商店:[]、视图:[],这些基本上都是控制器的 requires(),指示它确保加载这些类。这些约定只是从它们的特定命名空间(例如,AppName.view、AppName.store 等)中要求这些类的简写方式。在视图和商店的情况下,此约定还将为所需的类生成 getter。

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

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

就示例而言,我绝对鼓励您从 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 的可行性。

【讨论】:

非常感谢您的 cmets。这解释了我的大部分问题。我正在使用 Extjs 5 开发应用程序。所以从 ext5 开始,对所有通用控制器只使用 Ext.app.ViewControllers 有意义吗?并有一个 Ext.app.Controller(它是全局的且始终处于活动状态)来处理路由等全局事件? 总的来说,我认为这听起来不错。在 Ext JS 4 中,控制器中完成的大部分工作都是处理视图事件,这绝对是 ViewController 的领域。我仍然对进行路由的最佳方式感到困惑……在 4 中,我开发了自己的方法,让我可以在控制器中定义路由,从而保持它非常干净和分段。在 5 中,当然,您不能在 ViewControllers 中切实可行地执行此操作,因为它们可能不存在以处理路由。因此,使用通用控制器进行路由可能是处理它的最简单的方法。

以上是关于控制器如何在 Extjs 应用程序中与 MVC 一起使用的主要内容,如果未能解决你的问题,请参考以下文章

如何在extjs mvc的网格中将控制器事件添加到href

Extjs MVC 应用程序 - 更多信息

ExtJS MVC 控制器引用选项卡面板的活动选项卡

extjs6学习笔记1.2 初始:MVC MVVM

Extjs mvc 将记录添加到网格面板

哈哈,找到一种方式来简单模拟EXTJS中与服务器的AJAX交互啦。