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

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>

Comentarii

  1. how if i want show the tree expanded???

    RăspundețiȘtergere
  2. The simple way is to add a column in your db (expanded) and add value true to one or more nodes.
    Ex.

    ALTER TABLE `mytree` ADD `expanded` TEXT NULL;

    UPDATE `tree`.`mytree` SET `expanded` = 'true' WHERE `mytree`.`id` =36;

    Alex

    RăspundețiȘtergere
  3. 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...
    thanks before..........

    RăspundețiȘtergere
  4. yes, you must add in your query the new column expanded.

    $query = "SELECT id, text, leaf, expanded FROM mytree WHERE parent_id='".$parent_id."' ORDER BY text ASC";

    RăspundețiȘtergere
  5. wow... it's works.....!! thank's..
    But 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...

    RăspundețiȘtergere
  6. okay alex i can do that,,,,thank's before

    RăspundețiȘtergere
  7. Hi, 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Ștergere
    Răspunsuri
    1. Sorry, i don't know Codeigniter, but i think your problem came from incorrect json result from db or duplicate id.

      From 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":""}]

      Ștergere
  8. Hi thanks for the tutorial!

    RăspundețiȘtergere
  9. Hi, 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Ștergere
    Răspunsuri
    1. Hi, node:'id' is a param and hold the value id from json
      {"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

      Ștergere
    2. 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.

      Ștergere
    3. Hi 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'];
      $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.

      Ștergere
    4. My extjs 4.2.1 Code: Ext.define('siccar.store.storeMenuBancos', {
      extend: '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)]);
      }
      });

      Ștergere
    5. 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.
      Thank you.

      Ștergere
  10. replace this:
    $parent_id = $_GET['node'];

    with this:
    if ($_GET['node'] == 'root') {
    $parent_id = 0;
    }
    else {
    $parent_id = $_GET['node'];
    }

    RăspundețiȘtergere

Trimiteți un comentariu

Postări populare de pe acest blog

SmokePing integrate with Observium