Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    29
    Vote Rating
    2
    tkolo is on a distinguished road

      0  

    Default Grids fails to layout in hbox/vbox layouts

    Grids fails to layout in hbox/vbox layouts


    REQUIRED INFORMATION

    Ext version tested:
    • Ext 4.2.0 beta
    Browser versions tested against:
    • Chrome 23.0.1271.97 m
    Description:
    • Putting a grid as either direct or indirect child of container with box layout makes the container's layout to fail entirely
    • The behaviour is correct in ExtJS 4.1.1 GPL
    Steps to reproduce the problem:The result that was expected:
    • Layout should work
    The result that occurs instead:
    • And it doesn't
    HELPFUL INFORMATION

    See this URL for live test case:
    http://jsfiddle.net/bEWKv/

    Debugging already done:
    • all other layouts seem to work just fine
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    Operating System:
    • Windows 7

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,220
    Vote Rating
    859
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You don't have a width given to the components. Here is your code but with the layout stretching the widths:

    Code:
    Ext.create('Ext.container.Viewport', {
        layout : {
            type  : 'vbox',
            align : 'stretch'
        },
        items  : [
            {
                xtype     : 'grid',
                columns   : [
                    {
                        header    : 'Name',
                        dataIndex : 'name'
                    }
                ],
                minHeight : 150,
                store     : {
                    fields : ['name'],
                    data   : [
                        {name : 'Test 1'},
                        {name : 'Test 2'},
                        {name : 'Test 3'},
                        {name : 'Test 4'},
                        {name : 'Test 5'}
                    ]
                }
            },
            {
                xtype : 'container',
                items : [
                    {
                        xtype : 'textfield'
                        //html: 'test, nested in container'
                    },
                    {
                        xtype : 'component',
                        html  : 'test 2, nested in container'
                    }
                ]
            },
            {
                xtype : 'component',
                html  : 'test 3'
            },
            {
                xtype : 'component',
                html  : 'test 4'
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    29
    Vote Rating
    2
    tkolo is on a distinguished road

      1  

    Default


    Hey,

    Could you please explain me why it works without grid being there?
    Also, tried to give one component a width and set align to 'stretchmax' which doesn't work either, is that to be expected?
    Here's an updated fiddle: http://jsfiddle.net/bEWKv/1/

  4. #4
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    29
    Vote Rating
    2
    tkolo is on a distinguished road

      0  

    Default


    And also why does this throw "layout run failed" (though everything layouts correctly): http://jsfiddle.net/bEWKv/3/

  5. #5
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    5
    Vote Rating
    0
    HeikoErhardt is on a distinguished road

      0  

    Default Solution to layout issue

    Solution to layout issue


    Been a while ago, but I just stumbled across the very same issue.The solution is easier than you might think:All items of a container having a hbox/vbox layout need to have either a defined width/height or have the 'flex' attribute set to some number. When a component has an unknown size, the layout does not have any hint on how to size it.You might also play around with the 'pack' and 'stretch' settings of the hbox/vbox layout to achieve what you have in mind.

Thread Participants: 2

Tags for this Thread