Javascript ExtJS 使网格高度为 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12158732/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ExtJS make grid to be 100% height
提问by Dfr
i found 2 similar questions here, but they are not helped me, my code is:
我在这里找到了 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
});
What i need i scrollable grid filling whole browser window, but grid here does not expand in height, so if grid has 0 rows, then it has 0 height and when i push "Add row", then added row looks obscured by scrollbars and this looks ugly.
我需要的是填充整个浏览器窗口的可滚动网格，但是这里的网格不会在高度上扩展，所以如果网格有 0 行，那么它的高度为 0，当我按下“添加行”时，添加的行看起来被滚动条遮住了，这个看起来很丑。
Also when grid contain more rows than could fit in browser window, then page scrollbar appears (not grid's scrollbar!) and this scrolls whole page so button bar scrolled away, which is also undesirable and ugly.
此外，当网格包含的行数超过浏览器窗口的容量时，会出现页面滚动条（不是网格的滚动条！），这会滚动整个页面，因此按钮栏会滚动，这也是不可取的和丑陋的。
Any ideas what is wrong with my setup.
任何想法我的设置有什么问题。
UPDATE:
更新：
Finally fixed it, intermediate panel should also contain layout: 'fit'
最后修复它，中间面板还应该包含布局：'fit'
回答by Eric
There's a couple things you can do here. First, use the fitlayout on your Viewport as it will force its child component to fill the available space. Second, grids are panels. You don't need to nest a grid in a panel, and probably shouldn't.
您可以在这里做几件事。首先，使用fitViewport 上的布局，因为它会强制其子组件填充可用空间。其次，网格是面板。您不需要在面板中嵌套网格，也可能不应该。
The autoScrollconfig doesn't work on grids. Scrolling in both directions is enabled by default, but if you need to change it use the scrollproperty. Lastly, the heightconfig only takes a number and doesn't work with strings or percentages. If you specify a height, it overrides any height given by the layout manager and you don't need it for fitlayouts.
该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]
});
回答by Yuri Gridin
Adding a viewConfig to the grid, strangely enough, solved my problem of gridpanel having no explicit height in floating window with vbox layout, containing just a form and a grid.
奇怪的是，向网格添加一个 viewConfig 解决了我的问题，即 gridpanel 在具有 vbox 布局的浮动窗口中没有明确的高度，仅包含一个表单和一个网格。
xtype: 'gridpanel',
store: 'DCLocations',
columnLines: true,
autoScroll : true,
viewConfig : {
emptyText : i18n.message.noresultstodisplay,
},