View Full Version : Create Tree Grid from xml document

13 Sep 2011, 10:19 AM
I am new to Ext JS / javascript and am trying to create an xml tree from a given xml document. I managed to create an grid from my file relatively easily and was hoping to create a tree as well.

I was originally planning on using the xmlTreeLoader but it doesn't seem to be available in Ext4. I have also had a look at the xml tree example in the download and as far as I can tell it is only a list of the directory and is dynamically vreating new xml on every click. Is there a way to create a tree grid from an xml file?

I changed the store from the example to pick up my xml file like I did in the grid and by using firebug I can see the store is picking up but have been struggling on how to progress from there to display it as a tree.Does it involve using php or something else to rearrange my xml file? which i would hope to avoid if possible.

I've included a sample of my code and want to group / show every project type in a tree and open up to show the other columns.


Title, Date, Chairperson

Title, Date, Chairperson

Title, Date, Chairperson

Title, Date Chairperson


Thanks for looking and any advice on where to look or how to go about tackling this tackle this would be greatly appreciated.





Ext.onReady(function() {

extend: 'Ext.data.Model',
fields: [
'project', 'date', 'chairperson', 'title'

var store = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
//url: 'get-nodes.php',
url: 'drr.xml',
/*extraParams: {
isXml: true
reader: {
type: 'xml',
root: 'design_review_register',
record: 'record'

// create the Tree
var tree = Ext.create('Ext.tree.Panel', {
store: store,
columns: [
{text: "Project", width: 120, dataIndex: 'project', sortable: true},
{text: "Date", width: 100, dataIndex: 'date', sortable: true},
{text: "Chairperson", width: 120, dataIndex: 'chairperson', sortable: true},
{text: "Title", width: 250, dataIndex: 'title', sortable: true},
hideHeaders: true,
rootVisible: true,
viewConfig: {
plugins: [{
ptype: 'treeviewdragdrop'
height: 350,
width: 400,
title: 'Review Register',
renderTo: 'tree-example',
collapsible: true