Getting started with Sencha Touch 2 is kind of a pain in the rump. Having gone through this experience over the last few weeks, I've found that it really helps if you know about some Sencha Touch concepts that are hidden in the Sencha documentation.
Without any further introduction, here are the concepts that I really struggled with.
The Sencha MVC framework
I don’t struggle with the MVC framework concept in general. In fact, I shared this excellent MVC diagram many years ago, and understand the concept well. I have struggled a little bit with its implementation in Sencha. The biggest issues are:
- How to send messages from the view to the controller. This seems to differ in Sencha Touch vs Sencha ExtJS, and I don’t know why they use different techniques.
- It’s important to remember to go back and update the
requiresand/orcontrollersfields in the app.js file, in particular when you add a new controller.
define vs create
Ext.define lets you define a class, like writing class Foo ... in Java.
Ext.create lets you create a new instance of a class, like new Foo() in Java.
In a related note, the config section is like a constructor in Java.
xtype
Understanding xtype is huge. I found this information hidden in the Sencha docs: xtype is an easy way to create Components without having to use the full class name. This is especially useful when creating a Container that contains child Components. An xtype is simply a shorthand way of specifying a Component, for example you can use xtype: 'panel' instead of typing out Ext.panel.Panel. (You'd be amazed at what I did with xtype before I learned this.)
From the book, Sencha Touch 2 Up and Running: xtype ... has a special meaning to Sencha Touch ... it represents a mapping between a class name and a shorter name, easier to type and remember. In short, you can think of the xtype as an alias to the real name of a class in the Sencha Touch class system.
Data-bound controls
Another thing I learned from Sencha Touch 2 Up and Running: There are three data-bound controls:
- DataView (xtype = dataview)
- List (list)
- NestedList (nestedlist)
You can find a list of possible xtype values on this page.
Store and Proxy
A Sencha Touch Store is a collection of Model elements with some added methods. Data-bound components connect to stores to display data. I think this quote comes from Sencha Touch 2 Up and Running: Data-bound views are tied to stores in such a way that any change to the data of the store will be updated automatically on the UI.
A Sencha Touch Proxy enables does the work of connecting to a local or remote data store. The views in a Sencha Touch app have no idea whether the data store is local or remote. Remote stores can have types of JSONP, AJAX, or REST.
Containers
For a Container, items is the list of components it holds.
Containers can have these layouts: fit, hbox, vbox, and card.
Debugging
There are two main ways to debug Sencha Touch applications. First, use console.log(aString) in your JavaScript code to display output in your browser's console. Second, use this JavaScript object debug approach.
Builds
One thing I learned recently is that once you get into more advanced topics like theming, you’ll need to learn how to build your application. The basic command is simple:
sencha app build
As for what all it does, I don’t know those details yet. However, if you’re building a theme, you’ll quickly get into SCSS files, which requires this build process, which also requires Java, Ruby, Compass, and some other tool I can’t remember the name of right now.
More ...
I'll add more information here as I think of things, but for the moment, these are the things that come to mind.
Actually, the other thing that comes to mind is that it would be helpful if the Sencha folks provided a lot of simple examples, gradually building up the concepts. But lacking that, I hope these notes are helpful.
books by alvin
 |
 |
 |
 |