ExtJS GridPanel中的垂直滚动条 [英] vertical scrollbar in ExtJS GridPanel

问题描述

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

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

是否有我可以做什么来解决这个问题？我似乎找不到能够达到我需要的结果的属性。

解决方案

你会发现放置一个父容器（Ext.panel.Panel或任何容器真的），您的网格面板将成功。如果您在父容器上硬编码高度，宽度和布局（fit），则子项（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'，
项目：{
 xtype：'grid'，
 title：'child container'，
 
 ...在这里定义你的网格
 
}，
 renderTo：'grand parent container'
}）; 
  

I'm working on a project where I have a single GridPanel on a page. The panel can display any number of rows and I have the autoHeight property set, which causes the GridPanel to expand to fit the number of rows. I now want a horizontal scrollbar because on some resolutions not all columns get displayed (and I cannot reduce the number of columns).

If I set the autoHeight I have no horizontal scrollbar, if I do not set it and set a fixed height I have a horizontal scrollbar but the GridPanel obviously does not fit the number of rows....

Is there anything I can do to fix this? I can't seem to find a property that would achieve the result I need.

解决方案

You will find that putting a parent container (Ext.panel.Panel or any container really) around your grid panel to be successful. If you hard code the height, width and layout (to 'fit') on the parent container, the child item (Ext.grid.Panel) will expand to fill the entire space available from it's parent container.

See pages 80 and 81 of Ext JS 4 Web Application Development Cookbook.

You can use the lazy instantiation notation for 'Ext.grid.Panel'. Meaning use 'grid' for your child container (item) xtype property.

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

这篇关于ExtJS GridPanel中的垂直滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！