Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

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

DZone's Guide to

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

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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:

extjs-tree-nodes-2

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?

Ext-JS-Cookbook 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.



Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Jorge Ramon, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}