在ExtJS GridPanel中的垂直滚动条

Question

我正在处理一个项目，页面上有一个单独的GridPanel。此面板可以显示任意数量的行，并且我已经设置了autoHeight属性，这会导致GridPanel扩展以适应行数。现在我想要一个水平滚动条，因为在某些分辨率下，不是所有列都被显示出来（而且我不能减少列数）。

如果我设置autoHeight，则没有水平滚动条；如果我不设置它并设置固定高度，则有一个水平滚动条，但是GridPanel显然无法适应行数....

有什么方法可以解决这个问题吗？我似乎找不到可以实现所需结果的属性。

- JDT

Answer 1

你会发现，在你的网格面板周围放置一个父容器（Ext.panel.Panel或任何容器）会取得成功。如果在父容器上硬编码高度、宽度和布局（设置为“fit”），那么子项（Ext.grid.Panel）将展开以填满其父容器可用的所有空间。

请参阅《Ext JS 4 Web Application Development Cookbook》的第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'
});

- MacGyver

Answer 2

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

该面板将会自动滚动。

- justinzane

Answer 3

这似乎是与您的布局设置相关的问题，而不是对象属性。

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

- SW4

---

就像我说的，页面上只有网格面板而没有布局容器。我对所有这些ExtJS的东西都很新，所以我可能错过了什么，我需要在网格面板周围使用容器才能正常工作吗？ - JDT

Answer 4

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

- Erich Kitzmueller

Answer 5

添加

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

有时候会导致显示两个滚动条的错误。在我的情况下，为了避免这种情况，我添加了一个监听器。然后就可以正常工作了。

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

- Max Tatarchenko