Ext JS with PHP: How to Create Nodes for a TreePanel

Continuing with my PHP and Ext JS series, this article will show you how to use PHP to create the nodes of an Ext JS TreePanel.

Our goal is to write code that creates a simple Ext JS TreePanel, depicted in the screenshot below, where a PHP page will generate the JSON data needed to create three nodes: Datasources, Datasets and Reports.

Let’s first take care of the Ext JS code for the TreePanel, and then focus on the PHP side.  To generate the Ext TreePanel, we can use the following code:

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

As you can tell from the code, after the TreePanel is rendered, a call to the root node’s expand() function will trigger a request to the tree-nodes.php page.  This is the page that will generate the JSON-formatted data needed to create the Datasources, Datasets and Reports nodes.  Let’s work on the PHP script now.

Creating a PHP model of an Ext JS TreeNode

We can represent an Ext JS TreeNode with a PHP Class that can be as simple as the following:

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;
    }
}

The TreeNode Class contains the main properties of an Ext.tree.TreeNode, and a constructor function that populates these properties.  Creating tree nodes information for our Ext JS TreePanel is as simple as creating TreeNode instances, storing them in an array and adding a JSON representation of this array to the http response stream.  This is how the code would look:

$n1 = new TreeNode("datasources","Datasources","data",true,false,"","");
$n2 = new TreeNode("datasets","Datasets","dataset",true,false,"","");
$n3 = new TreeNode("reports","Reports","report",true,false,"","");

$nodes = array($n1,$n2,$n3);

echo (json_encode($nodes));</pre>
And this is the generated JSON for our tree nodes:
<pre class="brush: js;">[{"text":"Datasources","id":"datasources","iconCls":"data",
"leaf":true,"draggable":false,"href":"","hrefTarget":""},
{"text":"Datasets","id":"datasets","iconCls":"dataset",
"leaf":true,"draggable":false,"href":"","hrefTarget":""},
{"text":"Reports","id":"reports","iconCls":"report",
"leaf":true,"draggable":false,"href":"","hrefTarget":""}]

Encapsulating Ext JS tree nodes information in a PHP Class

Although the approach above satisfies our simple requirements, we can strengthen the design by creating a Class that encapsulates the tree nodes, as shown in the following code:

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);
    }
}

With the TreeNodes Class, we have conveniently hidden the array of tree nodes and created a couple of helper functions, add() and toJson(), that allow us to add nodes and produce the JSON representation of these nodes, respectively.

The code to create our tree nodes would now look like this:

$treeNodes = new TreeNodes();

$treeNodes->add("datasources","Datasources","data",true,false,"","");
$treeNodes->add("datasets","Datasets","dataset",true,false,"","");
$treeNodes->add("reports","Reports","report",true,false,"","");

echo $treeNodes->toJson();

Downloads

Grab the code: ExtJS-TreePanel-with-PHP.zip

Want to learn more?

My Ext JS 3.0 Cookbook has more than a hundred step-by-step recipes that you can use to build your Ext JS applications.  Download a sample chapter and see for yourself.