[CLOSED][3.??] GridPanel not sized/resized correctly in vbox layout

[BlueCamel]

I'm using Firefox 3.5.5 on Linux with SVN trunk.

I'm attempting to build a layout where a panel will have multiple items in it. I've simplified the test case as follows.

The top item will be fixed text in a container and the second item will be a grid panel. The grid panel is expected to fill the remaining browser area and be sized/resized with the browser window.

My understanding about GridPanels is they manage themselves and they depend on either a height being specified in the GridPanel config or the container managing the height. I'm looking to have the container manage the height but have run into two failures.

The following code shows my first attempt by placing the GridPanel inside a container with a fit layout. See the screenshot attached titled 'layout-fit.png' for the results.

    var myData = [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am']
    ];

    var columns = [
        {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
        {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
        {header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
        {header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
        {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ];

    var store = {
        xtype: 'arraystore',
        data: myData,
        fields: [
            {name: 'company'},
            {name: 'price', type: 'float'},
            {name: 'change', type: 'float'},
            {name: 'pctChange', type: 'float'},
            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    };

    var page = new Ext.Viewport({
        layout: 'border',
        items: [{
            xtype: 'panel',
            border: false,
            id: 'brokenthing',
            region: 'center',
            items: [{
                xtype: 'container',
                html: '<p>Item One in a container</p><br />'
            },{
                xtype: 'container',
                layout: 'fit',
                items: {
                    xtype: 'grid',
                    columns: columns,
                    store: store,
                    autoExpandColumn: 'company'
                }
            }]
        }]
    });

The second attempt was to use a vbox to manage the layout and apply a flex:1 to the item holding the GridPanel. This works until the browser window is resized. It's also quite slow on the resize performance compared to other layouts, but I haven't been able to quantify it yet. See the two screenshots titled vbox.png and vbox-resize.png.

    var page = new Ext.Viewport({
        layout: 'border',
        items: [{
            xtype: 'panel',
            layout: 'vbox',
            border: false,
            id: 'brokenthing',
            region: 'center',
            items: [{
                xtype: 'container',
                html: '<p>Item One in a container</p><br />'
            },{
                xtype: 'grid',
                flex: 1,
                columns: columns,
                store: store,
                autoExpandColumn: 'company'
            }]
        }]
    });

layout-fit.jpg vbox.jpg vbox-resized.jpg

[Animal]

It looks to me like it's working. It's fitting the available height.

[Animal]

It will be a little slower than necessary because you are overnesting. You have a border layout containing the vbox, instead of just a vbox!

[BlueCamel]

It looks to me like it's working. It's fitting the available height.

I should have used a red marker. Please take a look at this updated image from the first post. This happens after resize when using a vbox layout.

vbox-resized.jpg

[jay@moduscreate.com]

Here is a tip: You don't need to use the border layout with a viewport if you're just going to nest a panel (container) that just nests other components.

[jay@moduscreate.com]

This is a bug with your implementation, which i do not agree with, but fixed

var myData = [
        ['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
        ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
        ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
        ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
        ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
        ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
        ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
        ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
        ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
        ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
        ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am']
    ];

    var columns = [
        {id:'company',header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
        {header: 'Price', width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'},
        {header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
        {header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
        {header: 'Last Updated', width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ];

    var store = {
        xtype: 'arraystore',
        data: myData,
        fields: [
            {name: 'company'},
            {name: 'price', type: 'float'},
            {name: 'change', type: 'float'},
            {name: 'pctChange', type: 'float'},
            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    };

    var page = new Ext.Viewport({
        layout: 'border',
        items: [{
            id: 'brokenthing',
            region: 'center',
            layout : 'vbox',
            layoutConfig : { align : 'stretch' },
            items: [{
                xtype: 'container',
                html: '<p>Item One in a container</p><br />'
            },{
                xtype: 'grid',
                columns: columns,
                store: store,
                viewConfig : {forceFit : true},
                flex : 1,
                autoExpandColumn: 'company'
               
            }]
        }]
    });

Marking as "closed"

[jay@moduscreate.com]

One more thing, if you want to learn more about the layouts and the framework, Ext JS in Action is a great resource.

[BlueCamel]

Here is a tip: You don't need to use the border layout with a viewport if you're just going to nest a panel (container) that just nests other components.

That's true, but for this test case I simplified an app design. In reality I'm using a border layout with a view port to hold the application North Panel and Center Panel. The Center Panel is a card layout that changes based on selections from the North Panel.

However, given this architecture, it may not be a good choice. Each card panel has it's own layout some times with multiple components on it. The result becomes Viewport (borderlayout) -> Component (cardlayout) -> [item1, item2, itemN].

I think this tends to nest too deep based on the extjs resize performance I've seen. Likely I'll have to rethink this strategy to have the North Panel add and remove components from the Center Panel as needed.

[BlueCamel]

One more thing, if you want to learn more about the layouts and the framework, Ext JS in Action is a great resource.

Thank you Jay. Sorry about the bogus report.

[jay@moduscreate.com]

No need to apologize. we are all human dude. I submitted a bogus report the other day and felt really stupid :P