Javascript ExtJS将网格设置为100%高度

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

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

布局，因为它将强制其子组件填充可用空间。其次，网格是面板。您不需要在配电盘中嵌套栅格，而且可能不应该这样做

autoScroll

config在网格上不起作用。默认情况下启用双向滚动，但如果需要更改，请使用

scroll

属性。最后，

height

config只接受一个数字，不能处理字符串或百分比。如果指定高度，则它将覆盖布局管理器给定的任何高度，而

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解决了我的问题，即gridpanel在带有vbox布局的浮动窗口中没有明确的高度，只包含一个窗体和一个网格

xtype:'gridpanel'，
门店：'DCLocations'，
专栏：没错，
autoScroll：是的，
视图配置：{
emptyText:i18n.message.noresultstodisplay，
}，

我因更改布局而过期，但没有成功当我动态添加行时，我想我应该调用类似于doLayout的东西，但在哪个组件上？

Ext.ComponentQuery.query

返回一个组件数组。如果您是通过ID访问单个组件，那么最好使用

Ext.getCmp

直接获取它。如果您发布了一个屏幕截图，则更容易找出问题所在。还有，您是如何添加行的？刚刚修复了它，忘记将

fit

layout选项添加到中间面板，我的坏。是的，

layout:fit

是解决方案。