9

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.

Blorgbeard
  • 101,031
  • 48
  • 228
  • 272
BingoBoy
  • 185
  • 2
  • 7

3 Answers3

9

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.

Jacob Oscarson
  • 6,363
  • 1
  • 36
  • 46
  • 3
    Thanks for recommending my [screencast on panels](http://vimeo.com/15879797). I'd also suggest watching the one on [layouts](http://vimeo.com/15888504). I've got a growing collection of [Sencha Touch screencasts](http://vimeo.com/album/1573372/format:detail), which focus on various concepts and widgets from the framework. – nelstrom Apr 20 '11 at 12:32
  • Ah, thank you yourself, the screencasts saved a lot of time for me, and helped me to a better understanding of S.T. – Jacob Oscarson Apr 20 '11 at 13:09
  • I was looking for examples as well. Yes, the screencasts are very useful! There is also a Sencha Touch In Action book coming this year. [http://manning.com/garcia2/](http://manning.com/garcia2/) – A.W. May 17 '11 at 04:51
  • It also helps a lot to look at the sample apps provided with the Sencha Touch download. Some of them are quite simple and give you a good, basic structure to work from. – bjudson Jul 25 '11 at 16:16
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.

Roberto
  • 446
  • 5
  • 11
0

I found one of the best places to learn sencha touch is this 4 part series on building a simple SenchaTouch1.0 app :- http://miamicoder.com/2011/writing-a-sencha-touch-application-part-1/ Follow it up with the MVC example : http://miamicoder.com/2011/writing-a-sencha-touch-mvc-application/ Having completed the above tutorials gives you the comfort and confidence to approach SenchaTouch's own documentation, tutorials and screencasts.

Nikhil_Katre
  • 555
  • 6
  • 10