ExtJS make grid to be 100% height

Question

i found 2 similar questions here, but they are not helped me, my code is:

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.

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'

Answer 1

There's a couple things you can do here. First, use the fit layout 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.

The autoScroll config doesn't work on grids. Scrolling in both directions is enabled by default, but if you need to change it use the scroll property. Lastly, the height config 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 fit layouts.

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