vertical scrollbar in ExtJS GridPanel

10
votes

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.

5
extjsgrid

5 Answers

9
votes

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'
});
6
votes

My thought would be to set autoScroll: true on the panel.Panel that contained the grid.

1
votes

This seems like an issue with your layout settings as opposed to the object properties.

Try setting the layout property of the parent container to 'fit'- can you also provide a code excerpt?

1
votes

As Ergo said, this is more likely a layout problem - the GridPanel is probably higher than the panel containing it, high enough not to need a scrollbar but not fully visible, obviously. Put the GridPanel into a container with a proper layout, i.e. border layout, fit layout or card layout. Getting layout managers right is generally one of the hardest part of ExtJS-Fu.

0
votes

adding 

viewConfig = {
        scroll:false,
        style:{overflow: 'auto',overflowX: 'hidden'}
    }

sometimes causes a bug with displaying 2 scrollbars. To prevent it in my case I added a listener. And then works fine.

this.on('scrollershow',function(scroller,orientation,eOpts){
        if (orientation=='vertical'){
            scroller.hide();                
        }
},this);