vertical scrollbar in ExtJS GridPanel

Question

I'm working on a project where I have a single GridPanel on a page. The panel can display any number of rows and I have the autoHeight property set, which causes the GridPanel to expand to fit the number of rows. I now want a horizontal scrollbar because on some resolutions not all columns get displayed (and I cannot reduce the number of columns).

If I set the autoHeight I have no horizontal scrollbar, if I do not set it and set a fixed height I have a horizontal scrollbar but the GridPanel obviously does not fit the number of rows....

Is there anything I can do to fix this? I can't seem to find a property that would achieve the result I need.

Answer 1

You will find that putting a parent container (Ext.panel.Panel or any container really) around your grid panel to be successful. If you hard code the height, width and layout (to 'fit') on the parent container, the child item (Ext.grid.Panel) will expand to fill the entire space available from it's parent container.

See pages 80 and 81 of Ext JS 4 Web Application Development Cookbook.

You can use the lazy instantiation notation for 'Ext.grid.Panel'. Meaning use 'grid' for your child container (item) xtype property.

Ext.create('Ext.panel.Panel', {
    title: 'parent container',
    width: 800,
    height: 600,
    layout: 'fit',
    items: {
        xtype: 'grid',
        title: 'child container',

        ... define your grid here 

    },
    renderTo: 'grand parent container'
});