Load and initialise controller dynamically in Sencha Touch

Question

We use extjs v4.2 and sencha touch v2.3

I'm currently working on a project that involves loading the controller dynamically. This works perfectly well in extjs for me, but I can't get the same functionality in sencha touch.

When i want to load a controller in extjs I use the following syntax

    var controllerLookup = 'here.app.controller.' + controllerName;

    AppName.app.getController(controllerLookup);

This then goes back to the server, downloads the controller and calls its init method.

I would like the exact same functionality in sencha touch. From reading the docs the syntax looks like it should work similarly, but i can't seem to get it to work. when i run the code in the console i just get an undefined. No call to the server like I do in extjs looking for the file. Can anyone see where I'm going wrong or if it's even possible to do in sencha touch.

Thanks

kev670 kev670 · Accepted Answer · 2015-04-29T11:54:04

With the help of a post on the sencha forums (https://www.sencha.com/forum/showthread.php?198019-How-to-load-controllers-dynamically) I was able to get it to work. The controller now loads in dynamically and calls the init method

AppName

The name you used in Ext.Application when defining your application in app.js or equivalent.

Classpath

The full namespace to you controller file

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

calling this function

var controllerLookup = 'here.app.controller.' + controllerName;;
addControllerDynamicallyForMobile(controllerLookup)

Load and initialise controller dynamically in Sencha Touch

1 Answers