PDA

View Full Version : [CLOSED][3.x/2.x] GridPanel w/button & forceFit render bug on Safari/Mac


wsmith323
14 Apr 2008, 9:38 AM
I'm using ExtJS 2.0.2 on Safari 3.1 and Firefox 2.0.0.11 on Mac OSX 10.5.2

It seems that the following combination of conditions triggers a GridPanel rendering bug on Safari. Specifically, the last column gets squashed to almost nothing.

- GridPanel's viewConfig includes forceFit=true.
- GridPanel has at least 4 columns.
- GridPanel has at least 1 button.
- GridPanel is a region within a border layout.

The following code will reproduce the bug on Safari.

I have attached a screenshot of the bug on Safari, along with a screenshot of Firefox rendering it acceptably.

GridPanel_forceFit_borderLayout_button_bug.xhtml


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
GridPanel forceFit borderLayout button bug
</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link rel="stylesheet" type="text/css" href="js/extjs/2.0.2/resources/css/ext-all.css" />
<script type="text/javascript" src="js/extjs/2.0.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/extjs/2.0.2/ext-all-debug.js"></script>
<script type="text/javascript" src="GridPanel_forceFit_borderLayout_button_bug.js"></script>
</head>
<body>
</body>
</html>


GridPanel_forceFit_borderLayout_button_bug.js


Ext.onReady(function() {
var grid = new Ext.grid.GridPanel({
store: new Ext.data.SimpleStore({
fields: [{
name: 'field1',
}, {
name: 'field2',
}, {
name: 'field3',
}, {
name: 'field4',
}],
data: [
['data11', 'data12', 'data13', 'data14'],
['data11', 'data12', 'data13', 'data14'],
],
}),

columns: [
{
header: 'Header 1',
dataIndex: 'field1',
}, {
header: 'Header 2',
dataIndex: 'field2',
}, {
header: 'Header 3',
dataIndex: 'field3',
}, {
header: 'Header 4',
dataIndex: 'field4',
}],

buttons: [
{text: 'Button'},
],

region: 'west',
split: true,
width: 400,

viewConfig: {
forceFit: true,
},

});

var vp = new Ext.Viewport({
layout: 'border',
items: [grid, {
region: 'center',
html: 'Center',
}],
});
});
jack.slocum
14 Apr 2008, 11:14 AM
You have a lot of extra commas... no errors in the console?
wsmith323
14 Apr 2008, 12:56 PM
Sorry about that. Python conventions bled over. I'm a JS newbie. The extra commas didn't cause errors. Below is a version with them stripped out (now passes JSLint).

The Safari rendering issue still remains.

GridPanel_forceFit_borderLayout_button_bug.js


Ext.onReady(function() {
var grid = new Ext.grid.GridPanel({
store: new Ext.data.SimpleStore({
fields: [{
name: 'field1'
}, {
name: 'field2'
}, {
name: 'field3'
}, {
name: 'field4'
}],
data: [
['data11', 'data12', 'data13', 'data14'],
['data11', 'data12', 'data13', 'data14']
]
}),

columns: [
{
header: 'Header 1',
dataIndex: 'field1'
}, {
header: 'Header 2',
dataIndex: 'field2'
}, {
header: 'Header 3',
dataIndex: 'field3'
}, {
header: 'Header 4',
dataIndex: 'field4'
}],

buttons: [
{text: 'Button'}
],

region: 'west',
split: true,
width: 400,

viewConfig: {
forceFit: true
}

});

var vp = new Ext.Viewport({
layout: 'border',
items: [grid, {
region: 'center',
html: 'Center'
}]
});

});
wsmith323
14 Apr 2008, 1:58 PM
A little more experimenting reveals that FF renders the test grid similarly to Safari, but only after the grid has been narrowed nearly as far as it will go and then widened (by using the splitter between the regions).
wsmith323
30 Apr 2008, 9:42 AM
Any progress on this? It is still an issue on 2.1.
nrevelle
13 Jun 2008, 1:54 PM
Any workaround for this? I'm seeing this on FF 2.0.0.14 on WinXP
wsmith323
16 Jun 2008, 7:14 AM
I ended up using autoExpandColumn on the GridPanel instead of forceFit on the GridView, which forced me to designate which column would grow and shrink. Not as nice as forceFit, but seems to work better cross-browser, at least for me.
gginzburg
5 Aug 2008, 10:40 PM
I've been struggling with this problem as well and it is still present in 2.2

