View Full Version : verical scrollbar in GridPanel won't show inside TabPanel

19 Jun 2010, 7:28 PM
I have a grid that is taller than the height I have set for it, however the GridPanel won't add a vertical scrollbar. The GridPanel resides in a Container which fill 1 tab of a TabPanel. If I move the GridPanel outside of the TabPanel, the scrollbar shows up.

Here is the code:

var statsGrid = new Ext.grid.GridPanel({
store: statsStore,
columns: [
{id:'name',header: "Name", renderer: renderNames, width: 160, sortable: true, dataIndex: 'n'},
{header: "G", width: 32, sortable: true, dataIndex: 'g', renderer:renderG},
{header: "PO", width: 40, sortable: true, dataIndex: 'pO', renderer:renderPO},
{header: "Day", width: 40, sortable: true, dataIndex: 'day', renderer:renderDay},
{header: "Cnt", width: 40, sortable: true, dataIndex: 'toSt', renderer:renderCount},
{header: "Use", width: 40, sortable: true, dataIndex: 'toSt', renderer:renderUse}
stripeRows: true,
enableColumnHide: false,
//autoScroll: true,
//region: 'center',
title: 'My Stats'

new Ext.Container({
id: 'statsContainer-div',

initComponent : function() {
this.el = Ext.get('statsContainer-div');
//this.el.setHeight = 420;
//this.el.setWidth = 50;
this.el.setSize(500, 420);// = 100;//Ext.emptyFn;
this.el.dom.scroll = 'no';
this.el.setStyle('overflow', 'hidden');
this.allowDomMove = false;
//this.autoWidth = true;
//this.autoHeight = true;
Ext.EventManager.onWindowResize(this.fireResize, this);
this.renderTo = this.el;

fireResize : function(w, h){
this.fireEvent('resize', this, 100, 100, 100, 100);//w, h, w, h);

//layout: 'column',//'whatever you want',
items: [ statsGrid ] //your, items, here ]

19 Jun 2010, 8:31 PM
I found a work around using grid.syncSize() in another post:


19 Jun 2010, 9:54 PM
Totally bizarre!

Why wrap the grid in a Container????

Just use the GridPanel as a child of the TabPanel.

That's it. Simple as that. It will work.