Sencha Touch Initialization

I’ve finally had the chance to dig in to Sencha Touch. I was really impressed with the framework from what I saw at SenchaCon last year, but I had been too busy with regular web development to get very far with it. That all changed now that I’m working on a mobile website for work.

Sencha Touch is very well documented, and has a boatload of examples. Unfortunately, some of the examples don’t necessarily promote best practices. The first place I ran in to problems was on setting up an Application.

If you look at the documentation and the examples, there are three ways to initialize a new Touch application:

  1. Ext.setup({...})
  2. Ext.ApplicationManager.registerApplication({...})
  3. new Ext.Application({...})

Most all the examples use the first method, including the more complicated GeoCongress app. Unfortunately, this isn’t the best method for real-world applications. It is designed for quickly setting up a Viewport and rendering a container. Yes, some of the more complicated samples use this technique, but doing so costs you a lot of the free stuff that come with using one of the other two approaches.

The second approach is used in the Kiva and Twitter examples. The end result will do the same as option #1, except you’ll have an Ext.Application object to work with. Ext.Application is one of those secret sauce objects that take care of a lot of the common setup tasks for you. When you initialize an Ext.Application, the object automatically creates a set of namespaces for your views, stores, models and controllers, prefixed by the application name. It also provides support for a load mask and sets up an Ext.History object for the application. Finally, it integrates with the Ext.Dispatcher object for handling custom routing of requests and registers the application with the ApplicationManager.

The third approach is nearly exactly the same as the second option, except you are directly instantiating an Ext.Application versus delegating to the Ext.ApplicationManager to create that application. This means that the Application will not be registered with the ApplicationManager. In practical terms, this really doesn’t matter. The Ext.ApplicationManager permits you to register multiple logical applications for a single physical Sencha Touch site, which is not something I see as being necessary.

While trying to sort this all out the first time through, I put out a query on Twitter to see what others thought. I was pretty much between options #1 and #2, but the awesome James Pierce (@jamespierce) from the Sencha team chimed in and recommended option #3 as the best going-forward approach.

Leave a Reply

Your email address will not be published. Required fields are marked *