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:

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}"/>
	
	<script>
		// 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)
		    {
		        if(attr.Name)
		        { 
		            // 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;
		        }
		    }
		});
	</script>
	<script>
		Ext.onReady(function(){
		    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({
			        									allowChildren:true,
			        									allowDrag:true,
			        									allowDrop:true,
			        									editable: true
			        								}),
		
		            // Our custom TreeLoader:
			        loader: new Ext.app.HierarchyLoader(
			        {
			            dataUrl:'/apex/AccountHierarchyXML?AccId={!AccId}'
			        }),
        		}]
		    });
		});
	</script> 
	<div id="tree"></div>
XML Tree Loader:
Code:
/*!
				 * Ext JS Library 3.3.1
				 * Copyright(c) 2006-2010 Sencha Inc.
				 * [email protected]
				 * http://www.sencha.com/license
				 */
				Ext.ns('Ext.ux.tree');
				
				/**
				 * @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
				     */
				    XML_NODE_ELEMENT : 1,
				    /**
				     * @property  XML_NODE_TEXT
				     * XML text node (value 3, read-only)
				     * @type Number
				     */
				    XML_NODE_TEXT : 3,
				
				    // private override
				    processResponse : function(response, node, callback)
				    {
				        var xmlData = response.responseXML,
				            root = xmlData.documentElement || xmlData;
				
				        try{
				            node.beginUpdate();
				            node.appendChild(this.parseXml(root));
				            node.endUpdate();
				
				            this.runCallback(callback, scope || node, [node]);
				        }catch(e){
				            this.handleFailure(response);
				        }
				    },
				
				    // 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
				                    {
				                        treeNode.appendChild(child);
				                    }
				                }
				                nodes.push(treeNode);
				            }
				            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;
				        });
				
				        this.processAttributes(attr);
				
				        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:

<Accounts>
<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>
</Account>
<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"/>
</Account>
</Account>
</Accounts>