ExtJS Portal - Columns of different sizes

Question

I need to be able to use different size columns in the ExtJS portal. For example, I want in the center region, one area which has room for one big widget, and then right below it, 2 areas for 2 smaller widgets. I keep trying to play with the columns to figure this out, but nothing seems to work. Help?

Answer 1

The portal uses a ColumnLayout, so you should be able to configure column widths as needed using standard configs. What have you tried (i.e., post some code)?

Answer 2

Here is what I have so far:

var portalColumns = [{ columnWidth: .70, id: 'firstColumn', style: 'padding:10px 0 10px 10px' }, { columnWidth: .30, id: 'secondColumn', style: 'padding:10px 0 10px 10px' }];

    var mainPanel = new Ext.Panel({
        renderTo: 'pnlContent',
        layout: 'border',
        height: 730,
        width: 1255,
        id: 'mainPanel',
        items: [portalNavigation,
        {
        xtype: 'portal',
        region: 'center',
        margins: '35 5 5 0',
        items: [portalColumns ]
        }]
    });

I know I can configure the column widths for the entire portal, but I need them to be stacked. So one column on top which spans the entire width, and then two below it which is composed of two individual widths. If I have to express it in HTML, here it is:

table tr td colspan="2" tr tr td td tr table

Answer 3

if i get this right a tableLayout would be more fitting your needs ... give it a try : http://www.extjs.com/deploy/dev/docs/?class=Ext.layout.TableLayout