Sencha Touch application structure

Question

I'm pretty new to Sencha Touch and am trying to make a simple application that has a login form and makes calls and fetch results into lists.

My question is, how should I create the structure of the application? Should it all be inside one .html file? or should I different pages for each list and the login page? If so, how can I change views from one page to another and get transition effects?

Answer 1

There is actually a generator which you can use to generate the canonical app structure. From the Sencha download, go to the jsbuilder directory, then run a command similar to this:

./sencha.sh generate app MyApp path/to/myapp

Also, this slide set demonstrates the structure, though you may have to dig for more of the philosophy for why things are where:

http://www.sencha.com/conference/sessions/session.php?sid=322

And here's the example app talked about in the discussion:

http://cl.ly/1d1S282O1Y2c3N1v1j1i

Answer 2

It's fine to use a single HTML file to get things started, but in the long run it's worth making the application structure consistent with 'best practices' so that others can look at, and understand, your code subsequently.

Sencha Touch generators (coming in v1.1) place the launch logic in a file called app.js and then have files for each model, view and controller (in respective directories).

While you may not be building a fully fledged MVC application from the start, you should probably still use these conventions. Take a look at the Twitter and Kiva apps in the SDK (and at http://dev.sencha.com/deploy/touch/examples/ ) foor good examples.

The index.html file can link to each file individually, but of course for production, you are also advised to look at the JSBuilder tool to package and minify them all so that the device can fetch them in one single HTTP request.

Answer 3

I would break it up by major function (ie purpose). For mobile apps, you want to avoid having unnecessary postbacks / loading multiple pages and views if you can help it.

If your mobile app has one purpose, I would keep it on one html page and only break up the JavaScript files as you need to keep it organized.

If it has two purposes (eg 1-to ENTER a bunch of information, and 2-to display reports on your data), then I would break it up into two html files.

For example, if you have a mobile app that takes you through a series of wizard steps to perform data entry (ie single purpose), I would house that whole wizard inside of an Ext.Panel (on a single page), and swap out each content Ext.Panel "step" of the wizard as the user progresses through the wizard.

Answer 4

Start with the simplest thing and refactor later. I've just done an app in Sencha Touch and it gets quite bewildering looking at the example files. I found the easiest way to learn was to create a single html file and as soon as something became unwieldy or obviously needed a refactor I started creating subsequent files.