Populating tree nodes with server-side data

This recipe explains how you can use dynamic content to populate the nodes of a TreePanel. The TreePanel in this recipe belongs to a fictitious report development tool and it will display various properties of a reporting project, as shown in the following screenshot:

How to do it...

1. 1. Create styles for the tree-node icons:

   report
   {
   background:url(img/pie-chart.png) 0 no-repeat !important;
   }
   dataset
   {
   background:url(img/table.png) 0 no-repeat !important;
   }
   datasource
   {
   background:url(img/data.png) 0 no-repeat !important;
   }
   

2. 2. Define the TreePanel:

   Ext.onReady(function() {
   var tree = new Ext.tree.TreePanel({
   el: 'tree-reorder',
   frame:true,
   width: 250,
   height:400,
   useArrows: true,
   autoScroll: true,
   animate: true,
   enableDD: true,
   containerScroll: true,
   border: false,
   dataUrl: 'tree-ajax-load.php',
   

3. 3. In the TreePanel, create the root node and finish the tree's definition:

   root: {
   nodeType: 'async',
   text: 'My Reporting Project',
   draggable: false,
   id...