View Full Version : bbar in GridPanel overlaps column

11 Sep 2009, 1:25 PM
I'm having trouble figuring out what could be causing this problem.

It appears as if the columns are rendering as if the bbar isn't there. Notice how the scrollbar is half covered by the bbar in the bottom.

Attached a picture and here's the code. Any ideas?

var grid_location = new xg.GridPanel({
enableHdMenu: false,
enableDragDrop: true,
height: 250,
id: 'locations_grid',
title: 'Locations',
width: 220,
bbar: [{
cls: 'x-btn-text-icon',
id: 'loc_help',
icon: 'images/30.png',
text: 'Need help?'
columns: [
{id:'locations', header:"Locations", width: 60, sortable: true, dataIndex:'locations'},
{header:'',sortable: true, dataIndex:'Country', hidden: true}
store: new Ext.data.GroupingStore({
data: xg.loc_data,
reader: loc_reader,
sortInfo:{field:'locations', direction: "ASC"}
view: new Ext.grid.GroupingView({
hideGroupedColumn: true,
showGroupName: false,
startCollapsed: true

11 Sep 2009, 2:29 PM
Hmmm... I just loaded the app in 3.0 RC2 and it rendered correctly.

I can't believe that this an EXT bug since this example is close to what I have: http://www.extjs.com/deploy/dev/examples/dd/field-to-grid-dd.html

Well, I just found out why. var grid_location is it's own container in a FormPanel. I had the 'layout' set to 'form' instead of 'fit'. Changing it to 'fit' restored order.

Hopefully my pains help someone out there :)

21 Jun 2010, 5:49 PM
I'm having the same problem. When you say you changed layout, do you mean layout in the grid, layout in your containing FormPanel or layout in something else? I tried changing layout of my GridPanel and layout of the containing Viewport, of which the GridPanel is the only item, to 'fit' and neither of those fixed the overlapping problem.