PDA

View Full Version : Problem getting a tree view binding to an XML file



parky128
4 Mar 2010, 9:04 AM
Hello,

I am having difficulties getting a tree panel to bind to an xml file and render in one of my containers.

My ExtJS code is below, (pinched the xml loading routines from a post by Animal=> http://www.extjs.com/forum/showthread.php?t=3987) followed by the xml doc I am trying to use.



Ext.onReady(function() {
// write your application here

new Ext.Viewport({
layout: 'border',
id: 'viewport',
defaults: {
height: 100,
width: 100
},
items: [
{
xtype: 'container',
autoEl: {},
layout: 'fit',
id: 'centerRegion',
region: 'center'
//items: [iframePanel]
},
{
title: 'North Panel',
region: 'north',
margins: '0 0 5 0'
},
{
region: 'west',
id: 'west-panel',
title: 'Menu',
split: true,
width: 230,
margins: '0 0 0 5'
}
]
});

var xmltree = createXmlTree('west-panel','Menu.xml');

/**
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.
*/
function createXmlTree(el, url, callback) {
var tree = new Ext.tree.TreePanel(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;
}


});




<Menu>
<Users>
<AddUser title="Add User" url="http://..." />
<AmendUser title="Amend User" url="http://..." />
</Users>
</Menu>


When I run the page, the viewport displays the containers in the regions as expected, but I get an error from ext-all-debug saying 'this.root is undefined'. Do I need to specify the root? I thought the line in the CreateXmlTree function which reads as below would do this for me?



tree.setRootNode(treeNodeFromXml(doc.documentElement || doc));


Can anyone assist?

Thanks,
Rob