ExtJS使网格高度为100%

Question

我在这里发现了两个类似的问题,但是他们没有帮助我,我的代码是:

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'

Answer 1

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

该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]
});