Complete Tree not showing while binding with XML Tree. [Archive]

AmitOlsys

20 Jul 2008, 9:29 PM

Dear All,
I am Trying to Bind a Tree with XML Data. But the Tree is not completed and the name of subelements are also not displayed. I don't know why. so please traceout the reason and help me to bind the complete tree along with the name of subelements displayed.

Here is the whole code I am using to bind the Xml Data to an Ext TreePanel...........
.........................
TreeEx,html File
........................
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>XML TreePanel</title>
<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.js"></script>


<link rel="stylesheet" type="text/css" href="examples.css" />
</head>
<body>
<script type="text/javascript" src="examples.js"></script>
<div id="tree-div" style="overflow:auto; height:300px;width:250px;border:1px solid #c3daf9;"></div>
<script type="text/javascript" src="ExTree.js"></script>
</body>
</html>
.......................
ExTree.js File
.......................
/*
* Ext JS Library 2.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license
*/
/**
Create an Ext.tree.TreePanel in the passed Element using
an XML document from the passed URL, calling the passed
callback on completion.
@param el {String/Element/HtmlElement} The tree's container.
@param url {String} The URL from which to read the XML
@param callback {function:tree.render} The function to call on completion,
defaults to rendering the tree.
*/

Ext.onReady(function(){

var tree1=new createXmlTree('tree-div', 'plants.xml');

function createXmlTree(el, url, callback) {
var tree = new Ext.tree.TreePanel({
el:el
});
var p = new Ext.data.HttpProxy({url:url});
p.on("loadexception", function(o, response, e) {
if (e) throw e;
});
p.load(null, {
read: function(response) {
var doc = response.responseXML;
tree.setRootNode(treeNodeFromXml(doc.documentElement || doc));
}
}, callback || tree.render, tree);
return tree;
}

/**
Create a TreeNode from an XML node
*/
function treeNodeFromXml(XmlEl) {
// Text is nodeValue to text node, otherwise it's the tag name
var t = ((XmlEl.nodeType == 3) ? XmlEl.nodeValue : XmlEl.tagName);

// No text, no node.
if (t.replace(/\s/g,'').length == 0) {
return null;
}
var result = new Ext.tree.TreeNode({
text : t
});

// For Elements, process attributes and children
if (XmlEl.nodeType == 1) {
Ext.each(XmlEl.attributes, function(a) {
var c = new Ext.tree.TreeNode({
text: a.nodeName
});
c.appendChild(new Ext.tree.TreeNode({
text: a.nodeValue
}));
result.appendChild(c);
});
Ext.each(XmlEl.childNodes, function(el) {
// Only process Elements and TextNodes
if ((el.nodeType == 1) || (el.nodeType == 3)) {
var c = treeNodeFromXml(el);
if (c) {
result.appendChild(c);
}
}
});
}
return result;
}
});
............................
plants.xml File
............................
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<plant>
<common>Bloodroot</common>

<botanical>Sanguinaria canadensis</botanical>

<zone>4</zone>

<light>Mostly Shady</light>

<price>2.44</price>

<availability>03/15/2006</availability>

<indoor>true</indoor>

</plant>
<plant>
<common>Columbine</common>

<botanical>Aquilegia canadensis</botanical>

<zone>3</zone>

<light>Mostly Shady</light>

<price>9.37</price>

<availability>03/06/2006</availability>

<indoor>true</indoor>

</plant>
</catalog>
...............................
please trace the code and let me know the reason because the output which I can able to see on browser is something Like This only
...............................
-<FolderIcon Image>Catalog
-<FolderIcon Image>(this is displayed without text of subelement)
-<DocumentElement Image>(this is also displayed without text of subelement)
and also rest of the element is not displayed which is supposed to be display.
...............................

I Feel that I can completed the query if in case any doubt please let me know.

Thanks and Regards
AmitOlsys

evant

20 Jul 2008, 9:35 PM

Please modify your post to put relevant html and code tags, it's impossible to read.

AmitOlsys

20 Jul 2008, 9:54 PM

Dear Evant,
I don't know how to modify the post I just colored the codes in various color for you to get through it.

I am Trying to Bind a Tree with XML Data. But the Tree is not completed and the name of subelements are also not displayed. I don't know why. so please traceout the reason and help me to bind the complete tree along with the name of subelements displayed.

