Sencha Touch Application Structure

Question

I am very new to Sencha Touch and trying to create a simple program that has a login form and makes calls and results of extraction into lists.

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

Answer 1

In fact, there is a generator that can be used to create the canonical structure of the application. From the Sencha download, go to the jsbuilder directory, then run a command like this:

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

In addition, this slide set demonstrates the structure, although you may have to dig for most of the philosophy of why things are where:

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

And here is an example application discussed in the discussion:

http://cl.ly/1d1S282O1Y2c3N1v1j1i

Answer 2

It’s good to use one HTML file to get started, but in the end it’s worth making the application structure compatible with “best practices” so that others can watch and understand your code later.

Sencha Touch generators (included in v1.1) put the startup logic in a file called app.js, and then have files for each model, view and controller (in the corresponding directories).

Although you cannot build a full-fledged MVC application from the start, you probably should use these conventions. Take a look at the Twitter and Kiva apps in the SDK (and http://dev.sencha.com/deploy/touch/examples/ ) to find good examples.

The index.html file can refer to each file separately, but, of course, for production, you are also advised to look at the JSBuilder tool to pack and minimize them all so that the device can retrieve them in a single HTTP request.

Answer 3

I would break it into the main function (i.e. the target). For mobile applications, you want to avoid unnecessary postbacks / loading of multiple pages and views if you can help.

If your mobile application has one purpose, I would save it on one html page and only break the JavaScript files in the way you need it to be organized.

If it has two goals (for example, 1 - to enter a pool of information and 2 - to display reports on your data), I would split it into two html files.

For example, if you have a mobile application that guides you through a series of steps of the wizard to perform data entry (i.e. for one purpose), I would place this entire wizard inside Ext.Panel (on one page), and change each content Ext.Panel "step" of the wizard when the user navigates through the wizard.

Answer 4

Start with the simplest thing and refactoring later. I just made an application in Sencha Touch and it looks pretty amazing at the sample files. I found the easiest way to find out if it was creating one html file, and as soon as something became cumbersome or obviously needed a refactor, I started creating subsequent files.