Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206
    Vote Rating
    0
    BlueCamel is on a distinguished road

      0  

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

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


    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.

    Code:
        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.

    Code:
        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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  3. #3
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,505
    Vote Rating
    53
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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!

  4. #4
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206
    Vote Rating
    0
    BlueCamel is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    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

  5. #5
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    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.

  6. #6
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

    Code:
    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"

  7. #7
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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

  8. #8
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206
    Vote Rating
    0
    BlueCamel is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    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.

  9. #9
    Touch Premium Member
    Join Date
    Feb 2008
    Posts
    206
    Vote Rating
    0
    BlueCamel is on a distinguished road

      0  

    Default


    Quote Originally Posted by jgarcia@tdg-i.com View Post
    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.

  10. #10
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


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