ExtJs中多个控制器的绑定事件

Tho*_*ham 5 javascript javascript-events extjs4.1

我已经组装了一个适度大小的应用程序,我正在分解代码以减少维护行的总数以及性能调整.我发布此问题的用例是我在菜单中嵌入了一个按钮,该按钮调用(或需要调用)显示表单的控制器上的方法.目前,这是通过直接引用特定按钮控件,创建面板以及将该面板放在视口内来实现的.

问题出现在:ExtJS 4.1 Call One Controller From Another开始解决响应结束时的最佳实践问题,但并未真正解决可以复制或扩展以覆盖更复杂实现的基础案例(是我的问题的目的.)

鉴于两个控制器:

一个"主菜单"控制器.

// controller/Menu.js
Ext.define("App.controller.Menu", {
    extend: "Ext.app.Controller",
    init: function () {
        this.control({
            "viewport > mainmenu > button": function (ctl, evt) {
            }
        });
    }
});
Run Code Online (Sandbox Code Playgroud)

用户帐户控制器

// controller/User.js
Ext.define("App.controller.User", {
    extend: "Ext.app.Controller",
    stores: ["User"],
    views: ["user.Edit", "user.List"],
    init: function () {
    }
});
Run Code Online (Sandbox Code Playgroud)

问题

在两个控制器之间实现横向连接以在"创建新帐户"的菜单按钮上正确委派响应点击事件的责任的最佳方法是什么?

可能的解决方案

使用componentquery我可以使用tag属性轻松缩小主菜单视图中按钮的焦点,以便User控制器直接响应事件:

// controller/User.js
"viewport > mainmenu > button [tag=user.create]": function () {}
Run Code Online (Sandbox Code Playgroud)

一个未知的选择

或者我可以通过对象图形来查找菜单控制器中对用户控制器的引用并以这种方式调用它.

// controller/Menu.js
// switch on tag case "user.create"
App.controller.User.createUserForm()
Run Code Online (Sandbox Code Playgroud)

真正的问题

所有这一切导致的问题是"最可接受的"解决方案.可以想象使用第三个中介控制器来"控制"从控件到控制器的请求,但我认为这违背了框架的其余部分试图做的事情.使用这些方法中的任何一种的变型目前都有效,但是感觉不是完全干净和可靠; 或者最终可维护的长期(因为代码很快就会传播开来.)此外,我们想到了陷入原始事件的想法,但我们遇到了同样的可维护性问题.

谢谢!

sra*_*sra 0

一些短线:

我不明白的一件事是 Sencha Touch 有路​​由但没有事件总线,而 ExtJS 有事件总线但没有路由...(MVC 实现还有更多不同点)无论如何,因为我大部分时间都使用 ExtJS当时我创建了一个自定义路由来填补这个空白。也许 sencha 会在版本 5 中添加这个。

  • 最简单、最快的解决方案:使用控制器getController()Ext.app.Application来从菜单控制器调用负责的控制器。
  • (imo)最好的解决方案:自己编写一个路由器,其中每个控制器注册其路由并使用两者;路由和事件总线。如果您的应用程序具有由多个开发团队使用的共享组件,那么这会非常方便。