{"id":615,"date":"2011-10-07T09:13:58","date_gmt":"2011-10-07T09:13:58","guid":{"rendered":"http:\/\/www.osd.net\/blog\/?p=615"},"modified":"2011-10-11T07:36:58","modified_gmt":"2011-10-11T07:36:58","slug":"loading-sencha-touch-controllers-and-view-files-dynamically","status":"publish","type":"post","link":"https:\/\/www.osd.net\/blog\/web-development\/javascript\/loading-sencha-touch-controllers-and-view-files-dynamically\/","title":{"rendered":"Loading Sencha Touch controllers and views dynamically"},"content":{"rendered":"

Usually, when creating a Sencha Touch MVC application all of its controllers and views are included manually in index.html<\/em> 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.<\/p>\n

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<\/strong>.<\/p>\n

Download DynamicMvc.js<\/a> and include it in index.html<\/em> file and you’re almost done. The script follows the conventions described below.<\/p>\n

Here’s how it works.<\/h2>\n

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<\/em>. If not registered (not loaded) the view will be added. After that the controller will be loaded (if it’s not already).<\/p>\n

The registered name of the view must be constructed from the controller and its action name, like this:<\/p>\n

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

Here’s an example:<\/p>\n

controller name<\/em>: Search<\/strong>
\ncontroller file<\/em>: app\/controllers\/SearchController.js<\/strong>
\naction name<\/em>: index<\/strong>
\naction’s view name<\/em>: SearchIndex<\/strong>
\nview file<\/em>: app\/views\/search\/SearchIndexView.js<\/strong><\/p>\n

Notes:<\/strong><\/p>\n