+40 745 232 788

Online Solutions Development Blog   |  


Loading Sencha Touch controllers and views dynamically

posted by ,
Categories: JavaScript, Mobile Development
Taggs , , , ,

Usually, when creating a Sencha Touch MVC application all of its controllers and views are included manually in index.html and loaded when the app starts. But, when there are a lot of controllers and views to load, the time it takes the application to launch will be longer.

A solution for this could be to load the controllers and views dynamically when there is a need for them. Since Sencha Touch can’t do this out of the box and doing it yourself can be tricky, I’ve created a script that will do it for you named DynamicMvc.

Download DynamicMvc.js and include it in index.html file and you’re almost done. The script follows the conventions described below.

Here’s how it works.

Before a controller action is called, the script will check first if a view is registered based on the action name. So the convention is that every action must have a view. If not registered (not loaded) the view will be added. After that the controller will be loaded (if it’s not already).

The registered name of the view must be constructed from the controller and its action name, like this:

if Home is the controller and we have an action named contact, than we should have a folder under app/views named after the controller in lower case and in it there must be a view file named app/views/home/HomeContactView.js; the registered name of the view must be HomeContact.

Here’s an example:

controller name: Search
controller file: app/controllers/SearchController.js
action name: index
action’s view name: SearchIndex
view file: app/views/search/SearchIndexView.js


  • If you are using Ext.dispatch you must specify the historyUrl property; without it DynamicMvc can’t find the right controller to load.
  • Dynamic loading the controllers and views will halt the application while the files are loaded.

That’s all about my solution for loading controllers and views dynamically.

You can download an example project from here.

If you have questions, suggestions or improvements don’t hesitate to add a comment and let me know about them.

If you liked this post
you can buy me a beer

33 Responses to Loading Sencha Touch controllers and views dynamically

  1. Just wondering how does this work with taking the app offline with a manifest. Does it work the same way but you just give the path of your files to the manifest file.

    Great Article Cammo

  2. Hi CAM,

    In the sample app that you included, you load the views from the index.html. I’m just digging into the code to try and understand how everything works, but isn’t the point of DynamicMVC to be able to load the view files dynamically, like the controller files are?

    Thanks, Tq

    • In the sample app only TabBarMvc.js and Viewport.js are loaded from index.html.
      DynamicMVC can only load dynamically the view file for an action in a controller. So, you must include the file manually for a component that is not a view for a controller action.

      • Okay, I understand. Thanks for clearing that up.

        Have you been reading about Sencha Touch 2.0? It sounds like they’re working dynamic script loading into it. I don’t have a solid grasp as to whether it would nullify your TabBarMvc.js script or compliment it. Regardless, I’m excited by 2.0. Can’t wait.

  3. Hi,Cam
    I use your mvc pattern to do a chart display app,now i define two toolbar in the viewport.js,i need to hide and show toolbar,then doComponentLayout(), but when i use tabmvc change the ui,the toolbar can not execute doComponentLayout()…….could you give me some suggestion?

    • I don’t understand what is the problem you have. Can you please upload an example project for me to have a look and see exactly what are the issues?

  4. Many thanks Cam for this awesome tutorial. Can you tell me, how does it work for the memory of an app? Do the views get destroyed after selecting another one? I am wondering how ‘efficient’ it is or will memory still build up?

    I ask because I am developing a medium/large size app where memory is important.


Add a Comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Also, if you want to display source code you can enclose it between [html] and [/html], [js] and [/js], [php] and [/php] etc