PDA

View Full Version : [FIXED][3.0rc1.1] Firefox/XHTML mode rendering problems



howe
13 May 2009, 12:33 AM
Hello,

There seems to be a bug rendering grids using Firefox 3.x and ExtJS 3.0 RC1.1 when in XHTML mode.

This code works:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" href="/ext/resources/css/ext-all.css">
<script src="/ext/adapter/ext/ext-base.js"></script>
<script src="/ext/ext-all-debug.js"></script>
<script src="/ext/examples/portal/sample-grid.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var grid = new SampleGrid([0, 2, 3]);
grid.render('grid');
});
</script>
<div id="grid"/>
</body>
</html>


while this one:



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ext="http://www.extjs.com">
<head>
<title></title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"/>
<script type="text/javascript" src="/ext/ext-all-debug.js"/>
<script type="text/javascript" src="/ext/examples/portal/sample-grid.js"/>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
var grid = new SampleGrid([0, 2, 3]);
grid.render('grid');
});
</script>
<div id="grid"/>
</body>
</html>


... will throw this exception:


uncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMNSHTMLElement.innerHTML]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://localhost/ext/ext-all-debug.js :: anonymous :: line 35917" data: no]


The same XHTML code will work at least on Konqueror 4.2.2 and Opera 9.64.

Can anyone please confirm ? Is there an easy fix, since this has stuck all my work because I'm using XHTML on everything ?

Thanks,
Howe

Condor
13 May 2009, 12:41 AM
I don't have any problems with showing the second example in my FF 3.0.10.

I did however need to change the script elements to open tags:

<script src="../ext/build/trunk/adapter/ext/ext-base.js"></script>
<script src="../ext/build/trunk/ext-all-debug.js"></script>

howe
13 May 2009, 12:52 AM
I don't have any problems with showing the second example in my FF 3.0.10.

I did however need to change the script elements to open tags:

<script src="../ext/build/trunk/adapter/ext/ext-base.js"></script>
<script src="../ext/build/trunk/ext-all-debug.js"></script>

That is not necessary in XHTML mode since it's all XML and both modes are valid; you can even validate the example in W3C.

So I'll suppose it's fixed in trunk; have you tested with the official release 3.0 RC1.1 which I used ? Can I have access to version you used ?

Thanks,
Howe

Condor
13 May 2009, 1:42 AM
Sorry, forgot to change the extension to .xhtml. Now it fails on both the 3.0RC1 and trunk builds.

To get it working I needed to fix 2 things:

1. Replace all occurrences of &nbsp; with & #160; in ext-all-debug.js (didn't know that, but &nbsp; is invalid XHTML!).

2. Add a htmlEncode renderer to the company column (because the company name can contain &-signs):

{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', renderer: 'htmlEncode'},
(this line is in a lot of example files!)

howe
13 May 2009, 2:01 AM
Sorry, forgot to change the extension to .xhtml. Now it fails on both the 3.0RC1 and trunk builds.

The error is in the portal example. The company text can contain & signs, so the column needs to be html encoded.

{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', renderer: 'htmlEncode'},

I'm sorry but that does not seem to be the case, or there is something more to it. I modified the code to use another grid from the examples and the same problem persists:

Works (ok2.xhtml):



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link type="text/css" rel="stylesheet" href="/ext/resources/css/ext-all.css">
<script src="/ext/adapter/ext/ext-base.js"></script>
<script src="/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="/ext/ext-all-debug.js"></script>
<script type="text/javascript" src="/ext/examples/grid/array-grid.js"></script>
<link rel="stylesheet" type="text/css" href="/ext/examples/grid/grid-examples.css"></script>
</head>
<body>
<div id="grid-example"></div>
</body>
</html>


Raises exception (bug2.xhtml):



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ext="http://www.extjs.com">
<head>
<title></title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"/>
<script type="text/javascript" src="/ext/ext-all-debug.js"/>
<script type="text/javascript" src="/ext/examples/grid/array-grid.js"></script>
<link rel="stylesheet" type="text/css" href="/ext/examples/grid/grid-examples.css" />
</head>
<body>
<div id="grid-example"/>
</body>
</html>


The only difference here is serving as html or xhtml. Does that work for you ?

Thanks,
Howe

Condor
13 May 2009, 2:04 AM
I forgot I made 2 changes. See post above.

howe
13 May 2009, 9:39 AM
Ah! Now it works. This one took me hours.

Many thanks!

Howe

howe
13 May 2009, 3:50 PM
Hello,

There is still a bug when using toolbars within grids and XHTML; the lib attempts to insert invalid xhtml code in the grid. After debugging, I found the xhtml code had an unclosed <table> tag. Here is a test code:

(bug3.xhtml)



<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ext="http://www.extjs.com">
<head>
<title></title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8"/>
<link type="text/css" rel="stylesheet" href="/ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="/ext/adapter/ext/ext-base.js"/>
<script type="text/javascript" src="/ext/ext-all-debug.js"/>
<script type="text/javascript" src="/ext/examples/grid/paging.js"/>
<link rel="stylesheet" type="text/css" href="/ext/examples/grid/grid-examples.css" />
</head>
<body>
<div id="topic-grid"></div>
</body>
</html>


I'm guessing Ext 3.0 was not very heavily tested with XHTML, but I hope it's not too hard to fix it... is there an easy fix for this ?

Thanks again,
Howe

evant
13 May 2009, 10:52 PM
Where abouts? I tried doing this and the generated HTML was ok except for the &nbsp;

howe
14 May 2009, 5:24 AM
Where abouts? I tried doing this and the generated HTML was ok except for the &nbsp;

On line 170 of official release 3.0 RC1.1 of ext-all-debug.js:



165 if (el.firstChild) {
166 range[setStart](el[rangeEl]);
167 frag = range.createContextualFragment(html);
168 where == afterbegin ? el.insertBefore(frag, el.firstChild) : el.appendChild(frag);
169 } else {
170 el.innerHTML = html;
171 }
172 return el[rangeEl];
173 }
174 }
175 throw 'Illegal insertion point -> "' + where + '"';


