Sencha Touch: How the heck does this framework work?

Question

I am having an absolute nightmare trying to build anything of value with Sencha Touch. The docs seem to describe everything in bits in pieces without every tying everything together..

One of my key gripes is that I don't understand how anything is loaded into the browser.. If I simply define an Ext.List in index.js within this method:

Ext.setup({
    onReady: function() {

    }
})

Then that Ext.List is loaded into the browser for some reason. If I define multiple objects in that method, how does it know which to put into the browser? Furthermore, when I extend Ext.List and put that in the above method, nothing happens. What's going on?

Better yet, where I can find good documentation that explains how this framework works? I've pored over everything on the Sencha Touch site, including the tutorials, and all of it is horribly incomplete.

Answer 1

It does seem confusing at first. What's important to understand is that Sencha Touch different from jQTouch or jQuery Mobile in that you create your interface in a completely programmatic way, os there's no defining the UI in a HTML file or anything like it. The framework is written much more in the tradition of classic widget set's, QT for example. This style isn't something traditional web developers are used to, but I'd actually say the documentation is quite complete. It's just not written in a style familiar to web developers.

This is how it works: one component needs to have an attribute fullscreen: true set on it. This component becomes the root, and all other visible UI components are added to this component using the .add() method. But there all defined in Javascript. That's the most crucial thing to remember.

You have probably already found it, but the main documentation repository is the API documentation (here). If you're going to get anywhere you will have to get used to reading stuff from here quite a lot. Important facts here is that everything in the UI inherits from the Component class, and that Panel is probably

When I was getting started, I found this page a little bit better for starting. I especially recommend Drew Neil's excellent screen casts on panels.

I think this has a lot to do with the fact that Sencha Touch is still a young library, and that it has it's roots in the highly programmatic and OO-centric Ext.js framework. Taking some time to really learn the fundamentals of Ext.js probably helps a lot in the long run when trying to get going with Sencha Touch (tip: Observable is the most important class).

So sorry, you're right that the documentation isn't very friendly. But the UI you get from Sencha Touch still blows the competition out of the water when it comes to mobile interfaces, so I'd say that it's still worth it if you're really want the most slick mobile UI there is.

Answer 2

I recommend you to checkout the conference videos http://www.sencha.com/conference/videos specially the "Structuring Your Sencha Touch Application", I restarted an app from scratch following the MVC pattern explained in the video, in two days I got where I was before plus a ton of fixed bugs but most importantly now I really understand what I'm doing and why it was so hard to get things to work before using this standard pattern.