From Learn About the Ext JavaScript Library

Contents 1 Introduction 1.1 1. MySQL Table Definition and Example Data 1.2 2. EXTJS Tree Object Definition 1.3 3. TreeLoader Php Class

Introduction

This article will cover the use of the Tree object with PHP script programming language. The main objective is to exemplify the use of a PHP Class that feeds the TreeLoader object with the appropriate JSON output needed for EXTJS to build a tree structure.

1. MySQL Table Definition and Example Data

(myTableDump.sql)

-- phpMyAdmin SQL Dump
-- version 2.10.1
-- http://www.phpmyadmin.net
-- 
-- Host: localhost
-- Generation Time: Jan 16, 2008 at 12:02 PM
-- Server version: 5.0.41
-- PHP Version: 5.2.2
 
SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";
 
-- 
-- Database: `t3_db`
-- 
 
-- --------------------------------------------------------
 
-- 
-- Table structure for table `tx_taw_user_project_category`
-- 
 
CREATE TABLE `tx_taw_user_project_category` (
  `uid` int(11) NOT NULL AUTO_INCREMENT,
  `pid` int(11) NOT NULL DEFAULT '0',
  `upc_order` int(11) NOT NULL,
  `upc_name` text character SET utf8 collate utf8_bin NOT NULL,
  `upc_date` int(11) NOT NULL DEFAULT '0',
  `upc_parent` int(11) DEFAULT NULL,
  `user_account` int(11) NOT NULL,
  PRIMARY KEY  (`uid`),
  UNIQUE KEY `uid` (`uid`),
  KEY `parent` (`pid`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci AUTO_INCREMENT=4 ;
 
-- 
-- Dumping data for table `tx_taw_user_project_category`
-- 
 
INSERT INTO `tx_taw_user_project_category` VALUES (1, 0, 0, 0x7465737465, 0, 0, 1);
INSERT INTO `tx_taw_user_project_category` VALUES (2, 0, 0, 0x746573746532, 0, 1, 1);
INSERT INTO `tx_taw_user_project_category` VALUES (3, 0, 0, 0x74656433, 0, 2, 1);

2. EXTJS Tree Object Definition

(layout.html)

<script type="text/javascript">
Ext.onReady(FUNCTION() {
    // Define Tree.
    var Tree_Category_Loader = new Ext.tree.TreeLoader({
        dataUrl   :"tx_taw_models_ProjectCategoryListProxy.php"
    });
    var Tree_Category = new Ext.tree.TreePanel({
        title            : 'My Category Tree',
        collapsible      : false,
        animCollapse     : false,
        border           : true,
        id               : "tree_projectcategory",
        el               : "tree_projectcategory",
        autoScroll       : true,
        animate          : false,
        enableDD         : true,
        containerScroll  : true,
        height           : 100,
        width            : 300,
        loader           : Tree_Category_Loader
    });
 
    // SET the root node.
    var Tree_Category_Root = new Ext.tree.AsyncTreeNode({
        text		: 'My Root Node',
        draggable	: false,
        id		: '0'                  // this IS the id of the startnode
    });
 
    // Render the tree.
    Tree_Category.setRootNode(Tree_Category_Root);
    Tree_Category.render();
    Tree_Category_Root.expand();
});						
</script>
<div id="tree_projectcategory" ></div>

3. TreeLoader Php Class

(tx_taw_models_ProjectCategoryListProxy.php)

class tx_taw_models_ProjectCategoryListProxy{
 
	/*
	 * Load tree node.
	 */	
	 function getTree($TYPO3_db,$TYPO3_db_username,$TYPO3_db_password,$TYPO3_db_host,$node){
		$conn = mysql_connect($TYPO3_db_host, $TYPO3_db_username, $TYPO3_db_password); 
		mysql_select_db($TYPO3_db, $conn);
		$nodes = $this->display_children($node);
		mysql_close($conn);
		print json_encode($nodes);
	}
 
	// http://www.sitepoint.com/article/hierarchical-data-database
	// http://extjs.com/forum/archive/index.php/t-10082.html
	// $parent is the parent of the children we want to see
	// $level is increased when we go deeper into the tree,
	//        used to display a nice indented tree
 
	function display_children($parent) {
		// retrieve all children of $parent
		$result = mysql_query(  'SELECT uid, upc_name, upc_parent, upc_order ' .
								'FROM tx_taw_user_project_category ' .
								'WHERE upc_parent = ' . $parent . ' ' .
								'AND user_account = ' . $GLOBALS['TSFE']->fe_user->user['ses_userid'] . ' ' .
								'ORDER BY upc_order;');
		// display each child
		while ($row = mysql_fetch_array($result)) {
			// Response parameters.
			$path['text']		= html_entity_decode($row['upc_name']);
			$path['id']			= $row['uid'];
			$path['position']	= $row['upc_order'];
			// Check if node is a leaf or a folder.
			$cResult = mysql_query( 'SELECT uid, upc_name, upc_parent, upc_order ' .
									'FROM tx_taw_user_project_category ' .
									'WHERE upc_parent = ' . $row['uid'] . ' ' .
									'AND user_account = ' . $GLOBALS['TSFE']->fe_user->user['ses_userid'] . ' ' .
									'ORDER BY upc_order;');
			$cCount = mysql_num_rows($cResult);
			if($cCount > 0){
				$path['leaf']	= false;
				$path['cls']	= 'folder';
			}else{
				$path['leaf']	= true;
				$path['cls']	= 'file';
			}
 
			// call this function again to display this
			// child's children
			$nodes[] = $path;
		}
		return $nodes;
	}
 
 
}
$treeDataModel = new tx_taw_models_ProjectCategoryListProxy;
$node = $_POST['node'];
if ($node == 0){                  // < if it´s the first node
  $node = 1; // Initial node.
}
$treeDataModel ->getTree('mydatabase','myuser','mypassword','myhost', $node);