PDA

View Full Version : gridPanel in Viewport cannot get tbar and bbar to 100% width



roelofk
20 Feb 2012, 11:57 AM
Here is my code:


Ext.onReady(function(){
var reader = .....

var store = .....

var pagingBar = new Ext.PagingToolbar({
enableOverflow: true,
pageSize: 20,
store: store,
displayInfo: true
});

var toolbar = new Ext.Toolbar({
enableOverflow: true,
items: [.....]
});

var grid = new Ext.grid.GridPanel({
title: 'Grid test',
store: store,
columns:[.....],
sm: new Ext.grid.RowSelectionModel({singleSelect : true}),
viewConfig: {forceFit: true},
border: false,
tbar: [toolBar],
bbar: [pagingBar],
enableDragDrop: true
});

store.load({params:{start:0, limit:20}});

var viewport = new Ext.Viewport({
layout: 'border',
border: false,
items: [
{
region: 'center',
layout: 'fit',
items: [grid]
},
{
region : 'north',
height : 50,
border : false,
contentEl : 'headerCntr'
},
{
region : 'west',
width : 270,
border : false,
contentEl : 'leftCntr'
}
]
});

var ddrowTarget = new Ext.dd.DropTarget(grid.getEl(), {
.....
}
});

And this is what's happening, for example the bottom bar doesn't have 100% width.
31957

gridPanel has 100% width, columns are correct to... Tried to set autoWidth and width:100% for the toolbars...
Already used
Ext.getBody().getWidth() to set the toolbars width, but on a window resize it doesn't recalculate the correct width. Also when using a Viewport it should automatically set the correct with? That's what i thought. What am i doing wrong?

mitchellsimoens
21 Feb 2012, 5:05 AM
Your center region uses fit layout so you shouldn't specify any sizing on the grid as the layout will make it take up 100% height and width of that center region. Do you want them to take up 100% of the width of the screen or just the grid?

roelofk
21 Feb 2012, 5:07 AM
No, only the grid.

As you can see in my code, there is no width specification in the grid and in the toolbars.

mitchellsimoens
21 Feb 2012, 5:10 AM
So by the picture I cannot confirm if it is 100% of the grid. It looks like it is and that the west region is what is stopping it on the left side which is correct.

roelofk
21 Feb 2012, 5:16 AM
Well i already tried to exclude the north and west part of the Viewport. But the problem remains...
The displayMsg should be on the right site of the toolbar, but it is right next to the prev en next buttons. As you can see in the picture.

This is how it should be, but now i'm using Ext.getBody().getWidth() to set the correct width of the toolbar

31983