Gridpanel auto Height inside TabPanel

Question

I am trying to get a gridpanel inside a tabpanel to display with proper height. The tab in question is maincontentpanel3. Right now, the width does 100%, but the height seems to go until the panel is filled, way past the bottom of the page.

Scroll bars do not appear, even if autoscroll is set to auto. If I give GridPanel1 a height, everything works properly except for (obviously) the height.

Here is the stripped down code:

<ext:Viewport runat="server" Layout="FitLayout">
    <Items>
        <ext:Panel runat="server" ID="maincontentpanelwrapper" >
            <Items>
                <ext:TabPanel ID="maincontentpanel" runat="server" Layout="FitLayout">
                    <Items>
                        <ext:Panel runat="server" ID="maincontentpanel1" >
                        </ext:Panel>
                        <ext:Panel runat="server" ID="maincontentpanel2" >
                        </ext:Panel>
                        <ext:Panel runat="server" ID="maincontentpanel3" >
                            <Items>
                                <ext:GridPanel ID="GridPanel1"  AutoScroll="true" runat="server" >
                                    <Store>
                                        [REMOVED]
                                    </Store>
                                    <ColumnModel>
                                        <Columns>
                                            [REMOVED]
                                        </Columns>
                                    </ColumnModel>
                                </ext:GridPanel>
                            </Items>
                        </ext:Panel>
                    </Items>
                </ext:TabPanel>
            </Items>
        </ext:Panel>
    </Items>
</ext:Viewport>

Here is an image of what is happening in the bottom right corner (no scroll bars, clearly overflowing)

Thank you for your help!

Answer 1

It can be fix using markup.no need to use javascript. i have tested on ext.net 2.0 and i think it can work on older version too

just add layout property in gridpanel and border if you like. example given below

<ext:GridPanel ID="GridPanel1"  AutoScroll="true" runat="server" Layout="FitLayout" Border="true" >

thats it .hope you like it

Answer 2

The only way I could figure out how to do it would be to use javascript. This is the solution I came up with:

initialload2();
function initialload2() {
    if (Ext.getCmp("GridPanel1")) {
        if (window.innerHeight != undefined) {
            var height = window.innerHeight;
        }
        else {
            //for ie
            var B = document.body,
            D = document.documentElement;
            var height = Math.min(D.clientHeight, B.clientHeight);
        }
        Ext.getCmp("GridPanel1").setHeight(height - 62);
    } else {
        setTimeout(initialload2, 100);
    }
}

var resizeTimer;
window.onresize = function () {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(initialload2, 100);
};