ExtJS 使网格为 100% 高度答案

【问题标题】：ExtJS make grid to be 100% heightExtJS 使网格为 100% 高度
【发布时间】：2012-08-28 11:56:07
【问题描述】：

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

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 高度，当我按下“添加行”时，然后添加的行看起来被滚动条遮住了，这看起来很难看。

此外，当网格包含的行数超出浏览器窗口的容量时，会出现页面滚动条（不是网格的滚动条！），这会滚动整个页面，因此按钮栏会滚动，这也是不受欢迎且丑陋的。

任何想法我的设置有什么问题。

更新：

终于修好了，中间面板也应该包含layout: 'fit'

【问题讨论】：

我尝试更改布局，但没有成功
当我动态添加行时，我想我应该调用类似 doLayout 的东西，但是在哪个组件上？
Ext.ComponentQuery.query 返回一个组件数组。如果是通过 ID 访问单个组件，不妨直接使用Ext.getCmp 获取。

标签： javascript extjs4

【解决方案1】：

您可以在这里做几件事。首先，在视口上使用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]
});

【讨论】：

如果您发布屏幕截图，会更容易找出问题所在。另外，你是如何添加你的行的？
刚修好，忘了在中间面板添加fit布局选项，我的错。是的，layout: fit 是解决方案。

【解决方案2】：

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

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

【讨论】：