View Full Version : Frustrated newbie

13 Jan 2011, 10:45 AM

I'm a self taught HTML, CSS, JavaScript, jQuery, PHP and Lotus Notes developer, so I'm not stupid.

However, I feel really stupid and very frustrated trying to learn Sencha Touch. For instance, I can see in the examples that the attribute 'xtype' can define the data that is to go into a field. Where is the support for this attribute?

The examples show the basics of the classes, but not how to use them together! It's taken me an age to work out how to create a login form and even longer (without success STILL) how to create a tabpanel with forms and AJAX calls in.

Any search in google shows mostly out od date and invalid examples, so I can see only the Sencha Touch website being of any use. Am I wrong?

I'm sure people will disagree with me, so how about explaining where I can find a list of 'xtype' values?

Thanks for any help provided.

13 Jan 2011, 11:42 AM
I suggest you to read the docs (http://dev.sencha.com/deploy/touch/docs/).
That's a good point where to start.
However you can find a list of all available xtype here.


Gary Pickrell
15 Jan 2011, 4:26 PM

I'm also learning Sencha and also finding it frustrating. The problem isn't a matter of intelligence. The system is powerful and flexible but also complicated. Unfortunately the documentation is lacking and it is difficult to understand sencha's paradigm by osmosis. Just because it is difficult doesn't mean it is impossible. My advice is to go over examples and try to understand them. It requires a lot of time and patience but it helps.

My example of something missing is the panels default x property. I can't find it in the documentation. I don't have a clue how to set it after construction. I discovered it by reading an example.

Documentation isn't a glorious task and requires a good communicator. Sencha has basically done a good job but it would be nice for it to be more complete and more organized. With time I'm sure this will happen.


16 Jan 2011, 4:48 PM
Quite good start: http://www.youtube.com/view_play_list?p=46300F010B836104&playnext=1&v=6DXdsnpGs3A

and sources with comments: sencha-touch-debug-w-comments.js

16 Jan 2011, 7:13 PM
Graham: Just another voice to chime in and echo your frustrations. It took me quite some time, but I managed to finally feel like what I knew was a lot more than what I didn't know. There's a lot of factors involved here, two of which are the nature of javascript (weak typing, no true OOP support, no "compile" to help you find errors before you run, minimal code insight even with the best IDE due to the untypedness) and the particular design philosophy of Ext/Sencha (config objects that are just objects, rather than particular parameters on function calls, the ability to choose between instantiating an object yourself or using an xtype, templates).

Also, the docs are pretty good about explaining particular configs, properties, methods and events, but poor at "teaching" you how to bring all that together into some simple example applications (the kitchen sink and other demos are great for looking at, but not so great for a beginning to understand through source code). And the docs do disappoint sometimes, leaving out key properties and methods or entire classes.

It's a VERY good library for developing mobile apps, and I can't really say I'm unhappy with it since I haven't paid anything for it (yet).

So just stick with it and I think eventually you'll turn a corner. I'm also developing stuff with Google App Engine, Java and the Objectify library, and it's almost the same story all over again. When everything is unfamiliar to you, it's very hard to isolate any one part and figure out what you're doing wrong.

Gary Pickrell
17 Jan 2011, 6:58 AM
Thanks openthesky7. The video was helpful.

17 Jan 2011, 7:04 AM
More screencasts you will find here: http://www.sencha.com/learn/Sencha_Touch

Sources of examples from standard Sencha Touch library is real mine of knowledge. You will find there all fundamental issues.

17 Jan 2011, 7:43 AM
Thanks so much for posting the screencasts. I never saw them as they were posted about a month after I got started. But the couple I've looked at do an EXCELLENT job at explaining things from scratch, adding just tiny pieces one small step at a time. That's a much better way to do it than big examples you can't get your hands around. I'm watching these now, even when I think I already know how to do what they talk about. Never hurts.

Plus, I could listen to Andrew Neil all day...

17 Jan 2011, 9:04 AM
Hi all, I'm adding in to the frustration of learning sencha touch. It took me quite a while to understand xtype too. And I'm a bit stranded on 'ui' as well now. Would anybody know where to find a list of these values? Besides opening up the js and do it manually, I mean. The documentation is not very helpful, since it says the valid values are normal, back, round, etc. and in the example code it uses decline or others. Thanks to whoever could point to some resources.

17 Jan 2011, 9:13 AM
xtype is parameter, that is combined with OOP deserialization. When you have for example new Ext.Panel( { } ) you know that it is a Panel, but when you have only { } definition of object, you will have to specifiy xtype parameter inside. When Sencha Touch library want to build instance of object from class definition inside brackets, will use this parameter to obtain class type.

ui defines set of CSS clasess needed by graphics components.

All of those parameters you will find in documentation inside Sencha Touch library archive.

You could also check sources of library: sencha-touch-debug-w-comments.js

17 Jan 2011, 9:19 AM
ui defines set of CSS clasess needed by graphics components.

All of those parameters you will find in documentation inside Sencha Touch library archive.

Unfortunately, the doc for ui for Button just says:

Determines the UI look and feel of the button. Valid options are 'normal', 'back', 'round', 'action', 'forward'. Defaults to 'normal'.

I don't know of any other way to find the undocumented values than poking around in the js/CSS/SASS.

17 Jan 2011, 9:20 AM

ui - "A set of predefined ui styles for individual components". It is rather combined with UI configuration, but is similar to CSS styles.
Most components support 'light' and 'dark'.

Google also "SenchaTouchThemes.pdf". This document describes UI themes.

17 Jan 2011, 9:21 AM
Hi openthesky7, thanks for replying.

Yes, I have a grip on xtype now, thanks to this post among others: http://www.sencha.com/learn/Tutorial:Xtype_defined

On ui, I actually opened that js you say, and this is the list of "ui:" occurences I found:

As you see, "round" to make an example, is not even present (when it is present in the Button doc). I started from a Button, went to Ext.Component, and from there to Ext.lib.Component. Still I can't make out a well-formed list of this parameter that tells me what components have what ui properties. With this i mean a list of pre-built ui parameters shipped with sencha-touch.

If you could suggest additional more precise source of informations I would be most grateful!

17 Jan 2011, 9:24 AM
> I don't know of any other way to find the undocumented values than poking around in the js/CSS/SASS.

At library source... Values are (I think) hardcoded in JS classes.

17 Jan 2011, 9:26 AM
At library source... Values are (I think) hardcoded in JS classes.

I'm not sure what you mean by this. I'm basically saying there isn't any actual full documentation of all the different ui pieces, just partial ones. For the rest, you have to dig through the source. It's not a very good situation, either for newbies or non-newbies.

17 Jan 2011, 9:28 AM
> xtypes...

You could also define own xtype:

Ext.ux.ShadowButton = Ext.extend(Ext.Button, {
cls: 'mygradient1',
pressedCls: 'mygradient2',
style: 'float:left;',
width: 153, height: 76,
padding: 3,
margin: 2,

Ext.reg('shadowbutton', Ext.ux.ShadowButton);

and use it:

items: [
new Ext.ux.ShadowButton({text: STR_1, icon: '/icon1.png'}), // public object building
{xtype: 'shadowbutton', text: STR_2, icon: '/icon2.png'}, // object building through deserialization

17 Jan 2011, 10:01 AM

Unfortunately you are right, but what we could do?

Follow the Even (from Sencha) motto: "Don't be afraid of the source code" : )

After all the library source is really well designed and coded. Good work!

17 Jan 2011, 10:18 AM
I'm not afraid of the source code, it's just that when you don't know what you're actually looking for it's often hard to find it. For example, if I open the source for Button, the only mentions of forward, back, etc. are in the embedded docs. The same is true for all its ancestors. In fact, you won't even find the word 'forward' in the entire sencha-touch-debug.js (at least on 1.0.1a). So then you start trying to dig through the CSS. You can find them, but they're very hard to read in any kind of coherent way. So then I dug through the sass files. That took a while and I found a section that added decline, etc. but it was nowhere near the forward, back, etc.! So all in all, it's a very time consuming way that still leaves you scratching your head.

It's just a case where they need better documentation. The real problem is that the doc for Button.ui is wrong. It claims a certain set and leaves out some of them. I'm going to go enter a bug for that after this, in fact.

I do agree with you that the library is well designed and coded. I have no complaints there. And (for now) I'm not paying anything so I in no way "demand" that Sencha do more to support me without me giving them some money. But I'm actually posting these things because I honestly want to help them make their product better, not to complain.

17 Jan 2011, 10:38 AM
> The real problem is that the doc for Button.ui is wrong.

Sencha is still young project. I hope that they improve documentation.

Always you can post the "bug in doc" issue on

I believe it could helps them.

17 Jan 2011, 10:39 AM
Yup, like I said, I'm working on a bug for this, including a better example of all the styles. Stay tuned...

17 Jan 2011, 11:26 AM
I finally did this so I could just SEE what all the ui styles were like:

<link rel="stylesheet" href="sencha/resources/css/sencha-touch-debug.css" type="text/css">
<script type="text/javascript" src="sencha/sencha-touch-debug.js"></script>

<script type="text/javascript">


onReady: function() {

var ui1 = ['', 'decline', 'confirm', 'action'];
var ui2 = ['', 'round', 'small', 'back', 'forward'];

var panel = new Ext.Panel({
layout: {
type : 'vbox',
pack : 'center',
align: 'stretch'
defaults: {
layout: {
type: 'hbox'
flex: 1,
defaults: {
xtype: 'button',
cls : 'demobtn',
flex : 1,

var mainPanel = new Ext.Panel({

for (var ui1index = 0; ui1index < ui1.length; ui1index++) {
var row = [];
for (var ui2index = 0; ui2index < ui2.length; ui2index++) {
var btnUI = ui1[ui1index] + ((ui1[ui1index] == '' || ui2[ui2index] == '') ? '' : '-') + ui2[ui2index];
var o = {xtype:'button', text:btnUI};
if (btnUI != '')
o.ui = btnUI;
panel.insertDocked(0, {xtype:'toolbar', dock:'bottom', items:row});




And the output:


One thing I noticed - back/forward buttons overspill their margins!

I found it helpful in seeing which ones were valid combinations and which were not. Rather than use "normal", I just left the ui property off, as otherwise it would have been more complex to code (e.g. "normal-round" is not what you want, you want just "round".) Note that ui:"" or ui:undefined is not the same thing as ui:"normal"!

Edit: Fixed some of the above stuff in my original code and post concerning "normal" versus "".

17 Jan 2011, 12:15 PM

17 Jan 2011, 1:42 PM
Thanks for sharing this Jep! Very useful! :)

5 Oct 2011, 12:41 AM

ui - "A set of predefined ui styles for individual components". It is rather combined with UI configuration, but is similar to CSS styles.
Most components support 'light' and 'dark'.

Google also "SenchaTouchThemes.pdf". This document describes UI themes.

I suggest watching the guide about theming sencha touch with SASS. I haven't tried theming yet but it helped me understanding the concept about UI

5 Oct 2011, 12:51 AM
The problem with learning sencha touch is that there's no book (non yet, they're writing it) and is hard to find complex applications.
It's strange to me that a powerful framework like this is used to build just simple applications.
With the introduction of the app gallery it's a bit easyer to find complete application, but still takes a lot of time to learn.