PDA

View Full Version : How do I make a two column layout with a header row?



4carlosanderson
4 Sep 2011, 1:11 AM
I am new to Sencha Touch, so please bear with me. I am attempting to make a page layout with a header for navigation and some header content, along with two columns below the header. The left column would contain a carousel and the right container would contain an accordion. I have a basic understanding of how to construct the individual components (i.e. navigation, carousel and accordion), but I can't quite grasp the concept of nesting them all in a parent container. How should I go about building the basic structure for this type of layout?

Thanks,
Carlos

skirtle
4 Sep 2011, 3:39 PM
This forum is for ExtJS 4. Please post in the Sencha Touch forum.

4carlosanderson
4 Sep 2011, 8:39 PM
Sorry for improperly phrasing my question, but I am actually more interested in the Ext JS 4 functionality. I understand HTML, CSS and Javascript/JQuery but Ext JS seems to be a much more logical way to build Object Oriented web apps. Any help or suggestions will be much appreciated.

Thanks,
Carlos

skirtle
5 Sep 2011, 2:43 AM
Here are two alternatives to consider.


Ext.create('Ext.container.Viewport', {
layout: {
type: 'border'
},
items: [
{
height: 100,
margins: '5',
region: 'north',
title: 'North'
}, {
collapsible: true,
margins: '0 0 5 5',
region: 'west',
split: true,
title: 'West',
width: 400
}, {
margins: '0 5 5 0',
region: 'center',
title: 'Center'
}
]
});


Ext.create('Ext.container.Viewport', {
layout: {
align: 'stretch',
type: 'vbox'
},
items: [
{
height: 100,
margin: '5',
title: 'North'
}, {
flex: 1,
xtype: 'container',
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
margin: '0 5 5 5',
title: 'West',
width: 400
}, {
flex: 1,
margin: '0 5 5 0',
title: 'Center'
}
]
}
]
});