How do I make a two column layout with a header row?

[4carlosanderson]

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]

This forum is for ExtJS 4. Please post in the Sencha Touch forum.

[4carlosanderson]

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]

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'
                }
            ]
        }
    ]
});