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.