ExtJS Advanced Fluid Border Layout

I need to create an advanced, fluid Border layout for our Report system.

The West pane would be split into 2 separate panes, top for the filter form, and the bottom for navigation.

The Center pane would be split into 3 separate panes, top for the primary data grid, and 2 bottom panes for sub report grids. I may at some point need 3 bottom panes, but I'm hoping to avoid that.

Here is an example of what I am looking for: http://dl.dropbox.com/u/298258/Amistaff/desiredLayout.png

What I have so far is definitely less than satisfactory.

http://dl.dropbox.com/u/298258/Amistaff/currentLayout.png

Here is the code:

var ReportForm = new Ext.FormPanel({
    url:            '',
    frame:          false,
    border:         false,
    title:          'Filter Results',
    width:          260,
    labelWidth:     50,
    padding:        '10 0 0 5',
    standardSubmit: true,
    items:          [
                        {
                            fieldLabel:     'Client',                       
                            hiddenName:     'ClientID',
                            mode:           'local',
                            store:          frmClientStore,
                            displayField:   'CompanyName',
                            valueField:     'ClientID',
                            width:          150,
                            editable:       true,
                            triggerAction:  'all',
                            xtype:          'combo'
                        }

    ],
    buttons:        [
                        {text:'Export',handler:function(){}},
                        {text:'Search',handler:function(){}}, 
                        {text:'Reset',handler:function(){}}
    ]
});

var ReportGrid = new Ext.grid.GridPanel({
    id:                 'ReportGrid',
    width:              '100%',
    height:             '50%',
    viewConfig:         {
                            forceFit:       true
    },
    autoHeight:         true,
    loadMask:           true,
    stripeRows:         true,
    store:              ReportStore,
    margins:            '5 5 5 5',
    cm:                 ReportColumnModel 
    ,bbar:              new Ext.PagingToolbar
                        (
                            {
                                pageSize:       10,
                                store:          ReportStore,
                                displayInfo:    true,
                                displayMsg:     'Displaying results {0} - {1} of {2}'
                            }
                        )

});

var viewport = new Ext.Viewport({
    layout:         'border',
    items:          [
                        {
                            region:             'west',
                            layout:             'vbox',
                            layoutConfig:       {
                                                    align:      'stretch'
                            },
                            width:              260,
                            minSize:            175,
                            maxSize:            400,
                            margins:            '5 5 5 5',
                            items:              [
                                                    ReportForm,
                                                    {
                                                        region:     'south',
                                                        title:      'Superuser',
                                                        border:     false,
                                                        xtype:      'tabpanel',
                                                        activeTab:  0,
                                                        items:      [
                                                                        {
                                                                            title:      'General',
                                                                            xtype:      'panel',
                                                                            height:     200,
                                                                            html:       '',
                                                                        },
                                                                        {
                                                                            title:      'Exams',
                                                                            height:     200,
                                                                            html:       ''
                                                                        }
                                                                    ]
                                                    }
                                                ]
                        },
                        new Ext.Panel({
                            region:             'center',
                            deferredRender:     false,
                            layout:             'fit',
                            margins:            '5 5 5 0',
                            items:              [
                                                    ReportGrid,
                                                    new Ext.Panel({
                                                        region:     'south',
                                                        border:     false,
                                                        height:     '50%',
                                                        html:       'foo',
                                                        layout:     'fit',
                                               开发者_Go百科         items:      [
                                                                        new Ext.Panel({
                                                                            region:     'west',
                                                                            width:      '50%',
                                                                            border:     false,
                                                                            html:       'West'
                                                                        }),
                                                                        new Ext.Panel({
                                                                            region:     'east',
                                                                            width:      '50%',
                                                                            border:     false,
                                                                            html:       'East'
                                                                        })
                                                                    ]
                                                    })
                                                ]
                        })
                    ]
});

Thanks...

EDIT:

Many thanks to amol for the answer below. I have one additional question. If I collapse the form in the west region, how do I make it resize the navigation panel to fill the remaining space?

---

code -

var ReportForm = new Ext.FormPanel({
        url:            '',
        frame:          false,
        border:         false,
        title:          'Filter Results',
        width:          260,
        labelWidth:     50,
        padding:        '10 0 0 5',
        standardSubmit: true,
        items:          [
                            {
                                fieldLabel:     'Client',                       
                                hiddenName:     'ClientID',
                                mode:           'local',
                                //store:          frmClientStore,
                                displayField:   'CompanyName',
                                valueField:     'ClientID',
                                width:          150,
                                editable:       true,
                                triggerAction:  'all',
                                xtype:          'combo'
                            }

        ],
        buttons:        [
                            {text:'Export',handler:function(){}},
                            {text:'Search',handler:function(){}}, 
                            {text:'Reset',handler:function(){}}
        ]
    });

    var ReportGrid = new Ext.grid.GridPanel({
        id:                 'ReportGrid',
        flex:1,
        viewConfig:         {
                                forceFit:       true
        },
        loadMask:           true,
        stripeRows:         true,
        //store:              ReportStore,
        margins:            '5 5 5 5',
        cm:                 new Ext.grid.ColumnModel({
            columns:[
                     {header:'A column', dataIndex:'afield'},
                     {header:'B column', dataIndex:'bfield'}
            ]
        }), 
        store:new Ext.data.ArrayStore({
            autoLoad:true,
            fields:['afield', 'bfield'],
            data:[['value 1','value 3'],['value 2', 'value4']]
        }),
        bbar:              new Ext.PagingToolbar
                            (
                                {
                                    pageSize:       10,
                                    //store:          ReportStore,
                                    displayInfo:    true,
                                    displayMsg:     'Displaying results {0} - {1} of {2}'
                                }
                            )

    });

    var viewport = new Ext.Viewport({
        layout:         'border',
        items:          [
                            {
                                region:             'west',
                                layout:             'vbox',
                                layoutConfig:       {
                                                        align:      'stretch'
                                },
                                width:              260,
                                minSize:            175,
                                maxSize:            400,
                                margins:            '5 5 5 5',
                                items:              [
                                                        ReportForm,
                                                        {
                                                            region:     'south',
                                                            title:      'Superuser',
                                                            border:     false,
                                                            xtype:      'tabpanel',
                                                            activeTab:  0,
                                                            items:      [
                                                                            {
                                                                                title:      'General',
                                                                                xtype:      'panel',
                                                                                height:     200,
                                                                                html:       ''
                                                                            },
                                                                            {
                                                                                title:      'Exams',
                                                                                height:     200,
                                                                                html:       ''
                                                                            }
                                                                        ]
                                                        }
                                                    ]
                            },
                            new Ext.Panel({
                                region:             'center',
                                deferredRender:     false,
                                layout:             'vbox',
                                layoutConfig:{align:'stretch'},
                                margins:            '5 5 5 0',
                                items:              [
                                                        ReportGrid,
                                                        {
                                                            border:     false,
                                                            flex:1,
                                                            layout:     'hbox',
                                                            layoutConfig:{align:'stretch'},
                                                            defaults:{flex:1},
                                                            items:      [
                                                                            new Ext.Panel({
                                                                                html:       'West'
                                                                            }),
                                                                            new Ext.Panel({
                                                                                html:       'East'
                                                                            })
                                                                        ]
                                                        }
                                                    ]
                            })
                        ]
    });