Ext JS 4 layout and panel structure

Question

Allow me to preface my question by admitting that I am a complete newbie to Ext JS, so please excuse my ignorance. I am familiar with HTML, CSS and JavaScript/JQuery so I get most of the syntax in individual pieces, but I am having trouble combining those pieces.

I would like to start by building a basic page layout which would include a header that spans the entire top row, a left column that takes up 50% of the remaining space below and a right column with the same dimensions as the left.

Eventually, I would like to display different types of content in the panels, but for now, I need to understand the basic syntax and structure of Ext JS layouts and viewports. As it stands, I am ultimately confused. Below is a sample of my first attempt at some code, but it is obviously way off-base:

var panel = new Ext.Panel({
    fullscreen: true,
    layout: {
        type: "Panel",
        align: "fit",
    },
    items: [
        {
            xtype: "panel",
            id: "topHeader",
            title: "Header",
            style: "height:200px;"
        },
        {
            xtype: "panel",
            id: "left",
            title: "Left",
            style: "width:500px;z-index:2;background-color:#ccc;position:absolute;left:0px;"
        },
        {
            xtype: "panel",
            id: "right",
            title: "Right",
            style: "width:500px;z-index:2;background-color:#000;position:absolute;right:0px;"
        }
    ]
});

Answer 1

For this, you need to use a 'border' layout. Border layout allows you to add components in various regions as North, Center, Left, Right, South.

You can get a working example here - http://docs.sencha.com/ext-js/4-0/#!/example (Layout Section - Border Layout)

Hope this helps.

Answer 2

I think you mean something like this?

Ext.create('Ext.Viewport', {
    layout: {
        type: 'border',
        padding: 5
    },
    defaults: {
        split: true
    },
    items: [
        {
            region: 'north',
            collapsible: false,
            border: false,
            split: true,
            height: 100,
            html: 'north'
        },
        {
            region: 'west',
            collapsible: false,
            border: false,
            split: true,
            width: '50%',
            html: 'west<br>I am floatable'
        },
        {
            region: 'center',
            border: false,
            html: ' I am center'
        }
    ]
});

Try it and let me know.