extjs 5 grid's scrollbar does not work in border layout panel

Question

in border layout panel , the grid's scroll-bar doesn't work correctly even though the store of grid is long enough to make the grid overflow!

if my grid is in none border layout panel , the scroll-bar is OK, but when i put the grid in the border layout panel , either there is no scroll-bar ,either there is a invalid scroll-bar!

{
        // what i want is  to make this grid to scroll ! the scroll-bar is nested in a border layout panel.
        xtype: 'grid',
        title: 'west bottom grid(I am begging for your scrollbar !)',
        columns: [{
            text: 'header',
            dataIndex: 'header'
        }],
        store: Ext.create('MyApp.OverflowStore'), //this store is long enough to make the grid overflow
        autoScroll: true
    }

full code : see sencha fiddle : https://fiddle.sencha.com/#fiddle/ffv

if anyone could help to give the grid a correct scrollbar ?

Burks

Answer 1

You should make sure you set up layouts for your components' containers as well as to make sure that containers like the grid have a flex value to have the space properly allocated. See corrected fiddle here

Monjo

thats so correct. having layouts set to correct values is very important. Not only that if you are using DOCK property for any of the panel, even that needs to be considered way it is being used. – Karyolysis