ExtJS使网格高度达到100%

ExtJS make grid to be 100% height

本文关键字：100% 高度 网格 ExtJS      更新时间：2023-09-26

我在这里发现了两个类似的问题，但它们对我没有帮助，我的代码是：

var grid = Ext.create('Ext.grid.Panel', {
    autoScroll: true,
    // if set this to any numeric value, then everything works just good, but 
    // i was hoping that `ExtJS` already can detect browser window height, am i wrong ?
    height: '100%', 
    title: 'Products',
    store: store,
    itemId: 'product_grid',
    columns: [.. columns skipped ...],
    plugins: [ rowEditing ],
    dockedItems: [ ..addRow button here..]
});
var panel = Ext.create('Ext.panel.Panel', {
    autoScroll: true,
    items: [
    {
        xtype: 'productGrid'
    }
    ]
});
Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    items: panel
});

我需要的是可以滚动的网格填充整个浏览器窗口，但这里的网格不会扩展在高度上，所以如果网格有0行，那么它的高度为0，当我按下"添加行"时添加的行看起来被滚动条遮住了，这看起来很难看。

此外，当网格包含的行数超过浏览器窗口所能容纳的行数时，就会出现页面滚动条（而不是网格的滚动条！），这会滚动整个页面，因此按钮条会滚动掉，这也是不可取的，也是丑陋的。

知道我的设置有什么问题吗。

更新：

最后修复了它，中间面板还应该包含布局：'fit'

您可以在这里做几件事。首先，在Viewport上使用fit布局，因为它将强制其子组件填充可用空间。其次，网格是面板。您不需要在面板中嵌套网格，也可能不应该。

autoScroll配置不适用于网格。默认情况下启用双向滚动，但如果需要更改，请使用scroll属性。最后，height配置只接受一个数字，不适用于字符串或百分比。如果指定高度，它将覆盖布局管理器给定的任何高度，并且fit布局不需要它。

var grid = Ext.create('Ext.grid.Panel', {
    title:       'Products',
    store:       store,
    itemId:      'product_grid',
    columns:     [/* ... */],
    plugins:     [rowEditing],
    dockedItems: [/* ... */]
});
var viewport = Ext.create('Ext.container.Viewport', {
    layout: 'fit',
    items:  [grid]
});

在网格中添加一个viewConfig，奇怪的是，它解决了我的问题，即网格面板在带有vbox布局的浮动窗口中没有明确的高度，只包含一个窗体和一个网格。

xtype: 'gridpanel',
store: 'DCLocations',
columnLines: true,
autoScroll : true,
viewConfig : {
        emptyText : i18n.message.noresultstodisplay,
},

相关文章：