TabPanel中的网格面板自动高度 [英] Gridpanel auto Height inside TabPanel

问题描述

我正在尝试在一个标题栏内找到一个适当高度显示的网格板。该选项卡是 maincontentpanel3 。现在，宽度为100％，但是高度似乎一直延续到面板已经填满，超过页面底部。

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.

滚动条不出现，即使自动滚屏设置为自动。如果我给出一个高度的 GridPanel1 ，除了（显然）高度之外，一切都可以正常工作。

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.

以下是删除的代码：

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

感谢您的帮助！

推荐答案

唯一的方法我可以弄清楚如何这样做会是使用javascript。这是我想出的解决方案：

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);
};

这篇关于TabPanel中的网格面板自动高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！