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

时间:2013-02-14 21:52:11

标签: 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) {
            }
        });
    }
});

用户帐户控制器

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

问题

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

一种可能的解决方案

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

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

未知的替代

或者我可以通过对象图表从菜单控制器中找到对用户控制器的引用并以这种方式调用它。

// controller/Menu.js
// switch on tag case "user.create"
App.controller.User.createUserForm()

真正的问题

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

谢谢!

1 个答案:

答案 0 :(得分:0)

一些短线:

我不明白的事情是Sencha Touch有路由,但没有事件总线,其中ExtJS有一个事件总线但没有路由...(并且有更多的点,MVC实现不同)无论如何,因为我正在使用ExtJS大多数时候我创建了一个自定义路由来填补这个空白。也许sencha会在第5版中添加它。

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