... the following invalid xhtml fragment is attempted to be inserted:



<table cellspacing="0" class="x-toolbar-ct">
<tbody>
<tr>
<td class="x-toolbar-left" align="left">
<table cellspacing="0">
<tbody>
<tr class="x-toolbar-left-row"></tr>
</tbody>
</table>
</td>
<td class="x-toolbar-right" align="right">
<table cellspacing="0" class="x-toolbar-right-ct">
<tbody>
<tr>
<td>
<table cellspacing="0">
<tbody>
<tr class="x-toolbar-right-row"></tr>
</tbody>
</table>
</td>
<td>
<table cellspacing="0">
<tbody>
<tr class="x-toolbar-extras-row"></tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</td>
</tr>
</tbody>
</table>


As you can see, the tag "<table cellspacing="0" class="x-toolbar-right-ct">" is not closed, making it an invalid xhtml fragment, what makes Firefox throw the following exception:



ncaught exception: [Exception... "Component returned failure code: 0x80004003 (NS_ERROR_INVALID_POINTER) [nsIDOMNSHTMLElement.innerHTML]" nsresult: "0x80004003 (NS_ERROR_INVALID_POINTER)" location: "JS frame :: http://localhost/ext/ext-all-debug.js :: anonymous :: line 170" data: no]


Again - I'm using the official 3.0 RC1.1 build release, not some trunk version.

I hope this helps locating the problem.

Thanks again,
Howe

evant
14 May 2009, 5:37 AM
Ah.

Try this:



Ext.override(Ext.layout.ToolbarLayout, {
onLayout : function(ct, target){
if(!this.leftTr){
target.addClass('x-toolbar-layout-ct');
target.insertHtml('beforeEnd',
'<table cellspacing="0" class="x-toolbar-ct"><tbody><tr><td class="x-toolbar-left" align="left"><table cellspacing="0"><tbody><tr class="x-toolbar-left-row"></tr></tbody></table></td><td class="x-toolbar-right" align="right"><table cellspacing="0" class="x-toolbar-right-ct"><tbody><tr><td><table cellspacing="0"><tbody><tr class="x-toolbar-right-row"></tr></tbody></table></td><td><table cellspacing="0"><tbody><tr class="x-toolbar-extras-row"></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>');
this.leftTr = target.child('tr.x-toolbar-left-row', true);
this.rightTr = target.child('tr.x-toolbar-right-row', true);
this.extrasTr = target.child('tr.x-toolbar-extras-row', true);
}
var side = this.leftTr;
var pos = 0;

var items = ct.items.items;
for(var i = 0, len = items.length, c; i < len; i++, pos++) {
c = items[i];
if(c.isFill){
side = this.rightTr;
pos = -1;
}else if(!c.rendered){
c.render(this.insertCell(c, side, pos));
}else{
if(!c.xtbHidden && !this.isValidParent(c, side.childNodes[pos])){
var td = this.insertCell(c, side, pos);
td.appendChild(c.getDomPositionEl().dom);
c.container = Ext.get(td);
}
}
}
//strip extra empty cells
this.cleanup(this.leftTr);
this.cleanup(this.rightTr);
this.cleanup(this.extrasTr);
this.fitToSize(target);
}
});

evant
14 May 2009, 5:41 AM
Also replaced nbsp with 160.

howe
14 May 2009, 6:58 AM
Ah! Now it works again. I've applied it directly to ext-all-debug.js. I'll be reporting more XHTML problems in this thread if I find any.

Thank you!
Howe

evant
14 May 2009, 6:59 AM
Ok great. I'll mark this as closed for now, post back if you find anything.