Extjs 4 TreePanel - PHP - MYSQL (Simple Tutorial)
This article will cover the use of the tree.Panel object with PHP and MySQL. This is a simple tutorial.
1. MySQL table with examples data
2. Javascript code for tree
3. PHP code for take the data from database
4. HTML
1. MySQL table with examples data
2. Javascript code for tree
3. PHP code for take the data from database
4. HTML
1. MySQL table with examples data
Create a database tree and a table mytree.
The table have 4 columns:
id - node id
text - name of tree node
parent_id - id of the parrent node for the children node
leaf - true/false
2. Javascript file (tree.js) - see Extjs 4 API
3. tree.php
4 HTML file
Create a html file and add:
Create a database tree and a table mytree.
The table have 4 columns:
id - node id
text - name of tree node
parent_id - id of the parrent node for the children node
leaf - true/false
CREATE DATABASE `tree`; DROP TABLE IF EXISTS `mytree`; CREATE TABLE `mytree` ( `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'node_id', `text` varchar(20) NOT NULL COMMENT 'node_name', `parent_id` int(11) NOT NULL, `leaf` varchar(5) NOT NULL COMMENT 'true/false', PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=95 DEFAULT CHARSET=latin1; INSERT INTO `mytree` VALUES (36,'Folder 1',0,'false'), (38,'Folder 2',0,'false'),(42,'Text 1',36,'true'), (43,'Text 3',36,'true'),(44,'Text 2',36,'true'), (52,'Text 6',38,'true'),(57,'Text 5',38,'true'), (58,'Text 4',38,'true'),(73,'Subfolder 1',36,'false'), (74,'Text 7',73,'true'),(75,'Text 10',73,'true'), (76,'Text 9',73,'true');
2. Javascript file (tree.js) - see Extjs 4 API
Ext.onReady(function() {
// first create a store to GET the data
var treestore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'lib/tree.php',
node:'id' // send the parent id through GET (default 0)
}
});
// get the tree
var tree = Ext.create('Ext.tree.Panel', {
store: treestore,
rootVisible: false,
title: 'Simple Tree',
renderTo: 'tree',
width: 200,
height: 250
});
});
3. tree.php
mysql_connect("localhost", "root", "") or die("Could not connect");
mysql_select_db("tree") or die("Could not select database");
//$parent_id = $_GET['node'];
if ($_GET['node'] == 'root') {$parent_id = 0;} else {$parent_id = $_GET['node'];} // added by chiken
$query = "SELECT id, text, leaf FROM mytree WHERE parent_id='".$parent_id."' ORDER BY text ASC";
$rs = mysql_query($query);
$arr = array(); while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo json_encode($arr);
mysql_select_db("tree") or die("Could not select database");
//$parent_id = $_GET['node'];
if ($_GET['node'] == 'root') {$parent_id = 0;} else {$parent_id = $_GET['node'];} // added by chiken
$query = "SELECT id, text, leaf FROM mytree WHERE parent_id='".$parent_id."' ORDER BY text ASC";
$rs = mysql_query($query);
$arr = array(); while($obj = mysql_fetch_object($rs)) {
$arr[] = $obj;
}
echo json_encode($arr);
4 HTML file
Create a html file and add:
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext.js"></script>
<script type="text/javascript" src="tree.js"></script>
</head>
<body>
<div id="tree"></div>
</body>
</html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext.js"></script>
<script type="text/javascript" src="tree.js"></script>
</head>
<body>
<div id="tree"></div>
</body>
</html>
how if i want show the tree expanded???
RăspundețiȘtergereThe simple way is to add a column in your db (expanded) and add value true to one or more nodes.
RăspundețiȘtergereEx.
ALTER TABLE `mytree` ADD `expanded` TEXT NULL;
UPDATE `tree`.`mytree` SET `expanded` = 'true' WHERE `mytree`.`id` =36;
Alex
i must change tree.php ?, cause i was try it,and this is not work. i'm sorry before, i'm still newbie and need for your help...
RăspundețiȘtergerethanks before..........
yes, you must add in your query the new column expanded.
RăspundețiȘtergere$query = "SELECT id, text, leaf, expanded FROM mytree WHERE parent_id='".$parent_id."' ORDER BY text ASC";
wow... it's works.....!! thank's..
RăspundețiȘtergereBut how if i have file connection.php and i want tree.php separated between database connection and main query in tree.php?
ya i'm trying to make website and i want use Extjs 4. i hope you can give me advice for the nice web.
i'm amazed for your example tree wtith extjs...
okay alex i can do that,,,,thank's before
RăspundețiȘtergereHi, i have some problem, i use codeigniter with extjs4, and i have try the sample, when i click the folder to expanded the tree, i can't expanded, and have a error "Uncaught TypeError: Cannot read property 'internalId' of undefined", my sql is use the sample
RăspundețiȘtergereSorry, i don't know Codeigniter, but i think your problem came from incorrect json result from db or duplicate id.
ȘtergereFrom my example the result of json is like this:
[{"id":"36","text":"Folder1","leaf":"false","expanded":"false"},{"id":"38","text":"Folder2","leaf":"false","expanded":"false"}]
and ...
[{"id":"73","text":"Subfolder1","leaf":"false","expanded":""},{"id":"42","text":"Text1","leaf":"true","expanded":""},{"id":"44","text":"Text2","leaf":"true","expanded":""},{"id":"43","text":"Text3","leaf":"true","expanded":""}]
Hi thanks for the tutorial!
RăspundețiȘtergereHi, Apex, one question, what is node:'id' inside the proxy? it is a param? because this does not work for me, anything is post to the server, i'm using extjs 4.2.1, thanks.
RăspundețiȘtergereHi, node:'id' is a param and hold the value id from json
Ștergere{"id":"73","text":"Subfolder1","leaf":"false" [...]
default is 0 (root). My exemple is for ExtJS 4.0.
A good example for ExtJS 4.2.2 is
http://docs.sencha.com/extjs/4.2.2/extjs-build/examples/build/KitchenSink/ext-theme-gray/#tree-reorder
Thanks , however in the example link i do not see, the use of the param, i'm using 4.2.1 and your example does not work.
ȘtergereHi again, i got it, i was adding inside my sqlquery the column parent_id, so that was the problem, this is my new code:$parent_id = $_POST['node'];
Ștergere$this->db->select('id,text,leaf');
$this->db->where('parent_id',$parent_id);
$this->db->from('menu_principal');
$SqlRead = $this->db->get();
foreach($SqlRead->result() as $row)
{
$arr[] = $row;
}
echo json_encode($arr);
Thanks.
My extjs 4.2.1 Code: Ext.define('siccar.store.storeMenuBancos', {
Ștergereextend: 'Ext.data.TreeStore',
requires: [
'siccar.model.modelMenuBancos',
'Ext.data.proxy.Ajax'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'siccar.model.modelMenuBancos',
storeId: 'storeMenuBancos',
proxy: {
type: 'ajax',
idParam: 'nodo',
url: 'controller_sistema/readMainMenuBancos'
}
}, cfg)]);
}
});
hi, i'm glad that you found your answer. I'm not working anymore wit extjs, but when i'll have some free time i'll post update to this article.
ȘtergereThank you.
replace this:
RăspundețiȘtergere$parent_id = $_GET['node'];
with this:
if ($_GET['node'] == 'root') {
$parent_id = 0;
}
else {
$parent_id = $_GET['node'];
}