CODEWITHSUNDEEP
extjsextjs4extjs4.1extjs-mvc
Pravin Mane
Pravin Mane

Reputation: 529

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

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

Upvotes: 5

Views: 4286

Answers (5)

Rishabh Shah
Rishabh Shah

Reputation: 580

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

Upvotes: 1

JustBeingHelpful
JustBeingHelpful

Reputation: 18980

Ext.application({

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

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

Upvotes: 0

adaskos
adaskos

Reputation: 151

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
}

Upvotes: 0

k__gc_im_o_
k__gc_im_o_

Reputation: 150

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

Upvotes: 0

Johan Haest
Johan Haest

Reputation: 4421

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

Upvotes: 0

Related Questions