How to load controller dynamically on particular event call in extjs4?

Question

I am working in extjs4.I am getting stuck at a point where I want to load controller dynamically in extjs4.I am using controllers this.getController() method to load controller dynamically. *When I am placing this code in init() function of particular controller then it works and controller get loaded dynamically.*Here is my controller code...

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
                      },
            });
},
-----

But when I am placing my code in particular function(buttons event) then it gives me error. Here is my code...

    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
    }
    -----

After placing this code in then I got error in firebug...

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

Here is my app.js code....

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

I dont know whats going wrong.Please give me some suggestions....

Answer 1

You can put below code in the authenticateUser function

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

Answer 2

Are you sure that controller hasn't been loaded yet? Because when you're in the init function of controller X you can't know for sure if controller Y has loaded and it won't throw an error on the init() call of that controller.

I think you'll need to check wether your controller hasn't loaded yet:

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

Because if the init already has been executed it won't work and throw an exception like you pointed out.

Whats in the controllers array of your Ext.application()?

Answer 3

I have done this by using the getController of the Application, and it worked just fine.

You have to add the application to your global variables by setting 'addProperty' on the application's definition. Here is exactly how

And then call the controller like this:

MyApp.Current.getController('UserController');

Answer 4

Could it be that the scope is wrong? I believe than in the first case this is the controller. In the latter, this is the button.

Either set me = this in init and refer to me or enclose the event handler in a function like this:

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

Make sure you pass the arguments if you also need to handle the event.

I think there's also a third way by setting specifically the scope: this for that listener.

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

Answer 5

Ext.application({

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

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