Results 1 to 6 of 6

Thread: [4.1] ( IE 7 only ) Panel/Componet Can't getHeight() in beforeLayout.

    Looks like we can't reproduce the issue or there's a problem in the test case provided.
  1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    33
    Vote Rating
    4
      0  

    Default [4.1] ( IE 7 only ) Panel/Componet Can't getHeight() in beforeLayout.

    REQUIRED INFORMATION




    Ext version tested:
    • Ext-4.1.0-gpl



    Browser versions tested against:
    • ____
    • IE8
    • FF11.0
    • IE7



    Description:
    • Panel Can't get correct value by getHeight() in beforeLayout..



    Steps to reproduce the problem:
    • Create a Panel with height, overwrite the beforeLayout method and run 'getHeight()'.



    The result that was expected:
    • getHeight() return the height as set.



    The result that occurs instead:
    • In IE 7, getHeight() return a wrong value.



    Test Case:


    Code:
        Ext.create('Ext.panel.Panel', {
    
    height: 500,
    ...
    
    beforeLayout: function(){
    
    var height = this.getHeight(); // IE8, FF, get 500, IE7 get 15
    
    return this.callParent(arguments);
    }
    }





    HELPFUL INFORMATION






    Debugging already done:
    • none



    Possible fix:
    • not provided



    Additional CSS used:
    • only default ext-all.css



    Operating System:
    • WinXP

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    Thanks for the report.
    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 - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,727
    Vote Rating
    249
      0  

    Default

    It seems like this logic should not be in beforeLayout but in afterLayout. It is the job of the layout to determine the height.

    In your example, you have a hard-coded height, so your use of getHeight should work in this limited case. If you only need it to work in this scenario, you can obviously access the height property as a workaround for now. If you need getHeight to be correct in more general cases, the logic cannot be inside of beforeLayout (if you want the correct answer).
    Don Griffin
    Director of Engineering - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  4. #4
    Sencha User
    Join Date
    Mar 2011
    Posts
    33
    Vote Rating
    4
      0  

    Default

    Quote Originally Posted by dongryphon View Post
    It seems like this logic should not be in beforeLayout but in afterLayout. It is the job of the layout to determine the height.

    In your example, you have a hard-coded height, so your use of getHeight should work in this limited case. If you only need it to work in this scenario, you can obviously access the height property as a workaround for now. If you need getHeight to be correct in more general cases, the logic cannot be inside of beforeLayout (if you want the correct answer).
    It was a logic in my custom component. I wrote a portalpanel with layout 'column', and I want all its items has the same height as the portal, so I set the items's height in the portal's beforLayout.
    Now with a hard-coded height(it wasn't), I have change the me.getHeight() into me.height to fix it.
    But a same code get different result in browsers, I think this is a need report bug, isn't it?

  5. #5
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,727
    Vote Rating
    249
      0  

    Default

    As I mentioned, the height of a component is not known in beforeLayout in most cases. Calling getHeight at this time will just return whatever the raw markup or the last layout produced. This won't be correct if you define "correct" as what the height should be based on its layout - that is, the size it will be in afterLayout.

    If you need to watch for size changes, you can override afterLayout, but it is probably better use a resize event listener since that will avoid work when layouts result in no size change.

    All that said, however, the goal you describe of a column layout where all columns have the same height is probably better achieved by an hbox layout using align stretch:

    PHP Code:
        {
            
    xtype'container',
            
    layout: {
                
    type'hbox',
                
    align'stretch'
            
    },
            
    items: [{
                
    title'Column 1'
            
    },{
                
    title'Column 2'
            
    },{
                
    title'Column 3'
            
    }]
        } 
    That will be much more efficient than trying to match the size of the columns in a column layout by watching the size of the container.
    Don Griffin
    Director of Engineering - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  6. #6
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,727
    Vote Rating
    249
      0  

    Default

    I'm going to close this ticket because any value you might get from getHeight in beforeLayout will by definition be incorrect. The height will determined by the layout of the container, so the logic dependent on that value has to be located in a method or event that occurs after the value is calculated.
    Don Griffin
    Director of Engineering - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

Posting Permissions

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