1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    33
    Vote Rating
    0
    near is on a distinguished road

      0  

    Question Configure a treeStore and Bind it to a tree Panel

    Configure a treeStore and Bind it to a tree Panel


    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

  2. #2
    Sencha Premium Member lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 日本
    Posts
    575
    Vote Rating
    6
    lorezyra will become famous soon enough

      0  

    Cool treeStore

    treeStore


    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:
    PHP Code:
     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:
    PHP Code:
    Ext.define('app.view.ui.MyTreePanel', {
        
    extend'Ext.tree.Panel',
        
    id'treeView',
        
    itemId'treeView',
        
    maxWidth512,
        
    minWidth200,
        
    width200,
        
    autoScrolltrue,
        
    collapsibletrue,
        
    title'Forums',
        
    titleCollapsetrue,
        
    store'myTree',
        
    rootVisiblefalse,
        
    region'west',
        
    splittrue,
        
    initComponent: function () {
            var 
    me this;
            
    Ext.applyIf(me, {
                
    viewConfig: {
                    
    border0,
                    
    id'treeGrid',
                    
    itemId'treeGrid',
                    
    styleHtmlContenttrue,
                    
    emptyText'Forum :  root',
                    
    loadingText'Querying Forums...',
                    
    trackOvertrue
                
    }
            });
            
    me.callParent(arguments);
        }
    }); 

    PHP backend:
    PHP Code:
      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($content0-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...
    Last edited by lorezyra; 16 Nov 2011 at 6:35 PM. Reason: made code easier to read
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    33
    Vote Rating
    0
    near is on a distinguished road

      0  

    Default


    thank you !

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    33
    Vote Rating
    0
    near is on a distinguished road

      0  

    Question


    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

  5. #5
    Sencha Premium Member lorezyra's Avatar
    Join Date
    Dec 2007
    Location
    Japan -- 日本
    Posts
    575
    Vote Rating
    6
    lorezyra will become famous soon enough

      0  

    Default


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

    Code:
    [
        {
            "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!
    Perfection as a goal is a nice idea that can point one in a specific direction. However, since "perfection" is an ever changing (evolving?) and moving target, one must admit that perfection can never be obtained...

    When in doubt, check the d4mn source code!

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Location
    Paris, France
    Posts
    33
    Vote Rating
    0
    near is on a distinguished road

      0  

    Thumbs up


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

    regards

    near

  7. #7
    Sencha User
    Join Date
    Jan 2013
    Posts
    5
    Vote Rating
    0
    lawrence_o is on a distinguished road

      0  

    Default


    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

Thread Participants: 2