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

Question

我是Extjs的新手,在浏览了Extjs MVC模式的一些教程和博客后,我不清楚如何在extjs平台上构建复杂的应用程序(例如10 - 15页面导航).

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

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

• 控制器什么时候实例化？它们都是在应用程序加载时加载和实例化的,并且在应用程序的生命周期内一直监听它们中定义的事件吗？

• 在控制器类中定义Models [],Stores []和Views []意味着什么？什么时候加载并实例化？

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

• 控制器是否有任何范围(实例化>销毁)？如果不是,如何创建和销毁多个实例,以便我的操作不会被错误的实例监听(我看过一些提到控制器的博客大多是单身)？

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

谢谢

Answer 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"控制器,因此避免侦听器中的冲突是一个非常了解您在listen()或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的可行性.