Configure a treeStore and Bind it to a tree Panel

[near]

Hi,

I have been trying to bind a Json TreeStore to a treePanel for longtime now and I still can't have it displaid neither in Ext Designer preview mode nor in my local server.

I guess the problem is the configuration of the tree store in ext designer or the structure of my json treestore file. Therefore, I was wondering if anybody could provide an example of json treestore file, or a tutorial example for extjs4 ( ext designer)

Thank's in advanced

Regards

near

[lorezyra]

I'll show you some code (mostly) as I have it on my current ExtJS 4.0 project... This code is for a blog-forum I've developed from scratch.

Tree Store:

 Ext.define('app.store.myTree', {
     extend: 'Ext.data.TreeStore',
     constructor: function (cfg) {
         var me = this;
         cfg = cfg || {};
         me.callParent([Ext.apply({
             storeId: 'myTree',
             sortRoot: 'id',
             defaultRootId: 'root',
             proxy: {
                 type: 'ajax',
                 url: 'tree.php',
                 reader: {
                     type: 'json',
                     idProperty: 'id',
                     messageProperty: 'msg'
                 }
             }
         }, cfg)]);
     }
 }); 

Tree Panel:

Ext.define('app.view.ui.MyTreePanel', {
    extend: 'Ext.tree.Panel',
    id: 'treeView',
    itemId: 'treeView',
    maxWidth: 512,
    minWidth: 200,
    width: 200,
    autoScroll: true,
    collapsible: true,
    title: 'Forums',
    titleCollapse: true,
    store: 'myTree',
    rootVisible: false,
    region: 'west',
    split: true,
    initComponent: function () {
        var me = this;
        Ext.applyIf(me, {
            viewConfig: {
                border: 0,
                id: 'treeGrid',
                itemId: 'treeGrid',
                styleHtmlContent: true,
                emptyText: 'Forum :  root',
                loadingText: 'Querying Forums...',
                trackOver: true
            }
        });
        me.callParent(arguments);
    }
}); 

PHP backend:

  function display_treeJSON($dbTableName="blogForum", $root=0, $directEcho=true, $showSpaces=false ){//v2.41
    // $showSpaces is used primarily for debugging. -- makes it easy to read output.
    global $dbh;
    //based on the 'modified preorder tree traversal' algorithm:
    $indentSpaces="";
    $showNewLine=(($showSpaces)? "\n":"");
    $content="[{" . $showNewLine;
    $right=array(); // start with an empty $right stack
    $depthCount=0; //used to ensure that we close the childNodes correctly
    $lastDepth=array(); //tracking depth
    // retrieve the left and right value of the $root node
    $result=sql_query("SELECT * FROM $dbTableName WHERE id='$root'", $dbh);
    $rootLevel=sql_fetch_assoc($result);
    
    // now, retrieve all descendants of the $rootNode
    $sqlQ= "SELECT * FROM $dbTableName WHERE nodeLeft BETWEEN '$rootLevel[nodeLeft]' AND '$rootLevel[nodeRight]' ORDER BY nodeLeft ASC";
    $sql_=sql_query($sqlQ, $dbh);
    // display each childNode
    while($childLevel=sql_fetch_assoc($sql_)){
        $indentSpaces=(($showSpaces)? str_repeat("     ", max($childLevel["fDepth"],0)) : "");
        // only check stack if there is one
        if(count($right)>0){ // check if we should remove a node from the stack
            while($right[count($right)-1]<$childLevel["nodeRight"] && $depthCount>0){//end of childNodes for branch
                if($right[count($right)-1]+1!=$childLevel["nodeLeft"] && $lastDepth[count($lastDepth)-1]!=$childLevel["fDepth"] ){ // then is (last) childNode...
                    $content.=(($showSpaces)? str_repeat("     ", max($lastDepth[count($lastDepth)-1],0)) : "") . "}]" . $showNewLine;
                    $depthCount--;
                }elseif($right[count($right)-1]+1==$childLevel["nodeLeft"] || $lastDepth[count($lastDepth)-1]>=$childLevel["fDepth"] ){//has sibling
                    $content.="$indentSpaces},{" . $showNewLine;
                }//end if 
                array_pop($right);
                array_pop($lastDepth);
            }//end while $right>$nodeRight
            if($right[count($right)-1]+1==$childLevel["nodeLeft"] || $lastDepth[count($lastDepth)-1]>=$childLevel["fDepth"] ){//has sibling
                $leafStr="$indentSpaces},{" . $showNewLine;
                 if(substr($content, 0-strlen($leafStr))!=$leafStr) $content.=$leafStr; //prevent extra (empty) child node
            }//end if 
        }//end if count()

        // display indented node title
        if($childLevel['descript']!="[internal use only!]"){ // && $childLevel["visible"]!=0
            
            $content.= $indentSpaces . "\"id\": \"$childLevel[id]\"" . $showNewLine;
            $content.= $indentSpaces . ",\"text\": \"$childLevel[name]\"" . $showNewLine;
            $content.= $indentSpaces . ",\"viewType\": \"$childLevel[viewType]\"" . $showNewLine;
            //$content.=$indentSpaces . ",checked: false" . $showNewLine;

            if(($childLevel["nodeRight"]-$childLevel["nodeLeft"]-1)/2>0){ // then has (new) childNode...
                $content.= $indentSpaces . ",\"cls\": \"folder\"" . $showNewLine;
                $content.=$indentSpaces . ",\"children\": [{" . $showNewLine;
                $depthCount++;
            }else{// another leaf
                $content.= $indentSpaces . ",\"cls\": \"file\"" . $showNewLine;
                $content.=$indentSpaces . ",\"leaf\": \"true\"" . $showNewLine;
            }//end if  descript internal
        }//end if childLevel
        $right[]=$childLevel["nodeRight"]; // add this node to the stack
        $lastDepth[]=$childLevel["fDepth"];
    }//end while $childLevel
    if($depthCount>=0) $content.=str_repeat("}]", $depthCount+1);// writes the closing brackets for remaining childNodes
    if($directEcho){ echo($content); }else{ return($content); }
}//end function display_treeJSON 

