PDA

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}"/>

<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:



/*!
* 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>