Results 1 to 4 of 4

Thread: [CLOSED][3.0rc2] extra nested hbox leads to incorrect width

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext User
    Join Date
    Jun 2009
    Posts
    16
    Vote Rating
    0
      0  

    Default [CLOSED][3.0rc2] extra nested hbox leads to incorrect width

    Ext version tested:
    • Ext 3.0 RC2



    Browser versions tested against:
    • IE8
    • FF3.0.11


    Operating System:
    • Vista



    Description:

    Widths of items 1 and 2 are not determined by the width of item 3. Item 4's width is determined
    by the width of item 5. The only difference is that item 1 is an extra nested hbox.
    • See screenshot



    Test Case:



    Code:
    Ext.onReady(function(){
        var n = 1;
    
        var getVboxItem = function(){
            return {
                title: 'Item ' + n++,
                layout: {
                    type: 'vbox'
                },
                items: [
                    {
                        width: 100,
                        title: 'Item ' + n++, // Items 3, 5
                        html: 'text goes here'
                    }
                ]
            };
        };
    
        var getVbox = function(){
            return {
                defaults: {
                    //xtype: 'container',
                    flex: 1 // distribution vertically
                },
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                items: [
                    getVboxItem()
                ]
            };
        };
    
        var getWindowItem = function(){
            return {
                title: 'Item ' + n++, // Item 1
                defaults: {
                    // no flex
                },
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [
                    getVboxItem() // item 2
                ]
            };
        };
    
        new Ext.Panel({
            title: 'test layout',
            height: 400,
            width: 400,
            renderTo: document.body,
            defaults: {
                //xtype: 'container',
                // no flex
            },
            layout: {
                type:  'hbox',
                align: 'stretch' // stretch it vertically
            },
            items: [
                getWindowItem(), // item 1
                getVboxItem() // item 4
            ]
        });
    });
    The result that was expected:
    • I would expect that the width of panel items 1 and 2 is determined by the given fixed width of panel item 3.



    The result that occurs instead:
    • The width of panel items 1 and 2 seem to be determined by the title text of panel 1.
    • Also, on IE 8 there is an incorrect height as indicated in the screenshot



    Screenshot or Video:
    • attached



    Debugging already done:
    • none



    Possible fix:
    • not provided
    Attached Images Attached Images

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,215
    Vote Rating
    1008
      0  

    Default

    I think you're going about this the wrong way. Ext Components/Containers work with the parent item sizing the children, not the other way round. Also, in your test case you don't see to use the getVBox function. I'm not sure if this was on oversight or left there to demonstrate something. What kind of layout were you trying to achieve?
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Ext User
    Join Date
    Jun 2009
    Posts
    16
    Vote Rating
    0
      0  

    Default

    Hi Evant,

    Yes, I think I am thinking about it the wrong way.

    I'm actually trying to draw a diagram using 'component' instead of panel. mjlecomte suggested that I use panel so that it was easier to see what was going on.

    I am going to be dynamically adding rows (Items 3,5) depending on how many things I want to display. If I use fixed width on relevant parent containers, which I think is fine, then I think width will work. I am more concerned about height. As well as additional item 3s, there will also be additional item 2s with their own children. The heights need to be whatever the minimum needed to display the item 3s is. Perhaps I will have to calculate the height programmatically and set it when I add/remove item 3s and 2s.

    This all started with this thread:

    http://extjs.com/forum/showthread.php?t=72347#9

    I apologise for starting what has turned out to be another 'help me' thread. I did think that it was a bug.

  4. #4
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,215
    Vote Rating
    1008
      0  

    Default

    FYI there a few fixes that went in after RC2 related to stretching the heights/widths on hbox/vbox respectively. So these may be resolved. Anyway, going to mark this one as closed. Thanks for the detailed report, btw
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

Posting Permissions

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