In this tutorial I’ll show you how to build an ExtJS treepanel using data coming from MySQL, while using PHP to create the json array sent to the treepanel. Here’s how:
1. Create ourapp.js, this will contain all our js files in steps 2 and 3:
ourapp.js
Ext.onReady(function(){
// Items from step 2 and 3 will go in here
});
2. Create the treepanel:
var tpanel = new Ext.tree.TreePanel({
id: 'tree-panel',
height: 477,
useArrows: true,
animate: true,
border: false,
root: {
nodeType: 'async',
text: 'Items',
draggable: false,
id: '0'
},
loader: new Ext.tree.TreeLoader({
dataUrl:'itemlist.php', // This is where our treepanel items come from
requestMethod: 'GET'
})
});
3. Create the panel that’ll house the treepanel:
var homepanel = new Ext.Panel({
id: 'mainpanel_id',
renderTo: 'maindiv',
width : 1218,
height: 545,
frame: true,
layout: 'border',
items: [{
region:'west',
margins: '0 0 0 0 ',
id: 'westregion_id',
width: 300,
autoHeight: true,
layout: 'fit',
frame: true,
items:[tpanel] // treepanel goes here
},{
region: 'east',
margins: '0 0 0 0',
id: 'eastregion_id',
width: 900,
autoHeight: true,
layout: 'fit',
frame: true,
items: [] // Add whatever other items you'd like here
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '1 1 1 1' // top, right, bottom, left
}]
});
4. Now create the php file that’ll load the data from MySQL and create the json array for us:
itemlist.php
<?php
include('../Connections/yourconnectiondata.php');
//connection String
$_con = mysql_connect($hostname, $username, $password) or die('Could not connect: ' . mysql_error());
//select database
$bool = mysql_select_db($database, $_con);
if ($bool === False){
print "can't find $database";
}
$query = "SELECT item_id as id, item_name as text, 'true' as leaf FROM items";
$res = mysql_query($query, $_con);
if (mysql_num_rows($res) > 0) {
while($obj = mysql_fetch_object($res)){
$arr[] = $obj;
}
$myData = $arr;
} else {
$myData = '';
}
echo json_encode($myData);
?>
5. Create the index file that’ll put it all together (remember to change the paths to where you have your extjs files):
index.php
<html>
<body>
<table align="center" class="contenttable" cellpadding="0" cellspacing="0" border="0">
</br>
<tr>
<td id="maindiv"></td>
</tr>
</table>
</body>
<!-- include ext-all.css -->
<link rel="stylesheet" href="ext/resources/css/ext-all.css" />
<!-- include ext-base.js -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<!-- include ext-all.js -->
<script type="text/javascript" src="ext/ext-all.js"></script>
<!-- include our app js files -->
<script type="text/javascript" src="ourapp.js"></script>
</html>
6. Our entire ourapp.js should look like this:
ourapp.js
Ext.onReady(function(){
var tpanel = new Ext.tree.TreePanel({
id: 'tree-panel',
height: 477,
useArrows: true,
animate: true,
border: false,
root: {
nodeType: 'async',
text: 'Items',
draggable: false,
id: '0'
},
loader: new Ext.tree.TreeLoader({
dataUrl:'itemlist.php', // This is where our treepanel items come from
requestMethod: 'GET'
})
});
var homepanel = new Ext.Panel({
id: 'mainpanel_id',
renderTo: 'maindiv',
width : 1218,
height: 545,
frame: true,
layout: 'border',
items: [{
region:'west',
margins: '0 0 0 0 ',
id: 'westregion_id',
width: 300,
autoHeight: true,
layout: 'fit',
frame: true,
items:[tpanel] // treepanel goes here
},{
region: 'east',
margins: '0 0 0 0',
id: 'eastregion_id',
width: 900,
autoHeight: true,
layout: 'fit',
frame: true,
items: [] // Add whatever other items you'd like here
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '1 1 1 1' // top, right, bottom, left
}]
});
});
7. You’re welcome and enjoy. Thank you for stopping by and please share with others, after all, code should be free.
Hi,
Congratulations on the article.
When I tried to run the following error appears:
“TypeError: ‘undefined’ is not a constructor (Evaluating ‘new Ext.tree.TreeLoader’)”
Please, how can I solve?
Thank you ..
@Luis Thanks for checking out the article. Make sure the includes in index.php are in this order and remember to adjust the path to each of the items below to match your setup:
@Luiz Sorry, forgot to include the order
, please see below: (again, remember to adjust the paths accordingly):
ext-all.css
ext-base.js
ext-all.js
ourapp.js
hi, i can´t se the sql file.. can you help me with this?
thanks
@luis Sorry I haven’t been around lately, If you still need help, what exactly do you mean you can’t see the sql file? Please let me know and I’ll try to give you a hand.
Hello my friend,
I would like only to thanks for your great article. It’s very good. congractulations
@Jorenilson Thanks for the comments, I’m glad you enjoyed the post.