View Full Version : [SOLVED] forceFit does not work with grid rendered to div container

12 Feb 2010, 9:58 AM
Hi guys,

I got a Panel in which three grids are inserted using div-containers. When trying to use forceFit for these grids, it seems, that it don't work when it's rendered. But when I resize one column, the forceFit gets "activated".
The Panels look like this:

new Ext.Panel({
forceLayout: true,
defaults: {
border: false
items: [{
html: '<div id="grid1">Loading grid1...</div><br/>'
html: '<br/><div id="grid2">Loading grid2...</div><br/>'
html: '<br/><div id="grid3">Loading grid3...</div><br/>'

The grids are created like this:

var view = new Ext.grid.GridView({
forceFit: true,
scrollOffset: 1,
getRowClass : function(row, index){
return 'yellow-row';
return '';

var grid = new Ext.grid.GridPanel({
el: 'grid1',
id: 'grid1',
ds: ds,
cm: colModel,
sm: selModel,
autoHeight: true,
columnLines: true,
view: view,
bbar: new Ext.PagingToolbar({
pageSize: 5,
store: ds,
displayInfo: true,
displayMsg: 'Items {0} - {1} of{2}',
emptyMsg: "Empty",
autoWidth: true,
listeners: {
afterrender: function(comp){

grid.on('rowdblclick', gridDblClickRow, this);
grid.on('rowcontextmenu', gridRightClickRow, this);
Ext.get('grid1').dom.innerHTML = '';

Does anyone experienced the same problem? I'm trying to fix this problem for some hours :-/

13 Feb 2010, 4:44 AM
No ideas out there?

13 Feb 2010, 11:44 PM
Force the fit into what size? Where's your width config?

You should not be rendering or thinkingabout divs, but using size-managing layouts

14 Feb 2010, 2:47 AM
Hi Animal,

thanks for your answer. But how can I add three grids to one tab? Of course, the width depeds on the window size...

14 Feb 2010, 12:05 PM
By using a layout???8-|