I have a grid panel with 6 columns, forceFit=TRUE, as the sole element in the south region of a border layout.

When I eliminate the tbar from my grid panel, the grid panel renders correctly.

When I add a tbar with 1 button, the problem occurs. As I add buttons to the tbar, the problem gets less and less. When I have 4 buttons in the tbar, the grid once again renders correctly.

as a workaround, i do the following:



tbar : [
btn_edit_dsmart,
'->',{disabled:true},{disabled:true},{disabled:true}
]
mdissel
11 Sep 2008, 12:29 PM
I'm have the same in FF 3.01, when i remove the TBar the forcefit works correct..Any other workaround?
Condor
12 Sep 2008, 12:27 AM
The GridView is rendered in the GridPanel render() method, but this is before the grid gets it's final size in afterRender().
In the testcase the GridView is initially rendered into a very small GridPanel (70px), which causes the right column to get truncated.
In the GridPanel afterRender() the GridView layout() is called where the columns are fit to the correct width, but the right column was already truncated, so it doesn't grow correctly.

I propose to move the GridView render() call from GridPanel render() to afterRender(), e.g.


Ext.override(Ext.grid.GridPanel, {
onRender : function(ct, position){
Ext.grid.GridPanel.superclass.onRender.apply(this, arguments);
var c = this.body;
this.el.addClass('x-grid-panel');
var view = this.getView();
view.init(this);
c.on("mousedown", this.onMouseDown, this);
c.on("click", this.onClick, this);
c.on("dblclick", this.onDblClick, this);
c.on("contextmenu", this.onContextMenu, this);
c.on("keydown", this.onKeyDown, this);
this.relayEvents(c, ["mousedown","mouseup","mouseover","mouseout","keypress"]);
this.getSelectionModel().init(this);
//this.view.render();
},
afterRender : function() {
Ext.grid.GridPanel.superclass.afterRender.apply(this, arguments);
this.view.render();
this.view.layout();
if(this.deferRowRender){
this.view.afterRender.defer(10, this.view);
}else{
this.view.afterRender();
}
this.viewReady = true;
}
});
Because render() and layout() are now called subsequently the render() method can be simplified:

Ext.override(Ext.grid.GridView, {
render : function(){
if(this.autoFill){
this.fitColumns(true, true);
//}else if(this.forceFit){
// this.fitColumns(true, false);
//}else if(this.grid.autoExpandColumn){
// this.autoExpand(true);
}
this.renderUI();
}
});
mdissel
12 Sep 2008, 1:19 AM
Nice!! I'm going to try this and hopefully this code will be added to svn soon..
djiao
3 Oct 2008, 9:04 AM
Another workaround may be add the following


grid.on('afterRender', function() {
this.view.render();
});
anonymity
29 Jul 2009, 6:49 AM
This bug still exists in Ext 3.0, the solution was a big help. Thanks a lot!
mystix
29 Jul 2009, 6:53 AM
This bug still exists in Ext 3.0, the solution was a big help. Thanks a lot!

[ moved to 3.x Bugs from 2.x Bugs ]

do you happen to have a test case on hand?
also, other details as per this thread would help
evant
30 Jul 2009, 11:17 PM
Can anyone actually get this to happen with the test case? I've tried on FF2/3/3.5, Safari3/4 on Windows and everything seems normal.
mjlecomte
16 Aug 2009, 12:25 PM
I'm going to update the status to CLOSED in absence of new information / test case. Please post again to have the issue reopened.