Here is the whole code I am using to bind the Xml Data to an Ext TreePanel...........
.........................
TreeEx,html File
........................
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>XML TreePanel</title>
<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.js"></script>


<link rel="stylesheet" type="text/css" href="examples.css" />
</head>

<body>
<script type="text/javascript" src="examples.js"></script>
<div id="tree-div"></div>

<script type="text/javascript" src="ExTree.js"></script>
</body>
</html>
.......................
ExTree.js File
.......................
/*
* Ext JS Library 2.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* [email protected]
*
* http://extjs.com/license (http://extjs.com/forum/../license)
*/

Ext.onReady(function(){

var tree1=new createXmlTree('tree-div', 'plants.xml');

function createXmlTree(el, url, callback) {
var tree = new Ext.tree.TreePanel({el:el});
var p = new Ext.data.HttpProxy({url:url});

p.on("loadexception", function(o, response, e) {
if (e) throw e;
});

p.load(null, {
read: function(response) {
var doc = response.responseXML;
tree.setRootNode(treeNodeFromXml(doc.documentEleme nt || doc));
}
}, callback || tree.render, tree);
return tree;
}

/**
Create a TreeNode from an XML node
*/

function treeNodeFromXml(XmlEl) {
// Text is nodeValue to text node, otherwise it's the tag name
var t = ((XmlEl.nodeType == 3) ? XmlEl.nodeValue : XmlEl.tagName);

// No text, no node.
if (t.replace(/\s/g,'').length == 0) {
return null;
}
var result = new Ext.tree.TreeNode({
text : t
});

// For Elements, process attributes and children
if (XmlEl.nodeType == 1) {
Ext.each(XmlEl.attributes, function(a) {
var c = new Ext.tree.TreeNode({
text: a.nodeName
});
c.appendChild(new Ext.tree.TreeNode({
text: a.nodeValue
}));

result.appendChild(c);
});

Ext.each(XmlEl.childNodes, function(el) {
// Only process Elements and TextNodes
if ((el.nodeType == 1) || (el.nodeType == 3)) {
var c = treeNodeFromXml(el);
if (c) {
result.appendChild(c);
}
}
});
}
return result;
}
});
............................
plants.xml File
............................
<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<plant>

<common>Bloodroot</common>

<botanical>Sanguinaria canadensis</botanical>

<zone>4</zone>

<light>Mostly Shady</light>

<price>2.44</price>

<availability>03/15/2006</availability>

<indoor>true</indoor>
</plant>
<plant>

<common>Columbine</common>

<botanical>Aquilegia canadensis</botanical>

<zone>3</zone>

<light>Mostly Shady</light>

<price>9.37</price>

<availability>03/06/2006</availability>

<indoor>true</indoor>
</plant>
</catalog>
...............................
please trace the code and let me know the reason because the output which I can able to see on browser is something Like This only
...............................
OutPut on Browser
-<FolderIcon Image>Catalog
-<FolderIcon Image>(this is displayed without text of subelement)
-<DocumentElement Image>(this is also displayed without text of subelement)

While the supposed Output is
-<FolderIcon Image>Catalog
-<FolderIcon Image>plant
-<DocumentElement Image>Bloodroot
-<FolderIcon Image>plant
-<DocumentElement Image>Columbine

and also rest of the element is not displayed which is supposed to be display.
...............................

I Feel that I can completed the query if in case any doubt please let me know.
Dear Evant if it is readable now then please do the tracing of js code and let me know why is it displayed like this only.
Thanks and Regards
AmitOlsys

Please modify your post to put relevant html and code tags, it's impossible to read.

AmitOlsys

20 Jul 2008, 10:23 PM

Dear Evant,
I think that in the Js File the lines of code as

p.load(null, {
read: function(response) {
var doc = response.responseXML;
tree.setRootNode(treeNodeFromXml(doc.documentElement || doc));
}
}, callback || tree.render, tree);

is the responsible for display only the name of root element because we set only the root node in the code concerned. Because the XmlRespons is complete as the whole XML Document. But we can not set the other nodes and subelement. please pay attention to that lines of code also.

eagerly waiting for your reply
Amitolsys

Please modify your post to put relevant html and code tags, it's impossible to read.

evant

21 Jul 2008, 2:07 AM

Your thread is still on the front page. Please don't post the same thing twice.

Also, please post your code in the appropriate tags, see: http://extjs.com/forum/misc.php?do=bbcode