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

问题描述

我正在处理一个页面上只有一个 GridPanel 的项目.该面板可以显示任意数量的行，并且我设置了 autoHeight 属性，这会导致 GridPanel 扩展以适应行数.我现在想要一个水平滚动条，因为在某些分辨率下并非所有列都会显示(而且我无法减少列数).

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

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

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.

推荐答案

你会发现在你的网格面板周围放置一个父容器(Ext.panel.Panel 或任何容器)是成功的.如果您在父容器上硬编码高度、宽度和布局(以适合")，子项 (Ext.grid.Panel) 将扩展以填充其父容器的整个可用空间.

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.

请参阅 Ext JS 4 Web 应用程序开发指南的第 80 和 81 页.

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

您可以对Ext.grid.Panel"使用惰性实例化表示法.意思是为您的子容器(项目)xtype 属性使用网格".

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