Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    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 [FIXED-r5761][3.x] Nested hbox in borderlayout does not set child container height

    [FIXED-r5761][3.x] Nested hbox in borderlayout does not set child container height


    Fx 3.5 for OS X & Windows (see below)

    With this example, the first of the hbox children is being set to 70px high, instead of 130, which is what the panel that uses the hbox layout is configured for.

    This *was* working before, but is no longer.

    Code:
    Ext.onReady(function() {
        var leftHalf =  {
            xtype       : 'container',
            layout      : 'form',
            flex        : 1,
            labelWidth  : 60,
            defaultType : 'textfield',
            defaults    : { anchor: '-10' },
            items       : [
                {
                    xtype      : 'hidden',
                    name       : 'id'
                },
                {
                    fieldLabel : 'Name',
                    name       : 'name',
                    allowBLank : false,
                    maxLength  : 255
                },
                {
                    xtype      : 'datefield',
                    fieldLabel : 'Activated',
                    name       : 'dateActive'
                },
                {
                    fieldLabel : 'Other Field'
                },
                {
                    fieldLabel : 'Other Field'
                },
                {
                    fieldLabel : 'Other Field'
                }
            ]
        };
    
        var rightHalf = {
            xtype      : 'container',
            title      : 'Description',
            flex       : 1,
            layout     : 'form',
            labelWidth : 70,
            items      : {
                xtype      : 'textarea',
                fieldLabel : 'Description',
                name       : 'description',
                anchor     : '100% 100%'
            }
        } ;
    
        var northRegion = {
            layout       : 'hbox',
            region       : 'north',
            height       : 130,
            bodyStyle    : 'background-color: #DFE8F6; padding: 10px',
            layoutConfig : { align : 'stretch' },
            border       : false,
            items        : [
                leftHalf,
                rightHalf
            ]
        };
    
    
        new Ext.Viewport ({
            layout : 'fit',
            items  : {
                layout : 'border',
                items  : [
                    northRegion,
                    {
                        region : 'center',
                        style  : 'padding: 10px;',
                        html   : 'Center region'
                    }
    
                ]
            }
        })
    
    });






    in windows too


    Much more complex layout (in the Ext JS in action application):


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

      0  

    Default


    I've seen this too. FF 3.5.5 on Linux.

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

      0  

    Default


    It's a bug in getViewSize which I've been working on. It's not quite right there. It should not subtract padding if it finds a valid dimension value from getStyle(). I'm subracting padding (10px top and bottom) where it has already been done.

    I will work out a fix, and PM Jamie with it.

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    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


    Interesting. I wonder why things worked, and nolonger do so.

    Testing testing testing

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

      0  

    Default


    And BoxLayout does this again!

    We need to make it more consistent.

    getViewSize returns the content area within the padding. That's the theory.

    Perhaps there should be two modes. A second parameter, contentBox could be true to indicate within the padding, or false to mean just within the border.

    And the layouts need to be clear on what they are asking for.

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

      0  

    Default


    This will work in that example:

    Code:
    Ext.override(Ext.Element, {
            /**
             * <p>Returns the dimensions of the element available to lay content out in.<p>
             * <p>If the element (or any ancestor element) has CSS style <code>display : none</code>, the dimensions will be zero.</p>
             * example:<pre><code>
            var vpSize = Ext.getBody().getViewSize();
    
            // all Windows created afterwards will have a default value of 90% height and 95% width
            Ext.Window.override({
                width: vpSize.width * 0.9,
                height: vpSize.height * 0.95
            });
            // To handle window resizing you would have to hook onto onWindowResize.
            </code></pre>
             * @param {Boolean} contentBox True to return the W3 content box <i>within</i> the padding area of the element. False
             * or omitted to return the full area of the element within the border. See <a href="http://www.w3.org/TR/CSS2/box.html">http://www.w3.org/TR/CSS2/box.html</a>
             * @return {Object} An object containing the elements's area: <code>{width: &lt;element width>, height: &lt;element height>}</code>
             */
            getViewSize : function(contentBox){
                var doc = document,
                    me = this,
                    d = me.dom,
                    extdom = Ext.lib.Dom,
                    isBB, w, h, tbBorder = 0, lrBorder = 0,
                    tbPadding = 0, lrPadding = 0;
                if (d == doc || d == doc.body) {
                    return { width: extdom.getViewWidth(), height: extdom.getViewHeight() };
                }
                isBB = me.isBorderBox();
                tbBorder = me.getBorderWidth('tb');
                lrBorder = me.getBorderWidth('lr');
                tbPadding = me.getPadding('tb');
                lrPadding = me.getPadding('lr');
    
                // Width calcs
                // Try the style first, then clientWidth, then offsetWidth
                if (w = me.getStyle('width').match(/(\d+)px/)){
                    if ((w = parseInt(w[1], 10)) && isBB){
                        // Style includes the padding and border if isBB
                        w -= (lrBorder + lrPadding);
                    }
                    contentBox || (w += lrPadding);
                } else {
                    if (!(w = d.clientWidth) && (w = d.offsetWidth)){
                        // offsetWidth includes any border
                        w -= lrBorder;
                    }
                    if (w && contentBox) w -= lrPadding;
                }
    
                // Height calcs
                // Try the style first, then clientHeight, then offsetHeight
                if (h = me.getStyle('height').match(/(\d+)px/)){
                    if ((h = parseInt(h[1], 10)) && isBB){
                        // Style includes the padding and border if isBB
                        h -= (tbBorder + tbPadding);
                    }
                    contentBox || (h += tbPadding);
                } else {
                    if (!(h = d.clientHeight) && (h = d.offsetHeight)){
                        // offsetHeight includes any border
                        h -= tbBorder;
                    }
                    if (h && contentBox) h -= tbPadding;
                }
    
                return {
                    width : w,
                    height : h
                };
            }
    });
    We need to implement that, and then check all usage of getViewSize, and see whether the layout is requiring the full element dimensions of just the content box.

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

      0  

    Default


    This will illustrate your required layout fully working (without the overnest )

    Drop this into examples/layout

    Code:
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../adapter/ext/ext-base-debug.js"></script>
    <script type="text/javascript" src="../../ext-all-debug.js"></script>
    <script type="text/javascript">
    Ext.override(Ext.Element, {
            /**
             * <p>Returns the dimensions of the element available to lay content out in.<p>
             * <p>If the element (or any ancestor element) has CSS style <code>display : none</code>, the dimensions will be zero.</p>
             * example:<pre><code>
            var vpSize = Ext.getBody().getViewSize();
    
            // all Windows created afterwards will have a default value of 90% height and 95% width
            Ext.Window.override({
                width: vpSize.width * 0.9,
                height: vpSize.height * 0.95
            });
            // To handle window resizing you would have to hook onto onWindowResize.
            </code></pre>
             * @param {Boolean} contentBox True to return the W3 content box <i>within</i> the padding area of the element. False
             * or omitted to return the full area of the element within the border. See <a href="http://www.w3.org/TR/CSS2/box.html">http://www.w3.org/TR/CSS2/box.html</a>
             * @return {Object} An object containing the elements's area: <code>{width: &lt;element width>, height: &lt;element height>}</code>
             */
            getViewSize : function(contentBox){
                var doc = document,
                    me = this,
                    d = me.dom,
                    extdom = Ext.lib.Dom,
                    isBB, w, h, tbBorder = 0, lrBorder = 0,
                    tbPadding = 0, lrPadding = 0;
                if (d == doc || d == doc.body) {
                    return { width: extdom.getViewWidth(), height: extdom.getViewHeight() };
                }
                isBB = me.isBorderBox();
                tbBorder = me.getBorderWidth('tb');
                lrBorder = me.getBorderWidth('lr');
                tbPadding = me.getPadding('tb');
                lrPadding = me.getPadding('lr');
    
                // Width calcs
                // Try the style first, then clientWidth, then offsetWidth
                if (w = me.getStyle('width').match(/(\d+)px/)){
                    if ((w = parseInt(w[1], 10)) && isBB){
                        // Style includes the padding and border if isBB
                        w -= (lrBorder + lrPadding);
                    }
                    contentBox || (w += lrPadding);
                } else {
                    if (!(w = d.clientWidth) && (w = d.offsetWidth)){
                        // offsetWidth includes any border
                        w -= lrBorder;
                    }
                    if (w && contentBox) w -= lrPadding;
                }
    
                // Height calcs
                // Try the style first, then clientHeight, then offsetHeight
                if (h = me.getStyle('height').match(/(\d+)px/)){
                    if ((h = parseInt(h[1], 10)) && isBB){
                        // Style includes the padding and border if isBB
                        h -= (tbBorder + tbPadding);
                    }
                    contentBox || (h += tbPadding);
                } else {
                    if (!(h = d.clientHeight) && (h = d.offsetHeight)){
                        // offsetHeight includes any border
                        h -= tbBorder;
                    }
                    if (h && contentBox) h -= tbPadding;
                }
    
                return {
                    width : w,
                    height : h
                };
            }
    });
    
    Ext.onReady(function(){
    
        var leftHalf =  {
            xtype       : 'container',
            layout      : 'form',
            flex        : 1,
            labelWidth  : 90,
            defaultType : 'textfield',
            defaults    : { anchor: '-10' },
            items       : [
                {
                    xtype      : 'hidden',
                    name       : 'id'
                },
                {
                    fieldLabel : 'Name',
                    name       : 'name',
                    allowBLank : false,
                    maxLength  : 255
                },
                {
                    xtype      : 'datefield',
                    fieldLabel : 'Activated',
                    name       : 'dateActive'
                },
                {
                    fieldLabel : 'Other Field'
                },
                {
                    fieldLabel : 'Other Field'
                },
                {
                    fieldLabel : 'Other Field'
                }
            ]
        };
    
        var rightHalf = {
            xtype      : 'container',
            title      : 'Description',
            flex       : 1,
            layout     : 'form',
            labelWidth : 70,
            items      : {
                xtype      : 'textarea',
                fieldLabel : 'Description',
                name       : 'description',
                anchor     : '100% 100%'
            }
        } ;
    
        var northRegion = {
            layout       : 'hbox',
            region       : 'north',
            height       : 150,
            bodyStyle    : 'background-color: #DFE8F6; padding: 10px',
            layoutConfig : { align : 'stretch' },
            border       : false,
            items        : [
                leftHalf,
                rightHalf
            ]
        };
    
        new Ext.Viewport ({
            layout : 'border',
            items  : [
                northRegion,
                {
                    region : 'center',
                    style  : 'padding: 10px;',
                    html   : 'Center region'
                }
    
            ]
        });
    
    });
    </script>
    </head>
    <body></body>
    </html>

  8. #8
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,337
    Vote Rating
    75
    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


    Thanks for your time Nige.

    The the overnesting is a left-over artifact from stripped down of the example.

    In the Extjs in action app, i need to nest a panel within a fit-layout viewport to get the following effect.

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

      0  

    Default


    So the suggested code fixes it for you?

    I PM'd Jamie to let him know that we need to integrate this.

  10. #10
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      0  

    Default


    There is an unusual case that you don't handle:

    If the element is hidden with display:none the result should be {width: 0, height: 0}, but due to padding calculations the resulting width and/or height could actually be negative.

    You should probably use:
    Code:
    ...
    if (w && contentBox) w -= lrPadding;
    ...
    if (h && contentBox) h -= tbPadding;
    ...

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar