Question

Chrome’s Developer Tool reveals this html generated for my panel:

<div id="ext-comp-1027" class=" x-panel" style="width: 1600px; height: 205px; ">
    <div class="x-panel-body x-html" id="ext-gen1098" style="left: 0px; top: 0px; ">
        <div class="product">
            <div class="title">*snip*</div>
            <img src="*snip*">
            <div class="info">*snip*</div>
        </div>
    </div>
</div>

My problem is with the first div tag specfically

style="width: 1600px; height: [problem]px; "

The height is hardcoded, but occasionally and what I can tell only on the first time the panel is displayed, the height value is too small and content is hidden. If I erase the height property in Chrome, it works fine.

The thing is, the panel is re-generated each time, as it’s inside a getDetailCard() function.

How do I prevent this?

Answer 1

I ran across the same issue what I had to do was add an afterlayout listener that calls the following function:

    app.getHeight = function(){
         return Ext.Element.getViewportHeight() - Ext.getCmp('viewport').tabBar.getHeight();
    }

In my situation I have a tab bar at the bottom. If you don’t have one just set it with Ext.Element.getViewportHeight()