Extjs 5 scrollbar does not work on border layout panel

Question

in the border layout panel, the grid scroll grid does not work correctly even if the grid storage is long enough to make the grid overflow!

if my grid does not have a single border layout panel, the scroll bar is fine, but when I put the grid in the border layout panel, either there is no scroll bar, or there is an 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 can help tune the grid to the correct scrollbar?

Answer 1

You need to make sure that you are setting up layouts for the containers of your components, and also make sure that containers like a grid have a flex value in order to properly distribute the space. See the fixed fiddle here