How to load controllers dynamically?

[s.t.a.s]

The question is in the topic. I'm trying to do it in Sencha Touch 2.0 according to solution in ExtJS 4 (http://www.sencha.com/forum/showthre...oller&p=787028), but unfortunately it isn't working.

I added in my application function for loading controllers.

Ext.app.Application.prototype.addController = function(classPath, config) {
    var self = this,
        config = config || {};
    Ext.Loader.setConfig({ enabled: true });
    Ext.require(classPath);
    Ext.require(classPath, function() {
        var controller = Ext.create(classPath, Ext.apply({
            application : self
        }, config.options || {}));
        //self.controllers.add(classPath, controller);
        self.controllers.push(classPath);
        
        controller.init();
        
        if (config.callback) { config.callback.call((config.scope || this), config); }
    });
};

But the problem is that self.controllers.add(classPath, controller) can't be done, because self.controllers in Sencha Touch is an array (not class object) and it hasn't method add(). How to load instance of controller in app?

And of course, after method init() when I try to get my added before controller I get nothing. My code:

var app = this.getApplication();
app.addController('ContactsController',
{
    callback : function() {
        console.log(self.application);
    }
});

var myController = this.getApplication().getController('ContactsController');

myController is undefined (but I see ContactsController in array of controllers ('cause I pushed it in array self.controllers) but it's not loaded.

[mitchellsimoens]

It is a better idea to load everything up front on a mobile device. If the connection goes out, your app won't function correctly or even if the connection is slow your app will come to a halt.

[s.t.a.s]

It is a better idea to load everything up front on a mobile device. If the connection goes out, your app won't function correctly or even if the connection is slow your app will come to a halt.

You see, our main idea is to give our customers a tool where they can change the view of their mobile pages as they want (to add new field, to hide some controls, etc.), that's why Sencha's static model/architecture is not well for us. We need to get the structure of pages/views, controllers, stores from the web server via AJAX.

[s.t.a.s]

And we almost did it. We are successfully adding new controllers, views and model from server, using AJAX. Here is the code:

Ext.app.Application.prototype.addController = function(classPath, config) {
	var self = this,
		config = config || {};
	Ext.Loader.setConfig({ enabled: true });
	Ext.require(classPath, function() {
		var controllers = self.getControllerInstances();
		if (!controllers[classPath]) {
			var controller = Ext.create(classPath, Ext.apply({
				application : self
			}, config.options || {}));
			controllers[classPath] = controller;
			self.controllers.push(classPath);
			controller.init();
			if (config.callback) { config.callback.call((config.scope || this), config); }
		}
	});
};

But now we have a problem with removing of controllers. How to do it?

[s.t.a.s]

Has anybody idea how to do it? And is it Ok to use

self.getControllerInstances()?

[gostbuster]

Very Interesting,
I tried to add a controller with code got by ajax and it works!

Did you manage to remove a controller ?

Thanks