PDA

View Full Version : [INFOREQ] Firefox - GridPanel missing right border



staskorz
29 Nov 2008, 12:36 PM
I've searched the forums, but could not find any occurrence of this issue:

10742

I am trying to run the code (http://extjs.com/downloads/tutorial/introduction-ext/IntroToExt2.zip (http://extjs.com/forum/../downloads/tutorial/introduction-ext/IntroToExt2.zip)) from the ExtJS tutorial (http://extjs.com/learn/Tutorial:Introduction_to_Ext_2.0 (http://extjs.com/forum/../learn/Tutorial:Introduction_to_Ext_2.0)). On the "grid" section, the tutorial instructs to add the following code, which creates a grid:



Ext.onReady(function() {
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];

var myReader = new Ext.data.ArrayReader({}, [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);

var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
{header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
renderTo: 'content',
title: 'My First Grid',
width: 500,
autoHeight: true,
frame: true
});

grid.getSelectionModel().selectFirstRow();
});The grid looks fine both on IE7 and Opera 9.62, but for some reason the grid's right border is missing on Firefox 3.0.4.

tryanDLS
29 Nov 2008, 3:08 PM
I just tried all the grid examples on the main site with FF 3.0.4 and I don't see any border issues. Have you tried these? Are you sure you haven't changed the CSS? It's also possible that the tutorial zips are using CSS files that have not been updated to deal w/FF 3.0.4 - they may be the original 2.0 files.

staskorz
1 Dec 2008, 12:29 PM
... for the grid to work properly in FF3, the css (ext-all.css) MUST be loaded BEFORE the user JS code. For IE7 or Opera 9.62, it doesn't matter whether the css is loaded before or after the user JS code, but it does for FF.

Works for IE7, Opera 9.62 and Firefox 3.0.4:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<!-- --- -->

<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>

<script type="text/javascript" src="ExtStart.js"></script>

<title>Introduction to Ext 2.0: Starter Page</title>
</head>
<body>
<div id="content">
</div>
</body>
</html>

Works for IE7 and Opera 9.62, but not with Firefox 3.0.4:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>

<script type="text/javascript" src="ExtStart.js"></script>

<!-- CSS - will not work for FF3 -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<!-- --------------------------- -->

<title>Introduction to Ext 2.0: Starter Page</title>
</head>
<body>
<div id="content">
</div>
</body>
</html>

Is it a bug or by design?

PS: tryanDLS, thanks a lot for you help - I wouldn't figure it out without you pointing me to those examples.

tryanDLS
1 Dec 2008, 1:10 PM
If CSS ordering is causing the problem, it's likely that there's a conflict between Ext and your own CSS. Hard to say exactly what without seeing your CSS. My initial thought would be that something in the base reset part of the ext.css (look at reset.css) is conflicting with something in your css. Usually this is caused by setting styles at a very generic level, rather than specific to a single item.

You could bring up 2 versions of the page with the different include orders and compare which css is being applied in Firebug to see if you can pick out one that causing the problem.

staskorz
1 Dec 2008, 1:31 PM
I've used only the original css coming with ExtJS. The code I've posted in my previous post is the exact code I was using.

wilksm
5 Dec 2008, 7:07 AM
I've used only the original css coming with ExtJS. The code I've posted in my previous post is the exact code I was using.

I can confirm that I've been able to reproduce this as staskorz says. FF3.0.4, no other style sheets involved. If the CSS includes come after the JS ones, right borders are missing. Put CSS first and they appear again.

wilksm
5 Dec 2008, 7:12 AM
FYI, I was using Tabs and Trees instead of Grids, but they both exhibited this bug.

staskorz
5 Dec 2008, 9:50 AM
Or maybe it's by design? Or just an undocumented requirement? Or maybe it's an FF bug, not ExtJS bug?

jack.slocum
5 Dec 2008, 10:28 AM
Or maybe it's by design? Or just an undocumented requirement? Or maybe it's an FF bug, not ExtJS bug?

It's a weird FF3 bug. At least the workaround is very easy.

staskorz
6 Dec 2008, 10:33 PM
URL: https://bugzilla.mozilla.org/show_bug.cgi?id=468303

dfhe060
29 Mar 2009, 10:30 PM
if you use ext(v.2.2.1), try to find the code
"w = parseInt(v, 10);" in ext-all-debug.js, it will be at line 3676, replace it with
"w = parseInt(parseFloat(v)+0.5, 10);" , you can see the right border.

Animal
30 Mar 2009, 12:00 AM
References to ext-all-debug are not very useful.

In which actual class file are you recommending this change be made?

Post the whole suggested function which your change lines highilghted in red.

dfhe060
30 Mar 2009, 5:28 AM
here is ths code:


(function() {

Ext.apply(Ext.Element.prototype, {
addStyles : function(sides, styles) {
var val = 0, v, w;
for (var i = 0, len = sides.length; i < len; i++) {
v = this.getStyle(styles[sides.charAt(i)]);
if (v) {
w = parseInt(parseFloat(v) + 0.5, 10);
if (w) {
val += (w >= 0 ? w : -1 * w);
}
}
}
return val;
}
});


})()

bt_bruno
29 May 2009, 9:43 AM
The workaround (put css first) didn't work for me :(

I took the tabs examples on my local server (http://localhost/ext/examples/tabs/tabs.html)



<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tabs Example</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="tabs-example.css" />
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="tabs-example.js"></script>

</head>


The right border is still missing...

cristianomaddog
19 Jun 2009, 6:05 AM
The workaround (put css first) didn't work for me :(

I took the tabs examples on my local server (http://localhost/ext/examples/tabs/tabs.html)



<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Tabs Example</title>

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="tabs-example.css" />
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="tabs-example.js"></script>

</head>
The right border is still missing...

Hello, i have the same problem. I loaded the css files first but it still doesn't work.

Have you found a solution?

Thanks!

------------------------------------------------------------------------------------

Hello again,

Solved the problem by removing :


viewConfig: {
forceFit: true
} from the GridPanel configuration.

maxelrod
23 Apr 2010, 12:49 PM
Confirming that the missing right border problem is still reproducible with Ext 3.2 and Firefox 3.6.3

mystix
25 Apr 2010, 10:30 AM
@maxelrod
i've moved this thread to the 3.x Bug forum, but could you update your post with a proper test case as mentioned in http://www.extjs.com/forum/showthread.php?71015-Posting-to-the-Bug-Forum? thanks.


[ bug reportedly affects both 3.x and 2.x branches ]