如何在 extjs4 中的特定事件调用上动态加载控制器？答案

【问题标题】：How to load controller dynamically on particular event call in extjs4?如何在 extjs4 中的特定事件调用上动态加载控制器？
【发布时间】：2013-04-02 06:43:53
【问题描述】：

我在 extjs4 中工作。我被困在我想在 extjs4 中动态加载控制器的地方。我正在使用控制器 this.getController() 方法来动态加载控制器。 *当我将此代码放在特定控制器的 init() 函数中时，它会工作并且控制器会动态加载。*这是我的控制器代码...

Ext.define('B.UserController',{ 
----
init:function()
{
    var controller = this.getController('kp.PollController');
    controller.init();                  // launch init() method
    this.control(
            {
                 'KpLogin button[action=loginAction]':
                      {
                          click:this.authenticateUser
                      },
            });
},
-----

但是当我将我的代码放在特定的功能（按钮事件）中时，它会给我错误。这是我的代码...

    Ext.define('B.UserController',{  
    -------   
    init:function()
    {
            this.control(
                {
                     'KpLogin button[action=loginAction]':
                          {
                              click:this.authenticateUser
                          },
                });
    },
     authenticateUser:function(button)
    {
      var controller = this.getController('kp.PollController');
      controller.init();                  // launch init() method
    }
    -----

在放入此代码后，我在 firebug 中遇到错误...

Uncaught TypeError: Cannot read property 'readyState' of undefined Connection.js:818
Ext.define.onStateChange Connection.js:818
(anonymous function)

这是我的 app.js 代码....

Ext.application({
    name:'B',
    autoCreateViewport:true,
    controllers:['sn.UserController','qb.QbquestionController','kp.DnycontentController',/*'kp.PollController','kp.PolloptionController',*/'kp.KpquotationController','qb.QbqnsController','kp.CuriosityquestionController','kp.WordController','kp.DnycontentcategoriesController'],
    launch:function()
    {
        console.log('Application launch');  
    },//End of launch function
     });

我不知道出了什么问题。请给我一些建议....

【问题讨论】：

标签： extjs extjs4 extjs4.1 extjs-mvc

【解决方案1】：

您可以将以下代码放入 authenticateUser 函数中

authenticateUser:function(button) {
    var app = this.getApplication(),
        controller = Ext.create('kp.PollController', {
            application: app
    });
    app.getControllerInstances()['kp.PollController'] = controller;
    controller.init();
}

【讨论】：

【解决方案2】：

您确定控制器尚未加载吗？因为当您在控制器 X 的 init 函数中时，您无法确定控制器 Y 是否已加载，并且不会在该控制器的 init() 调用上引发错误。

我认为您需要检查您的控制器是否尚未加载：

if (!this.application.controllers.get(controllerName)) {
     var controller = this.getController(controllerName);
     controller.init();                
}

因为如果 init 已经执行，它将无法工作并抛出您指出的异常。

Ext.application() 的控制器数组中有什么？

【讨论】：

感谢..johan 的回复。这里我更新了我的代码，我正在添加 app.js 代码请检查它。我按照你的建议。但问题仍然没有得到解决。
我注意到我在 chrome 中收到了这个错误，但在 firefox 中没有显示这个错误..

【解决方案3】：

我已经通过使用应用程序的 getController 完成了这项工作，并且效果很好。

您必须通过在应用程序的定义上设置“addProperty”来将应用程序添加到您的全局变量中。 Here is exactly how

然后像这样调用控制器：

MyApp.Current.getController('UserController');

【讨论】：

【解决方案4】：

会不会是scope 错了？我相信比第一种情况this 是控制器。在后者中，this 是按钮。

在 init 中设置 me = this 并引用 me 或将事件处理程序包含在这样的函数中：

'KpLogin button[action=loginAction]':
{
   click: function() {
      this.authenticateUser();
    }

如果您还需要处理该事件，请确保传递arguments。

我认为还有第三种方法，即专门为该侦听器设置 scope: this。

'KpLogin button[action=loginAction]':
{
   click: authenticateUser,
   scope: this
}

【讨论】：

【解决方案5】：

Ext.application({

   launch: function() {
      _myAppGlobal = this;
   }
});

var controller = _myAppGlobal.getController('kp.PollController');

【讨论】：