ExtJS应用程序事件祸害

2018-06-04 00:37:40

EXTJS 4.1

我遇到了一些难题，并且很想听听其他开发人员对这种情况的关于ExtJS事件和控制器方法的意见。我理解这个话题已经被多次讨论过，但我觉得它可以多花一点心思。

按照惯例，我在Controller的init()方法声明中定义事件监听器，如下所示：

Ext.define("My.controller.Awesome", {
init: function(application){
    /** Observe some Views */
    this.control({
        'my-awesome-view #saveButton':{
             click: this.saveMyData
         }
    });

    /** Listen for Events, too! */
    this.on({
        showAwesomeView: this.showMyAwesomeView
    });

    /** Application events, what fun! */
    this.application.on({
        showThatAwesomeView: this.showMyAwesomeView
    });
}

现在，当我快乐地编写一些其他控制器中的某些功能时，我发现自己需要在showMyAwesomeView中调用My.controller.Awesome 。我可以用几种不同的方式做到这一点......

Ext.define("My.controller.Other", {

    /* ... class definition */

    someImportant: function(){

        // I can do this (Approach #1)
        this.application.getController("Awesome").showMyAwesomeView();

        // Or I can do this (Approach #2)
        this.application.getController("Awesome").fireEvent("showAwesomeView");

        // Last but not least, I can do this (Approach #3)
        this.application.fireEvent("showThatAwesomeView");
    }
});

对我而言，方法3 感觉最“正确”。我的问题是如果我以前没有实例化My.controller.Awesome ，那么init()方法还没有运行，因此没有建立监听器，所以被触发的事件进入神秘的土地，永远不会被听到再次。

在返回controller之前，我重载了Ext.application.getController()来调用controller.init() ，因此控制器在加载时（通常作为另一个控制器中的依赖项）调用init方法。 这不好吗？

为了节省加载时间（我的应用程序非常大），我的控制器及其依赖项按需加载。因此，当我的应用程序第一次启动时，我的大部分控制器（以及视图和数据存储）都没有被实例化， 因此init（）'ed使得应用程序范围的事件触发非常麻烦。

我觉得我可能在这里错过了一些大事，或者我可能只需要咬紧牙关，确保我的控制器在事件发生前已经被初始化。我想我也可以在主应用程序文件中放入绝对可怕的事件监听器，并在调用其方法之前处理init_ing控制器，但这看起来很潦草，难以维护。

任何输入将不胜感激，谢谢你的时间！

方法＃3（this.application.fireEvent（'showThatAwesomeView'））是一个很好的解决方案。应用程序事件的使用会导致控制器无法假定哪些其他逻辑可能会从与此事件相关的应用程序中添加或删除。

关于您对控制器及时实例化的关注，以便正确绑定事件，使用Ext.app.Application控制器将消除这种情况。应用程序控制器在App初始化时初始化所有指定的控制器。您注意到与控制器数量有关的启动时间。我曾在许多单页应用程序中使用，在某些情况下，它们有数十甚至数百个控制器。将任何初始化逻辑保持在最低限度可以减少任何明显的减速。精简和组合的脚本代替按需加载很好地保持了应用程序的启动速度。

避免使用getController方法是很好的做法。当使用应用程序事件代替使控制器彼此紧密耦合的逻辑时，应用程序逻辑往往会更好地组织。

Ext.define('UD.controller.c1', {
    extend: 'Ext.app.Controller',
    refs: [
            {
                selector: 'viewport',
                ref: 'userview'
            }
          ],
    init: function() {
        console.log("initincontroller!!");
        this.control({
            'viewport > panel': {
                render: this.onPanelRendered
            }
        });
    },
    onPanelRendered:function(){
        alert("rendered");
        UD.getApplication().fireEvent('myevent');
    }
});



Ext.define('UD.controller.c2', {
    extend: 'Ext.app.Controller',
    refs: [
            {
                selector: 'viewport',
                ref: 'userview'
            }
          ],
    init: function() {
        console.log("initincontroller!!");
            UD.getApplication().on({
                myevent : this.doSomething
             });
    },
    doSomething:function(){
        alert("controller2");
    }
});

链接地址: http://www.djcxy.com/p/13333.html

上一篇: ExtJS Application Event Woes

下一篇: Error with Endpoints in Android : GoogleAuthIOException