This should be more than enough to get started... The only thing I have left out is the SQL...

[near]

thank you !

[near]

since I didn't manage to solve the problem from that exemple, could you provide me with an example of json store that we could use with this example: http://docs.sencha.com/ext-js/4-0/#!.../treegrid.html, 'cause I think my problem is due to a non conforme structure or syntaxe of my json file.

thank's in advance

regards

near

[lorezyra]

Here is the direct JSON output from my PHP function above!

[
    {
        "id": "1",
        "text": "Journal 日記",
        "viewType": "0",
        "cls": "file",
        "leaf": "true"
    },
    {
        "id": "2",
        "text": "Travels 観光",
        "viewType": "1",
        "cls": "folder",
        "children": [
            {
                "id": "4",
                "text": "Travel Plans",
                "viewType": "1",
                "cls": "file",
                "leaf": "true"
            }
        ]
    },
    {
        "id": "6",
        "text": "Private Diary",
        "viewType": "0",
        "cls": "folder",
        "children": [
            {
                "id": "15",
                "text": "日本語を勉強",
                "viewType": "0",
                "cls": "file",
                "leaf": "true"
            },
            {
                "id": "23",
                "text": "文化",
                "viewType": "0",
                "cls": "file",
                "leaf": "true"
            }
        ]
    },
    {
        "id": "24",
        "text": "My Jobs",
        "viewType": "0",
        "cls": "folder",
        "children": [
            {
                "id": "27",
                "text": "RBS",
                "viewType": "0",
                "cls": "file",
                "leaf": "true"
            }
        ]
    },
    {
        "id": "28",
        "text": "Projects",
        "viewType": "0",
        "cls": "folder",
        "children": [
            {
                "id": "29",
                "text": "Programming",
                "viewType": "0",
                "cls": "folder",
                "children": [
                    {
                        "id": "30",
                        "text": "PHP",
                        "viewType": "0",
                        "cls": "file",
                        "leaf": "true"
                    },
                    {
                        "id": "32",
                        "text": "ExtJS  \\  Javascript",
                        "viewType": "0",
                        "cls": "file",
                        "leaf": "true"
                    },
                    {
                        "id": "38",
                        "text": "VBS \\ VBA",
                        "viewType": "0",
                        "cls": "file",
                        "leaf": "true"
                    },
                    {
                        "id": "39",
                        "text": "SQL",
                        "viewType": "0",
                        "cls": "file",
                        "leaf": "true"
                    }
                ]
            },
            {
                "id": "31",
                "text": "TODO",
                "viewType": "0",
                "cls": "file",
                "leaf": "true"
            },
            {
                "id": "33",
                "text": "Home Network",
                "viewType": "0",
                "cls": "file",
                "leaf": "true"
            },
            {
                "id": "34",
                "text": "Sewing",
                "viewType": "0",
                "cls": "file",
                "leaf": "true"
            },
            {
                "id": "40",
                "text": "Online Tools - network",
                "viewType": "0",
                "cls": "file",
                "leaf": "true"
            }
        ]
    },
    {
        "id": "35",
        "text": "Weight Loss",
        "viewType": "0",
        "cls": "file",
        "leaf": "true"
    },
    {
        "id": "36",
        "text": "Books",
        "viewType": "0",
        "cls": "file",
        "leaf": "true"
    },
    {
        "id": "37",
        "text": "Links",
        "viewType": "0",
        "cls": "file",
        "leaf": "true"
    }
]

Be sure to use http://jsonlint.com/ to validate your JSON output!

[near]

thank's a lot ! it helps me solve the problem, it's working with that structure !!!

regards

near

[lawrence_o]

PM
lorezyra,

You are the saving angel! Thanks! I had been tampering with this store too. Went over the Ext JS example here: http://dev.sencha.com/deploy/ext-4.0...e/reorder.html Only to find the example is totally bogey. I mean, try to execute the mentioned script: get-nodes.php by excuting it in the browser and you'll see the data returned doesn't look at all to the nodes in the example. As such I lost considerable amount of time trying to reproduce the correct JSON. I really feel bad towards Sencha for wasting our time like this! Ext is pretty complex certainly for newbies and if the examples don't already work? So thank you for setting that straight!

Kind regards
Lawrence