PDA

View Full Version : Load xml string into tree



kashim
23 Dec 2011, 7:06 AM
Hi
Can someone tell me how do I load this xml string into a tree. Can't find any examples and my attempt doesn't work
thanks



var myXml = "<Root>" +
"<UserMenu>" +
"<node label='Asset'>" +
"<node label='Asset Total'/>" +
"</node>" +
"<node label='Audit'>" +
"<node label='Stock Audit'/>" +
"<node label='Yard Audit'/>" +
"</node>" +
"<node label='Contacts'>" +
"<node label='Customer'/>" +
"<node label='Supplier'/>" +
"<node label='SupGrp'/>" +
"</node>" +
"</UserMenu>" +
"</Root>";


var storeXml = Ext.create('Ext.data.TreeStore', {
autoLoad: true,
data: myXml,
proxy: {
type: 'memory',
reader: {
type: 'xml',
record: 'node',
root: 'Root'
}
}
});


// create the Tree
var tree2 = Ext.create('Ext.tree.Panel', {
title: 'Whatever',
width: 200,
height: 150,
store: storeXml,
rootVisible: false,
hideHeaders: true,
layout: 'border',
renderTo: Ext.getBody()
});

mitchellsimoens
23 Dec 2011, 10:09 AM
If you have the structure in JavaScript, why create it in XML? Why not just build the root config and it's children?

kashim
23 Dec 2011, 1:09 PM
Thanks for your suggestion. I may have to do that. However, i'm looking at the XML Tree Example

http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/tree/xml-tree.html

a (http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/tree/xml-tree.html)nd wondered what the xml populating that tree looks like.

kashim
23 Dec 2011, 2:47 PM
btw. the xml string is what i'm retrieving from my server.

mitchellsimoens
24 Dec 2011, 7:20 AM
If you look at Firefox or chrome's dev tools... in the network tab you can look at the response.

mankz
26 Dec 2011, 5:13 AM
Won't work due to this old bug

http://www.sencha.com/forum/showthread.php?136404-INFOREQ-4.0.2-RC3-Returning-nested-XML-data-for-a-Tree-doesn-t-work...

kashim
28 Dec 2011, 4:26 AM
If anyone's interested, I ended up loading my xmlstring into a XML DOM object, and then looping through it to create the TreeStore data.



var userMenuNode = xmlDoc.documentElement.childNodes[0];
var menuItems = [];
var menuItemParent;
var menuItemChild;
var menuItemChildArray = [];
var j = 0;
var k = 0;
var m = 0;


for (j = 0; j < userMenuNode.childNodes.length; j++) {
menuItemParent = userMenuNode.childNodes[j];


menuItemChildArray = [];


for (k = 0; k < menuItemParent.childNodes.length; k++) {
menuItemChild = menuItemParent.childNodes[k];


for (m = 0; m < menuItemChild.attributes.length; m++) {


if (menuItemChild.attributes[m].name == "label") {
menuItemChildArray.push({ text: menuItemChild.attributes[m].nodeValue, leaf: true });
}
}
}
menuItems.push({ text: menuItemParent.attributes[0].nodeValue, leaf: false, children: menuItemChildArray });
}


var store = Ext.create('Ext.data.TreeStore', {
root: {
text: 'root',
expanded: true,
children: menuItems
}
});


var tree = Ext.create('Ext.tree.Panel', {
title: 'Whatever',
store: store,
rootVisible: true,
renderTo: Ext.getBody()
});