Results 1 to 5 of 5

Thread: Grids fails to layout in hbox/vbox layouts

    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
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha Premium Member
    Join Date
    May 2012
    Posts
    29
    Vote Rating
    2
      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
      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
    10
    Vote Rating
    0
      0  

    Default 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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •