Ext JS with PHP: How to Add Children to Async Tree Nodes

After reading Ext JS with PHP: How to Create Nodes for a TreePanel, some readers have asked how the aproach discussed in the article can be extended to add children to any async node, as shown in the following screenshot:

In our Ext JS TreePanel, expanding any parent node (My Project, Datasources and Reports) will generate an http request for the node’s children.  What we need to do then is monitor the request parameters, determine which parent node should be populated, and generate the child nodes.  Let’s modify our original code so we can accomplish this.

A PHP model for Ext JS tree nodes

First, remember that we’re using the following PHP classes to model the Ext JS tree nodes:

class TreeNode {
    
    public $text = "";
    public $id = "";
    public $iconCls = "";
    public $leaf = true;
    public $draggable = false;
    public $href = "#";
    public $hrefTarget = "";

    function  __construct($id,$text,$iconCls,$leaf,$draggable,
            $href,$hrefTarget) {
    
        $this->id = $id;
        $this->text = $text;
        $this->iconCls = $iconCls;
        $this->leaf = $leaf;
        $this->draggable = $draggable;
        $this->href = $href;
        $this->hrefTarget = $hrefTarget;    
    }    
}

class TreeNodes {
    
    protected $nodes = array();
    
    function add($id,$text,$iconCls,$leaf,$draggable,
        $href,$hrefTarget) {
    
        $n = new TreeNode($id,$text,$iconCls,$leaf,
                $draggable,$href,$hrefTarget);
        
        $this->nodes[] = $n;
    }
    
    function toJson() {
        return json_encode($this->nodes);
    }
}

Creating children for Ext JS async tree nodes

We now need to capture the parent node that is making the request:

$requestedNode = "";

if (isset($_REQUEST["node"])) {
    $requestedNode = $_REQUEST["node"];
}

With the parent node captured, we can build its child nodes, and send them to the Ext JS client:

$treeNodes = new TreeNodes();

if ('node-root' == $requestedNode) {
    $treeNodes->add("node-datasources","Datasources","",false,false,"","");
    $treeNodes->add("node-reports","Reports","",false,false,"","");
} else if ('node-datasources' == $requestedNode) {
    $treeNodes->add("employees-system-node","Employee Management System","datasource",true,false,"","");
    $treeNodes->add("customers-system-node","Customer Management System","datasource",true,false,"","");
    $treeNodes->add("order-system-node","Order Processing System","datasource",true,false,"","");
} else if ('node-reports' == $requestedNode) {
    $treeNodes->add("time-report-node","Time and Attendance","report",true,false,"","");
    $treeNodes->add("orders-by-quarter-report-node","Orders By Quarter","report",true,false,"","");
    $treeNodes->add("customers-trends-report-node","Customer Trends","report",true,false,"","");
}

echo $treeNodes->toJson();

And this is the TreePanel definition:

var tree = new Ext.tree.TreePanel({
    renderTo: Ext.getBody(),
    title: 'Reporting Project',
    width: 250,
    height: 250,
    userArrows: true,
    animate: true,
    autoScroll: true,
    dataUrl: 'tree-nodes-2.php',
    root: {
        nodeType: 'async',
        text: 'My Project',
        id:'node-root'
    },
    listeners: {
        render: function() {
            this.getRootNode().expand();
        }
    }
})

This is, my friends, all it takes to add children to Ext JS async tree nodes using PHP.  Want to share your preferred approach?

Downloads

Grab the code for this article from my downloads page.

Want to learn more?

Check out my Ext JS 3.0 Cookbook.  It contains more than a hundred step-by-step recipes that explain useful techniques you can use to build great Ext JS applications.