Question

我正在开发一个项目，我在页面上有一个GridPanel。面板可以显示任意数量的行，并且我设置了autoHeight属性，这会导致GridPanel扩展以适合行数。我现在想要一个水平滚动条，因为在某些分辨率上不会显示所有列（并且我不能减少列数）。

如果我设置autoHeight我没有水平滚动条，如果我没有设置并设置固定高度我有一个水平滚动条但GridPanel显然不符合行数....

我能做些什么来解决这个问题吗？我似乎无法找到能够达到我需要的结果的属性。

Answer 1

您会发现在网格面板周围放置一个父容器（Ext.panel.Panel或任何容器）才能成功。如果您在父容器上对高度，宽度和布局（“适合”）进行硬编码，则子项（Ext.grid.Panel）将展开以填充其父容器中可用的整个空间。

参见 Ext JS 4 Web应用程序开发指南的第80和81页。

您可以对'Ext.grid.Panel'使用延迟实例化表示法。含义使用'grid'作为子容器（item） xtype 属性。

Ext.create('Ext.panel.Panel', {
    title: 'parent container',
    width: 800,
    height: 600,
    layout: 'fit',
    items: {
        xtype: 'grid',
        title: 'child container',

        ... define your grid here 

    },
    renderTo: 'grand parent container'
});

Answer 2

我的想法是在面板上设置autoScroll: true。包含网格的面板。

Answer 3

这似乎与布局设置有关，而不是对象属性。

尝试将父容器的布局属性设置为“适合” - 您是否还可以提供代码摘录？

Answer 4

正如Ergo所说，这更可能是一个布局问题 - GridPanel可能比包含它的面板更高，显然不够高，不需要滚动条但不完全可见。将GridPanel放入具有适当布局的容器中，即边框布局，适合布局或卡布局。让布局经理正确通常是ExtJS-Fu中最难的部分之一。

Answer 5

添加

viewConfig = {
        scroll:false,
        style:{overflow: 'auto',overflowX: 'hidden'}
    }

有时会导致显示2个滚动条的错误。为了防止这种情况，我添加了一个监听器。然后工作正常。

this.on('scrollershow',function(scroller,orientation,eOpts){
        if (orientation=='vertical'){
            scroller.hide();                
        }
},this);

ExtJS GridPanel中的垂直滚动条

5 个答案: