PDA

View Full Version : Problem with tree and XHTML



TAG
26 Aug 2009, 7:46 AM
Hello,
I recently added Post for a function to add and remove node fron the tree.
The post is: http://extjs.com/forum/showthread.php?t=75479.
Thanks a Condor, the function run correctly.
Yesterday I pass my application from HTML to XHTML.
All application function correctly but the part of create the tree panel, and the add and remove node of tree don't function.
In HTML version the code function correctly in XHTML no.
The tree can be used in XHTML?

below the relevant code


....
var root = new Ext.tree.TreeNode({
text: 'Project',
id: 'rootProject',
leaf: false,
expandable: true,
expanded: true
})
var addNodo=function(modello,titolo){
root.expand();
var app=root.findChild('id','idNodo'+modello);
if(app==null){
root.appendChild([
new Ext.tree.TreeNode({
text: modello,
id : 'idNodo'+modello,
expanded : true,
leaf: false
})
]);
app=root.findChild('id','idNodo'+modello);
};
app.appendChild([
new Ext.tree.TreeNode({
text: titolo,
id :modello+'idNodoLista'+titolo,
leaf: true,
listeners: {
'click': function(e,t){var id=e.id;attivaPannelloCentrale(id);},
'contextmenu': function(e,t){funzioneAttivaMenuContestualeAlbero(e,t);}
}
})])}
....
var tree = new Ext.tree.TreePanel({
id: 'contenitoreAlbero',
animate: true,
collapseFirst: false,
useArrows: true,
enableDrag: false,
root: root,
rootVisible: true
})


it is possible that the error is some ";" missing?

TAG
26 Aug 2009, 11:34 PM
Can you help me?

steffenk
26 Aug 2009, 11:41 PM
use tools to find errors

HTML - tidy HTML validator (FF plugin)
JS: http://www.jslint.com/ (also eclipse plugin available)

TAG
26 Aug 2009, 11:46 PM
the problem is with I haven't error with firebug.......this a very strange!!!!
I aspect error in Firebug....but firebug don't write error, and my application don't run correctly........mah......:-/

Condor
27 Aug 2009, 12:35 AM
So you don't have any errors? The only problem is that the added node isn't visible?

Could it be that the tree isn't high enough to show the node (you didn't specify autoHeight:true or autoScroll:true)?

TAG
27 Aug 2009, 12:47 AM
Now I test the creation of the panel with only the root node. And this don't function correctly. The code is very simple:



var root2=new Ext.tree.TreeNode({
text: 'pippo',
id: 'idPippo',
leaf: false,
expandable: true,
expanded: true
})

var tree2=new Ext.tree.TreePanel({
id: 'contenitoreAlbero2',
root: root2,
rootVisible: true
})

var alberoProgetto2=new Ext.Panel({
id:'alberoProgetto2',
title:'prova bis caratteri',
layout: 'fit',
closable: true,
autoScroll: true,
//frame: true,
iconCls:'progettoAlbero',
border: true,
//bodyStyle: 'padding: 0 5px 0;',
items: [tree2]
});


I insert "alberoprogetto2" in a TABPANEL. In HTML I haven't error for this code and function correctly, in XHTML don't run and don't function correctly.

I do not know what to think.

steffenk
27 Aug 2009, 12:54 AM
did you examined HTML if tree is rendered in any way?

TAG
27 Aug 2009, 1:06 AM
infact, examined HTML I found this problem. If I resolve this problem, Firebug will indicate the errors corrected fot tree function add and remove.

TAG
27 Aug 2009, 1:06 AM
but problem to create a simple treePanel persist!!!!

Condor
27 Aug 2009, 1:13 AM
I don't understand your last comment... Are you getting an error in Firebug now?

TAG
27 Aug 2009, 1:40 AM
No.
Now, I extract the code of the tree and PanelTree. And I insert this code in simple file XHTML. The code is:



<!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="it" lang="it" dir="ltr">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext/ext-all-debug.js"></script>

<script type="text/javascript">
<![CDATA[
Ext.onReady(function() {
var root2=new Ext.tree.TreeNode({
text: 'pippo',
leaf: false,
expandable: true,
expanded: true
})

var tree2=new Ext.tree.TreePanel({
id: 'contenitoreAlbero2',
root: root2,
rootVisible: true
})

var alberoProgetto2=new Ext.Panel({
id:'alberoProgetto2',
title:'prova bis caratteri',
layout: 'fit',
closable: true,
autoScroll: true,
iconCls:'progettoAlbero',
border: true,
items: [tree2]
});

var accordion = new Ext.Panel({
region:'west',
split:true,
width: 210,
layout:'accordion',
items: [alberoProgetto2]
});

var viewport = new Ext.Viewport({
layout:'border',
items:[
accordion, {
region:'center'
}]
});
});
]]>
</script>
</head>
<body>
</body>
</html>

The code is minimal. But not view, in application, a root of tree in panel when run this.

If you delete of the code the tag "DOCTYPE " and "meta" and the option of tag "html" and rename file with exstension "HTML" this file, the tree is view!!!!

TAG
27 Aug 2009, 1:42 AM
tree Unsupported in XHTML?

TAG
27 Aug 2009, 1:44 AM
No this impossibile. Ext supported in XHTML. The API Doc not say anything about

steffenk
27 Aug 2009, 2:06 AM
hm - when i run your script i get error in FB immediate!!!

The CDATA tag is wrong, here is the correct one:


<script type="text/javascript">
/*<![CDATA[*/
...
/*]]>*/
</script>

TAG
27 Aug 2009, 2:59 AM
Sorry steffenk, but if I insert "/* */" in my code, the result don't change.......

besides on XHTML tutorial is write for insert the Javascript code in XHTML code is obligatory insert


<script type="text/javascript">
<![CDATA[

]]>
</script>

TAG
27 Aug 2009, 3:05 AM
Ok, change in HTML, but I Know this....in HTML don't should <![CDATA[ and ]]>...but in XHTML is necessary.....

steffenk
27 Aug 2009, 3:09 AM
i don't know how you test, but i can tell you that my solution works as expected and is validated correct.

TAG
27 Aug 2009, 3:14 AM
but you are used the precedent code update with /*<![CDATA[*/ and /*]]>*/ and the file extension ".xhtml"?

TAG
27 Aug 2009, 3:14 AM
I test this in Mozilla, but now test this in Chrome ......

TAG
27 Aug 2009, 3:17 AM
doh...in Mozzilla don't run in Chrome yes

steffenk
27 Aug 2009, 3:17 AM
file extension ".xhtml"? What's that? Does your server handle this?
It's not needed for xhtml! The doctype is the important part.

TAG
27 Aug 2009, 3:28 AM
do you have to notify the Ext Team for this error of compatibility between Mozilla Chrome?

TAG
27 Aug 2009, 3:33 AM
......I am not sure .....

I create this code through JSP page....and in Mozzilla this code don't function, while in Chrome yes( I can't test in IE because I use Linux).

Condor
27 Aug 2009, 3:54 AM
file extension ".xhtml"? What's that? Does your server handle this?
It's not needed for xhtml! The doctype is the important part.

The extension .xhtml makes Firefox use the XHTML parser instead of the HTML parser, which is extremely strict (e.g. &nbsp; isn't allowed - should be &#160;)

steffenk
27 Aug 2009, 3:55 AM
ok, that's new to me.

Condor
27 Aug 2009, 4:06 AM
There is indeed a bug in Ext regarding XHTML rules.

Add this before your Ext.onReady:

Ext.SplitBar.createProxy = function(dir){
var proxy = new Ext.Element(document.createElement("div"));
proxy.unselectable();
var cls = 'x-splitbar-proxy';
proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
(document.documentElement || document.body).appendChild(proxy.dom);
return proxy.dom;
};

TAG
27 Aug 2009, 4:48 AM
ehm....Condor I copy this code, before onReady function...but the result don't change.....

but I update your code in some way?

Condor
27 Aug 2009, 5:10 AM
Which Ext version are you using? This patch was for Ext 3.0+ SVN (and it's probably the same in Ext 3.0.0).

TAG
27 Aug 2009, 5:22 AM
Exactly....I use Ext 3.0.....but if I use Ext + SVN version I will not have compatibility issues?

Where can find the Ext+SVN version?in download area?

TAG
27 Aug 2009, 5:24 AM
there isn't patch for Ext 3.0?

Condor
27 Aug 2009, 5:35 AM
With the patch I got your example to work on Firefox.

ps. I did need to register the ext namespace in the html element:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" xmlns:ext="http://www.extjs.com">

TAG
27 Aug 2009, 6:21 AM
1000 thanks a Condor and steffenk.

Ok, with work around and tag. :D