Noob - modifying examples to learn

[DaveC426913]

So, I want to break off an example to start experimenting.

I'm going to try to make me a virtual keyboard. I thopguht I'd start with the Toolbars example, since that's the only example that has multiple buttons in a row.

I've eliminated the extraneous Toolbars, leaving only one. I've added some extra buttons to begin making the QWERTY.



Ext.setup({

onReady: function() {
var tapHandler = function(button, event) {
var txt = "User tapped the '" + button.text + "' button.";
Ext.getCmp('toolbartxt').update(txt);
};
var buttonsGroup = [{
text: 'Q',
ui: 'action',
handler: tapHandler
}, {
text: 'W',
ui: 'action',
handler: tapHandler
}, {
etc. etc.
}];

var dockedItems = [{
xtype: 'toolbar',
ui: 'metal',
items: buttonsGroup,
dock: 'top',
}];
new Ext.Panel({
id: 'toolbartxt',
html: 'Enter your text',
fullscreen: true,
dockedItems: dockedItems
});
}
});



So, now I want the buttons to wrap after 'P' (or at least place them absolutely on my panel).

Panel has a maxWidth property but it does not do the trick.


new Ext.Panel({
id: 'toolbartxt',
html: 'Enter your test',
fullscreen: true,
dockedItems: dockedItems,
maxWidth: 200
});


I tried eliminating the fullscreen: true, but that breaks the page - I get blank.

This works:


var dockedItems = [{
xtype: 'toolbar',
ui: 'metal',
items: buttonsGroup,
dock: 'top',
maxWidth: '440'
}];

...but I don't know how I'd arrive at this except by luck - dockedItems is nothing but a variable. I can;t look up a variable in the API and find its properties.


Rather than giving me a fish, I'd appreciate your teaching me to fish. How do I go about finding out what I can and can't modify and what mods I can make?

[arlo.carreon]

This works:


var dockedItems = [{
xtype: 'toolbar',
ui: 'metal',
items: buttonsGroup,
dock: 'top',
maxWidth: '440'
}];

...but I don't know how I'd arrive at this except by luck - dockedItems is nothing but a variable. I can;t look up a variable in the API and find its properties.


I think I can help a little.

This code:


var dockedItems = [{
xtype: 'toolbar',
ui: 'metal',
items: buttonsGroup,
dock: 'top',
maxWidth: '440'
}];

Is the same as this:


var myToolbar = new Ext.Toolbar({
ui: 'metal',
items: buttonsGroup,
dock: 'top',
maxWidth: '440'
});

var dockedItems = [myToolbar];


When you see an object with the property "xtype", it will create an object of that class. So for the toolbar example, you can look up the docs for Toolbar and see what you have available.

Once you start messing with sencha this kinda of seems trivial, but it took me a while to realize it. I hope this helped some.

[DaveC426913]

Yeah, I think I'm starting to see it now. My colleague just showed me that same passage in the ExtJS section of the JavaScript Frameworks book.

I think what's just dawned on me is that, as far as the learning curve goes, Sencha Touch is basically EXT JS with a bunch of extensions.

[arlo.carreon]

Yea pretty much. Have you seen the docs?

http://www.sencha.com/deploy/touch/docs/

[DaveC426913]

Yeah but that's the API - low-level implementation. Doesn't really tell you how to put it together.