View Full Version : Creating a Editable Tree Grid from XML.

Shailesh Deshpande
11 Mar 2011, 4:00 AM
Hi All,

I am new to this technology and I am trying to create a tree structure from XML. I am able to create it inside the Ext.Panel. However i want to be able to create the tree inside a EditorGridPanel so that i can edit as well as I can show the tree inside a grid. I also want to show columns in the Grid. Can some one help me with this? Beow is my Code:

<script type="text/javascript" src="{!URLFOR($Resource.ExtJS3,'ext-3.3.1/adapter/ext/ext-base.js')}"/>
<script type="text/javascript" src="{!URLFOR($Resource.ExtJS3,'ext-3.3.1/ext-all.js')}"/>
<script type="text/javascript" src="{!$Resource.XMLTreeLoader}"/>

// Extend the XmlTreeLoader to set some custom TreeNode attributes specific to our application:
Ext.app.HierarchyLoader = Ext.extend(Ext.ux.tree.XmlTreeLoader, {
processAttributes : function(attr)
// Set the node text that will show in the tree since our raw data does not include a text attribute:
attr.text = attr.Name ;

// Override these values for our folder nodes because we are loading all data at once. If we were
// loading each node asynchronously (the default) we would not want to do this:
attr.loaded = true;
attr.expanded = true;
new Ext.Panel({
title: 'Account Hierarchy',
renderTo: 'tree',
layout: 'border',
width: 500,
height: 500,
items: [{
xtype: 'treepanel',
id: 'tree-panel',
region: 'center',
margins: '2 2 0 2',
autoScroll: true,
rootVisible: false,
root: new Ext.tree.AsyncTreeNode({
editable: true

// Our custom TreeLoader:
loader: new Ext.app.HierarchyLoader(
<div id="tree"></div>

XML Tree Loader:

* Ext JS Library 3.3.1
* Copyright(c) 2006-2010 Sencha Inc.
* [email protected]
* http://www.sencha.com/license

* @class Ext.ux.tree.XmlTreeLoader
* @extends Ext.tree.TreeLoader
* <p>A TreeLoader that can convert an XML document into a hierarchy of {@link Ext.tree.TreeNode}s.
* Any text value included as a text node in the XML will be added to the parent node as an attribute
* called <tt>innerText</tt>. Also, the tag name of each XML node will be added to the tree node as
* an attribute called <tt>tagName</tt>.</p>
* <p>By default, this class expects that your source XML will provide the necessary attributes on each
* node as expected by the {@link Ext.tree.TreePanel} to display and load properly. However, you can
* provide your own custom processing of node attributes by overriding the {@link #processNode} method
* and modifying the attributes as needed before they are used to create the associated TreeNode.</p>
* @constructor
* Creates a new XmlTreeloader.
* @param {Object} config A config object containing config properties.
Ext.ux.tree.XmlTreeLoader = Ext.extend(Ext.tree.TreeLoader, {
* @property XML_NODE_ELEMENT
* XML element node (value 1, read-only)
* @type Number
* @property XML_NODE_TEXT
* XML text node (value 3, read-only)
* @type Number

// private override
processResponse : function(response, node, callback)
var xmlData = response.responseXML,
root = xmlData.documentElement || xmlData;


this.runCallback(callback, scope || node, [node]);

// private
parseXml : function(node)
var nodes = [];
Ext.each(node.childNodes, function(n)
if(n.nodeType == this.XML_NODE_ELEMENT)
var treeNode = this.createNode(n);
if(n.childNodes.length > 0)
var child = this.parseXml(n);
if(typeof child == 'string')
treeNode.attributes.innerText = child;
else if(n.nodeType == this.XML_NODE_TEXT)
var text = n.nodeValue.trim();
if(text.length > 0)
return nodes = text;
}, this);

return nodes;

// private override
createNode : function(node)
var attr = {
tagName: node.tagName

Ext.each(node.attributes, function(a){
attr[a.nodeName] = a.nodeValue;


return Ext.ux.tree.XmlTreeLoader.superclass.createNode.call(this, attr);

* Template method intended to be overridden by subclasses that need to provide
* custom attribute processing prior to the creation of each TreeNode. This method
* will be passed a config object containing existing TreeNode attribute name/value
* pairs which can be modified as needed directly (no need to return the object).
processAttributes: Ext.emptyFn

//backwards compat
Ext.ux.XmlTreeLoader = Ext.ux.tree.XmlTreeLoader;

Below is my XML:

<Account Level_No="0" Name="Main Account" AccountId="001900000065vz1AAA">
<Account Level_No="1" Name="Account 1" Id="001900000065m3LAAQ">
<Account Level_No="2" Name="Account 12" Id="001900000065w5vAAA"/>
<Account Level_No="2" Name="Account 13" Id="001900000065vz2AAA"/>
<Account Level_No="2" Name="Account 11" Id="001900000065w5lAAA">
<Account Level_No="3" Name="Account 111" Id="00190000006632NAAQ"/>
<Account Level_No="1" Name="Account 5" Id="001900000065w46AAA">
<Account Level_No="2" Name="Account 53" Id="001900000065vu6AAA"/>
<Account Level_No="2" Name="Account 52" Id="001900000065w6CAAQ"/>
<Account Level_No="2" Name="Account 51" Id="001900000065wBLAAY"/>