ExtJS 4 - 关于MVC架构的问题，使用MVC进行组件开发

Question

我有一些 Extjs 4 MVC 架构问题，非常感谢您提供一些提示或示例。

1. 控制器如何与其视图连接？控制器引用其视图的模式是什么？

2. 控制器是否应该是应用程序实例的全局控制器？我只看到了显示应用程序实例加载控制器的示例，但我从未见过控制器是某些子组件的一部分。这是否意味着MVC不适用于组件类？示例：我想构建一个列表搜索组件，它由一个网格、一个搜索条件面板和几个控件/菜单组成。 MVC 对于实现该控件的内部逻辑非常有用，但 extjs API 表明这不是受支持的场景。

3. Extjs 4 (Ext.require) 中有一个不错的动态加载功能。但它应该以某种方式与 MVC 架构一起工作吗？是否支持动态加载视图和控制器？与上一个问题一样，我只看到了所有控制器、模型和视图在应用程序启动时预先加载的示例。我正在考虑加载用户操作的视图，并且该视图的名称只有在用户完成操作后才知道 - 如何加载该视图，它的控制器呢？

最好的问候 RG

Answer 1

• 我推荐Supervising Controller 模式。本质上，视图没有逻辑，除了简单的数据绑定（想想组合框和网格），所有的事件处理都在控制器中（例如：用户单击按钮刷新计算）。该模型处理所有数据逻辑（例如：计算贷款的每月付款）。控制器可以使用 form.loadRecord() 将模型加载到视图中，并使用 form.updateRecord() 将表单值保存到模型中。

• 控制器应该没有状态：没有用户定义的属性，只有事件处理程序。这样，一个控制器可以同时处理多个视图实例。您将需要一些技巧来获取对视图的引用（通过第一个参数），但我没有遇到任何问题。

• 您可以在启动时加载所有控制器。只要确保您连接并最小化您的文件。

Answer 2

Afaict，Ext.require 与 Extjs MVC 一起工作得很好。 （Fwiw，我使用 requires:[] 配置项而不是 Ext.require。） 在顶层 viewport.js 中，您可以放入一个有限的需要配置，只需要“顶层”视图。

例如假设您有一个带有两个子面板的边框布局面板。 视口将require: ['topLevelView'] 然后，topLevelView 可以require: [westPanelView, centerPanelView]。

至于实例化.. afaict，app.js 负责将所有内容实例化。 （我的控制器不实例化视图。）

至于控制器集成...... extjs mvc 方式让控制器处理来自视图的事件。控制器使用refs:[] 配置和组件查询选择器来“连接”他们感兴趣的视图事件。控制器中的事件处理程序执行更新其他视图的工作（也通过引用），除了更新/同步数据任何商店。

我强烈建议您仔细阅读 sencha 文档中的 MVC 架构指南：

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture

这是一个相当“简单”的示例，但它似乎涵盖了应用组织和事件连接的基础知识。 此外，这里还有一个关于 MVC 应用程序架构的三部分指南：

http://docs.sencha.com/ext-js/4-0/#!/guide/mvc_pt1

再次，强烈推荐阅读。

最后，extjs 4.x 示例具有使用 extjs MVC 架构的工作代码（虽然是简单的应用程序，但可以工作）；这应该有助于代码引导应用程序。下载发行版时，请查看 examples/app/* 文件。那里有三个 MVC 示例。一个是这个应用程序：

docs.sencha.com/ext-js/4-0/#!/example/app/feed-viewer/feed-viewer.html

（我也在 extjs 4 mvc 上咬牙切齿......并且需要在调试中坚持不懈！）