How to implement folder structure for Sencha Touch projects?

Question

I am architecting a Sencha Touch project. Sencha Touch command line lets you create controllers, views, models, stores but there is no standard way to architect the project. I want to place all my routes in one file, say app.routes.js. Main controller to load views in one file, say mainController.js in which I want to write code to load different views.

Also I want to keep all templates in one file for ease of UI designers in one file, say app.templates.html so that I can append template file to document head on load and access different layouts and views using standard jQuery. I went through different answers but didn't find any relevant answer.

Here's how am implementing routers-

Ext.Viewport.setActiveItem({xtype : 'main'});
    break;
    case '#_login':
        Ext.Viewport.setActiveItem({xtype : 'login'});
        break;
    case '#_terms':
        Ext.Viewport.setActiveItem({xtype : 'terms'});
        break;
    case '#_exams':
        Ext.Viewport.setActiveItem({xtype : 'exam'});
        break;
    case '#_enrollments':
        Ext.Viewport.setActiveItem({xtype : 'enroll'});
        break;
    case '#_examdetails':
        Ext.Viewport.setActiveItem({xtype : 'exammaterials'});
        break;
    case '#_enrollmentdetails':
        Ext.Viewport.setActiveItem({xtype : 'enroll'});
        break;
    case '#_mapdetails':
       Ext.Viewport.setActiveItem({xtype : 'mapview'});
        break;

Trozdol Trozdol · Accepted Answer · 2014-12-15T14:53:43

If you use Sencha Cmd to create the project in the beginning you'll be setup with the folder structure you need.

In the Terminal:

sencha -sdk /path/to/touch-x.x.x generate app MyApp /path/to/www/myapp

You will be setup with a directory structure like this...

MyApp/
  |_ app/
  | |_ controller/
  | |_ model/
  | |_ store/
  | |_ view/
  |_ build/
  |_ packages/ ...
  |_ resources/ ...
  |_ touch/ ... <-- this folder is also generated for you.
  |_ app.js
  |_ app.json
  |_ bootstrap.js
  |_ bootstrap.json
  |_ build.xml
  |_ index.html
  |_ packager.json

I'm not sure about keeping the templates in one file but I've seen someone say they could keep their templates in the index.html file in script tags and reference it somehow. Not sure about how that works.

How to implement folder structure for Sencha Touch projects?

1 Answers