在 ExtJs 中为多个控制器绑定事件

Posted 2023-02-26

【中文标题】在 ExtJs 中为多个控制器绑定事件

【英文标题】：Binding events for more than a single controller in ExtJs

【发布时间】：2013-02-14 21:52:10

【问题描述】：

我已经组装了一个规模适中的应用程序，并且正在分解代码以减少维护的总行数以及性能调整。让我发布此问题的用例是，我在菜单中嵌入了一个按钮，该按钮调用（或需要调用）显示表单的控制器上的方法。目前这是使用对特定按钮控件的直接引用、创建面板并将该面板放在我的视口中来实现的。

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 () 
    
);

问题

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

一种可能的解决方案

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

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

未知的选择

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

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

真正的问题

由此产生的问题是“最可接受”的解决方案是什么。可以想象使用第三个中介控制器将请求从控件“路由”到控制器，但我认为这与框架的其余部分试图做的事情背道而驰。目前使用这两种方法中的任何一种的变体都可以，但是感觉都不是完全干净和可靠的；或最终可长期维护（因为代码传播得相当快。）此外，我们曾想到要投入原始事件，但我们在那里遇到了同样类型的可维护性问题。

【参考方案1】：

一些短线：

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

最简单快捷的解决方案：

使用Ext.app.Application 控制器的getController() 从您的菜单控制器调用负责的控制器。

（imo）最佳解决方案：

为自己编写一个路由器，每个控制器都注册它的路由并同时使用它们；路由和事件总线。如果您的应用具有多个开发团队使用的共享组件，这将非常方便。

【讨论】：

这个答案很好。我正在更具体地寻找对 Sencha 推荐的方法的洞察，因为（正如您所指出的）对象图有很多不同的解释，而几乎没有清晰和最新的文档。如果整个周末我没有看到任何进一步的流量，我会接受你的回答作为对我提出问题的明确答复。

@tingham 感谢您的接受，即使这不是您正在寻找的答案。我会自己开始赏金，但我相信没有其他答案。我在高级支持中问了一个类似的问题，但根本没有得到合格的答案。最好的方法是建立在非常好的类系统之上。这将使您能够对任何改进/更改做出反应，而不会让人头疼。

老实说，getController 允许开发人员在代码中以合理的清晰度实现最终结果。鉴于这是您的第一个建议，我认为我们可以假设我们会为该方法获得足够的“投票”并认为此事已结束。干杯。