Migration from ExtJS 3.0 to 4.0

Question

Previously in ext 3.0 we had Tree Panel built from XML response. For that we had custom class extending 'Ext.tree.TreeLoader' This TreeLoader was useful to build tree structure (parent/child nodes).

While migrating to 4.0 found that TreeLoader class is missing. Is there any replacement to this class or any other way to build tree structure?

I want to generate tree structure for following xml : Actually, I want to build tree structure from this XML :

<?xml version='1.0' ?>
<Root>
<Folder>
<CreateDate>Apr 29, 2011</CreateDate>
<CreatedBy>1000</CreatedBy>
<Files/>
<FolderName>Testing</FolderName>
<FolderNamePath/>
<FolderPath/>
<Folders>
<Folder>
<CreateDate>Apr 6, 2011</CreateDate>
<CreatedBy>1000</CreatedBy>
<Files/>
<FolderName>JayM</FolderName>
<Folders>
<Folder>
<CreateDate>Apr 6, 2011</CreateDate>
<CreatedBy>1000</CreatedBy>
<Files/>
<FolderName>JaM</FolderName>
<Id>2000</Id>
<ModDate>Dec 30, 2011</ModDate>
<ParentFolderId>1948</ParentFolderId>
</Folder>
</Folders>
<Id>1948</Id>
<ModBy>1000</ModBy>
<ModDate>Dec 30, 2011</ModDate>
<ParentFolderId>1</ParentFolderId>
</Folder>

<Folder>
<CreateDate>Dec 2, 2011</CreateDate>
<CreatedBy>1000</CreatedBy>
<Files/>
<FolderName>demo folder</FolderName>
<Folders/>
<Id>2427</Id>
<ModBy/>
<ModDate/>
<ParentFolderId>1</ParentFolderId>
</Folder>

</Folders>
<Id>1</Id>
<ModBy/>
<ModDate/>
<ParentFolderId/>
</Folder>
</Root>

Any help is appreciated.

Answer 1

You'll want to look into the TreeStore which, along with any standard Proxy (plus XmlReader in your case), replaced TreeLoader in Ext 4. TreeStore contains standard Model instances (i.e., records) that have been decorated by the NodeInterface class to provide tree-specific behavior. The API is now very similar to the standard store / record API, unlike TreeLoader in 3.x which was completely separate.

Have a look at the tree examples, specifically the XML tree example in your case, for usage.

Answer 2

In ExtJS 4, you have tree panel instead of tree loader to build tree structure(parent/child nodes).

Example Code:

var treepanel = Ext.create('Ext.tree.Panel',{ 
id : 'tree', 
width : 300, 
height : 300, 
store : testStore, 
rootVisible : false 
});