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

[wzl002]

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:

    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

[mitchellsimoens]

Thanks for the report.

[dongryphon]

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

[wzl002]

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?

[dongryphon]

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:

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

[dongryphon]

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.