TabPanel 内的 Gridpanel 自动高度答案

【问题标题】：Gridpanel auto Height inside TabPanelTabPanel 内的 Gridpanel 自动高度
【发布时间】：2014-12-04 15:52:58
【问题描述】：

我正在尝试让选项卡面板内的网格面板以适当的高度显示。有问题的标签是maincontentpanel3。现在，宽度是 100%，但高度似乎一直到面板被填满，远远超过页面底部。

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

这是精简后的代码：

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

这是右下角发生的事情的图像（没有滚动条，明显溢出）

感谢您的帮助！

【问题讨论】：

如果你愿意，我可以用一个测试用例详细调查这个问题。

标签： extjs ext.net

【解决方案1】：

我能弄清楚如何做到这一点的唯一方法是使用 javascript。这是我想出的解决方案：

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

【讨论】：

【解决方案2】：

可以使用标记修复。无需使用 javascript。我已经在 ext.net 2.0 上进行了测试，我认为它也可以在旧版本上运行

如果您愿意，只需在网格面板和边框中添加布局属性。下面给出的例子

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

就是这样。希望你喜欢它

【讨论】：