PDA

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



PranKe01
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){
if(!row.data.read){
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){
comp.refresh.hide();
grid.getBottomToolbar().doLoad(0);
}
}
})
});

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

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

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

Animal
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

PranKe01
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...

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