Question

我正在尝试将一个网格面板放在一个tabpanel内，以显示适当的高度。相关标签为maincontentpanel3。现在，宽度为100％，但高度似乎一直持续到面板填满，超过页面底部。

即使autoscroll设置为auto，也不会显示滚动条。如果我给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>

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

enter image description here

感谢您的帮助！

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

Answer 2

可以使用markup修复。不需要使用javascript。我已经在ext.net 2.0上测试了，我认为它也适用于旧版本

如果您愿意，只需在gridpanel和border中添加布局属性即可。下面给出的例子

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

就是这样。你喜欢它吗

TabPanel中的Gridpanel自动高度

2 个答案: