extjs 4 add checkbox in treepanel with PHP and MySQL

Question

this is the extjs 4 code:

checktree.js

Ext.require([
    'Ext.tree.*',
    'Ext.data.*',
    'Ext.window.MessageBox'
]);

Ext.onReady(function() {
    var store = Ext.create('Ext.data.TreeStore', {
        proxy: {
            type: 'ajax',
            url: 'tree.php',
     node:'id' // send the parent id through GET (default 0)
        }
    });

    var tree = Ext.create('Ext.tree.Panel', {
        store: store,
        rootVisible: false,
        useArrows: true,
        frame: true,
        title: 'Check Tree',
        renderTo: 'tree-div',
        width: 289,
        height: 220,
        dockedItems: [{
            xtype: 'toolbar',
            items: {
                text: 'Get checked nodes',
                handler: function(){
                    var records = tree.getView().getChecked(),
                        names = [];

                    Ext.Array.each(records, function(rec){
                        names.push(rec.get('text'));
                    });

                    Ext.MessageBox.show({
                        title: 'Selected Nodes',
                        msg: names.join('<br />'),
                        icon: Ext.MessageBox.INFO
                    });
                }
            }
        }]
    }); 
});

this is the tree.php code:

<?php
mysql_connect("localhost", "root", "") or die("Could not connect");
mysql_select_db("tree") or die("Could not select database");
$parent_id = $_GET['node'];
$query = "SELECT id, text, leaf,false as checked 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 Database:

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

Question

1)i want to add checkbox inside the tree,and i have added the false as checked in the SQL,become all the tree having check box,unfortunately the check box are unable to uncheck or checked,any way how to add checkbox in a tree panel correctly?
2)i just want the file having the check box, folder no need checkbox
3)when the check box are checked or uncheck, pop up a mesage box,and written the ID and checkbox status

Answer 1

For the first and second question you have to change your PHP-Code:

1) The problem is that "mysql_fetch_object" returns an object with string properties and ExtJs expects a boolean value at attribute "checked".

2)When a node is a leaf then add the attribute "checked"

  <?php
    mysql_connect("localhost", "root", "brandt") or die("Could not connect");
    mysql_select_db("tree") or die("Could not select database");
    $parent_id = $_GET['node'];
    // 1) Remove false as checked
    $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)) {

      // 2) If no leaf then destroy the attribute
      if($obj->leaf != "false"){
         // 1) set checked attribute with an boolean value 
         $obj->checked = false;       
      }
     $arr[] = $obj;
    }
    echo json_encode($arr);
    ?>

3) Add listener for check change after tree panel

tree.on('checkchange', function(node){
        var data = node.data;
        Ext.MessageBox.show({
        title: 'Changed checkbox status',
        msg: 'ID: ' + data.id + ' <br /> Checkbox status: ' + data.checked,
        icon: Ext.MessageBox.INFO
        });    
})