Setting up a simple layout

[dankhan]

I'm new to extjs/Sencha and am really struggling to get a good high-level view of where to get started with creating my own layouts. The examples and tutorial are a good start for building an overall app, but don't really show how you'd position multiple elements on the page to build a composite layout - I know this is probably one of the main differences in Ext over JQTouch or just plain HTML/CSS, but I can't find many resources to help get started specifically for Sencha Touch.

I'm trying to create a view that has three sections, I can do the first two, but not the last - maybe I'm not understanding layouts enough yet!

Here's what I'm trying to do in my view:

1. Toolbar along top with back/forward buttons - I can do this
2. Main HTML content panel under toolbar - I can manage this one
3. A fixed panel at bottom 3rd of screen with two buttons - 1 shows a popup window with close button when clicked - the other loads a new form-based view when clicked.

How do I create a panel for the bottom buttons and how would I load up the popup/new view onclick?

Thanks in advance

[evant]

//Setup
Ext.setup({
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var main = new Ext.Panel({
fullscreen: true,
layout: 'card',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [{
text: 'Prev'
}, {
text: 'Next'
}]
}, {
dock: 'bottom',
xtype: 'toolbar',
items: [{
text: 'Overlay',
handler: function(){
// create overlay
}
}, {
text: 'Form',
handler: function(){
main.setCard(1);
}
}]
}],
items: [{
html: 'Foo'
}, {
xtype: 'form',
items: [{
xtype: 'textfield'
}]
}]
});
}
});

[dankhan]

Thanks Evan, that gives me a good idea of how to manage the click handlers.

For the bottom button panel I am looking for just two buttons inside the main content panel that I can address rather than a docked toolbar. Can I create a panel with two xtype: buttons and add this as the third item in the container? How do I manage the layout and positioning of each of the panels? If I want the main panel to be 1/3rd height, and the button panel to be third height - do I have to just give each a css class and set width: 33% or something?

I think this underlies my main learning curve so far! (I'll start a new post with this in mind later).

Thanks.

[Riaz]

Good example for the beginners.