PDA

View Full Version : Render xml data in tree panel



glafrance
19 Sep 2012, 10:12 AM
This is how my tree panel displays currently:

38797

I need to render the following from my data in the tree panel:

- root <company> name and id
- <child> elements name and id
- nested sub-<child> elements name and id (to any number of depths)

Currently the root <company> name and id is missing, and the nested <child> element name and id is at the same level as the parent.

How to do this?

Code:

<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<company>
<child>
<child>
<id>234</id>
<name>Inner Child</name>
</child>
<id>789</id>
<name>Outer Child</name>
</child>
<id>456</id>
<name>Root Company</name>
</company>

Code:

Ext.require('Ext.tree.Panel')

Ext.require([
'Ext.data.*',
'Ext.grid.*'
]);

Ext.onReady(function(){
Ext.define('Child',{
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping: ' > name'},
{name: 'id', mapping: ' > id'}
]
});

var store = Ext.create('Ext.data.TreeStore', {
model: 'Child',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'datafile.xml',
reader: {
type: 'xml',
root: 'company',
record: 'child'
}
}
});

var grid = Ext.create('Ext.tree.Panel', {
store: store,
columns: [
{text: "Company Name", flex: 1, dataIndex: 'name'},
{text: "ID", width: 180, dataIndex: 'id'}
],
renderTo:'example-grid',
rootVisible: false,
useArrows: true,
width: 540,
height: 200
});
});

vietits
19 Sep 2012, 4:57 PM
Try this:


Ext.onReady(function(){
Ext.define('Child',{
extend: 'Ext.data.Model',
fields: [
{name: 'name'},
{name: 'id'}
]
});


var store = Ext.create('Ext.data.TreeStore', {
model: 'Child',
autoLoad: true,
root: {
expanded: true
},
proxy: {
type: 'ajax',
url: 'data.xml',
reader: {
type: 'xml',
root: 'nodes',
record: '> node'
}
}
});


var grid = Ext.create('Ext.tree.Panel', {
store: store,
columns: [
{xtype: 'treecolumn', text: "Company Name", flex: 1, dataIndex: 'name'},
{text: "ID", width: 180, dataIndex: 'id'}
],
renderTo:Ext.getBody(),
rootVisible: false,
useArrows: true,
width: 540,
height: 200
});
});

data.xml


<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<nodes>
<node>
<id>456</id>
<name>Root Company</name>
<leaf>false</leaf>
<nodes>
<node>
<id>789</id>
<name>Outer Child</name>
<leaf>false</leaf>
<nodes>
<node>
<id>234</id>
<name>Inner Child</name>
<leaf>true</leaf>
</node>
</nodes>
</node>
</nodes>
</node>
</nodes>

glafrance
20 Sep 2012, 9:28 AM
I appreciate your reply, but changing the data is not an option.

Any ideas but keeping the data the same?