1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    27
    Vote Rating
    0
    sveatlo is on a distinguished road

      0  

    Default Answered: TreeStore with proxy loading JSON

    Answered: TreeStore with proxy loading JSON


    Hi,
    I'm creating a MVC application, with Menu TreeStore and I'm trying to configure the proxy to work correctly.
    Here's my JSON:
    Code:
    {
        "success": true,
        "root": [
            {
                "text": "Home",
                "leaf": true
            },
            [
                {
                    "text": "Moje Firma s.r.o.",
                    "expanded": true,
                    "children": [
                        {
                            "text": "Vydane",
                            "leaf": true
                        },
                        {
                            "text": "Prijate",
                            "leaf": true
                        }
                    ]
                },
                {
                    "text": "Já Živnostník",
                    "expanded": true,
                    "children": [
                        {
                            "text": "Vydane",
                            "leaf": true
                        },
                        {
                            "text": "Prijate",
                            "leaf": true
                        }
                    ]
                },
                {
                    "text": "Nezisková organizace",
                    "expanded": true,
                    "children": [
                        {
                            "text": "Vydane",
                            "leaf": true
                        },
                        {
                            "text": "Prijate",
                            "leaf": true
                        }
                    ]
                },
                {
                    "text": "Příspěvková organizace",
                    "expanded": true,
                    "children": [
                        {
                            "text": "Vydane",
                            "leaf": true
                        },
                        {
                            "text": "Prijate",
                            "leaf": true
                        }
                    ]
                },
                {
                    "text": "Moje Firma SK s.r.o.",
                    "expanded": true,
                    "children": [
                        {
                            "text": "Vydane",
                            "leaf": true
                        },
                        {
                            "text": "Prijate",
                            "leaf": true
                        }
                    ]
                }
            ]
        ]
    }
    It's generated by a php script, but I'm not sure, if it is usable.

    Here's the php script:
    Code:
    <meta charset="utf-8" />
    <?php
    require_once 'HTTP/Request2.php';
    $request = new HTTP_Request2('http://demo.flexibee.eu/'.$_GET["url"], HTTP_Request2::METHOD_GET);
    $request->setAuth('winstrom', 'winstrom', HTTP_Request2::AUTH_DIGEST);
    try {
        $response = $request->send();
        if (200 == $response->getStatus()) {
            $json = $response->getBody();
        } else {
            echo 'Unexpected HTTP status: ' . $response->getStatus() . ' ' .
                 $response->getReasonPhrase();
        }
    } catch (HTTP_Request2_Exception $e) {
        echo 'Error: ' . $e->getMessage();
    }
    
    
    $obj = json_decode($json);
    $data = $obj->{'companies'}->{'company'};
    foreach ($data as $data) {
        $res[] = $data->{'nazev'};
    }
    $number = count($res);
    $sro_children = array(
        array("text"=>"Vydane", "leaf"=>true), array("text"=>"Prijate", "leaf"=>true)
    );
    for($i=0;$i<$number;$i++){
        $sro[] = array(
            "text"=>$res[$i],
            "expanded"=>true,
            "children"=>$sro_children,
        );
    };
    $result = array(
        'success'=>true,
        'root'=>array(
            array("text"=>"Home", "leaf"=>true),
            $sro
            
        )
    );
    echo json_encode($result);
    ?>
    This is my Menu store:
    Code:
    Ext.define('Statistics.store.Menu', {
        extend: 'Ext.data.TreeStore', 
        
        model : 'Statistics.model.Menu',
        storeId : 'Menu',
        autoLoad : true,
        autoSync: true,
        
        proxy : {
            type : 'ajax',
            api : {
                read : 'resources/scripts/get_menu.php?url=c.json'
            },
        
            reader : {
                type : 'json',
                root : 'root',
                successProperty : 'success',
            }
        
        },
        root : {
            expanded : true,
            loaded : true
        }
    });
    And my Menu model:
    Code:
    Ext.define('Statistics.model.Menu', {
        extend: 'Ext.data.Model',
        
        fields: [
            {name: 'text'     , type: 'string'},
            {name: 'db_name'  , type: 'string'},
            {name: 'leaf'      , type: 'boolean'},
            {name: 'expanded' , type: 'boolean', defaultValue: true},     
        ]
    
    
    });
    Could you please help with configuring the Menu store and model, if the json response is usable? And if not could you please give me any suggestions on changing the php script?

    Thanks for any reply

  2. The root is actually used to know what root in the tree so you shouldn't use it in the reader and your response. Also, your response has an object for the Home leaf and then has an array of nodes. It needs to be an object with children. Here is response that worked for me:

    Code:
    [
        {
            "text" : "Home",
            "leaf" : true
        },
        {
            "text"     : "Nested",
            "children" : [
                {
                    "text"     : "Moje Firma s.r.o.",
                    "expanded" : true,
                    "children" : [
                        {
                            "text" : "Vydane",
                            "leaf" : true
                        },
                        {
                            "text" : "Prijate",
                            "leaf" : true
                        }
                    ]
                },
                {
                    "text"     : "Já Živnostník",
                    "expanded" : true,
                    "children" : [
                        {
                            "text" : "Vydane",
                            "leaf" : true
                        },
                        {
                            "text" : "Prijate",
                            "leaf" : true
                        }
                    ]
                },
                {
                    "text"     : "Nezisková organizace",
                    "expanded" : true,
                    "children" : [
                        {
                            "text" : "Vydane",
                            "leaf" : true
                        },
                        {
                            "text" : "Prijate",
                            "leaf" : true
                        }
                    ]
                },
                {
                    "text"     : "Příspěvková organizace",
                    "expanded" : true,
                    "children" : [
                        {
                            "text" : "Vydane",
                            "leaf" : true
                        },
                        {
                            "text" : "Prijate",
                            "leaf" : true
                        }
                    ]
                },
                {
                    "text"     : "Moje Firma SK s.r.o.",
                    "expanded" : true,
                    "children" : [
                        {
                            "text" : "Vydane",
                            "leaf" : true
                        },
                        {
                            "text" : "Prijate",
                            "leaf" : true
                        }
                    ]
                }
            ]
        }
    ]
    And a sample tree store and panel:

    Code:
    var store = Ext.create('Ext.data.TreeStore', {
        proxy   : {
            type : 'ajax',
            url  : 'data/json.json'
        }
    });
    
    var tree = Ext.create('Ext.tree.Panel', {
        store       : store,
        rootVisible : false,
        useArrows   : true,
        frame       : true,
        title       : 'Tree',
        renderTo    : document.body,
        width       : 200,
        height      : 250
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Answers
    3470
    Vote Rating
    836
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The root is actually used to know what root in the tree so you shouldn't use it in the reader and your response. Also, your response has an object for the Home leaf and then has an array of nodes. It needs to be an object with children. Here is response that worked for me:

    Code:
    [
        {
            "text" : "Home",
            "leaf" : true
        },
        {
            "text"     : "Nested",
            "children" : [
                {
                    "text"     : "Moje Firma s.r.o.",
                    "expanded" : true,
                    "children" : [
                        {
                            "text" : "Vydane",
                            "leaf" : true
                        },
                        {
                            "text" : "Prijate",
                            "leaf" : true
                        }
                    ]
                },
                {
                    "text"     : "Já Živnostník",
                    "expanded" : true,
                    "children" : [
                        {
                            "text" : "Vydane",
                            "leaf" : true
                        },
                        {
                            "text" : "Prijate",
                            "leaf" : true
                        }
                    ]
                },
                {
                    "text"     : "Nezisková organizace",
                    "expanded" : true,
                    "children" : [
                        {
                            "text" : "Vydane",
                            "leaf" : true
                        },
                        {
                            "text" : "Prijate",
                            "leaf" : true
                        }
                    ]
                },
                {
                    "text"     : "Příspěvková organizace",
                    "expanded" : true,
                    "children" : [
                        {
                            "text" : "Vydane",
                            "leaf" : true
                        },
                        {
                            "text" : "Prijate",
                            "leaf" : true
                        }
                    ]
                },
                {
                    "text"     : "Moje Firma SK s.r.o.",
                    "expanded" : true,
                    "children" : [
                        {
                            "text" : "Vydane",
                            "leaf" : true
                        },
                        {
                            "text" : "Prijate",
                            "leaf" : true
                        }
                    ]
                }
            ]
        }
    ]
    And a sample tree store and panel:

    Code:
    var store = Ext.create('Ext.data.TreeStore', {
        proxy   : {
            type : 'ajax',
            url  : 'data/json.json'
        }
    });
    
    var tree = Ext.create('Ext.tree.Panel', {
        store       : store,
        rootVisible : false,
        useArrows   : true,
        frame       : true,
        title       : 'Tree',
        renderTo    : document.body,
        width       : 200,
        height      : 250
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    27
    Vote Rating
    0
    sveatlo is on a distinguished road

      0  

    Default


    Hi, thanks for your reply.
    I've changed the php script, so I get the following answer:
    Code:
    [
        {
            "text": "Home",
            "leaf": true
        },
        {
            "text": "Moje Firma s.r.o.",
            "dbName": "demo",
            "expanded": false,
            "children": [
                {
                    "text": "Vydane",
                    "leaf": true
                },
                {
                    "text": "Prijate",
                    "leaf": true
                }
            ]
        },
        {
            "text": "Já Živnostník",
            "dbName": "demo",
            "expanded": false,
            "children": [
                {
                    "text": "Vydane",
                    "leaf": true
                },
                {
                    "text": "Prijate",
                    "leaf": true
                }
            ]
        },
        {
            "text": "Nezisková organizace",
            "dbName": "demo",
            "expanded": false,
            "children": [
                {
                    "text": "Vydane",
                    "leaf": true
                },
                {
                    "text": "Prijate",
                    "leaf": true
                }
            ]
        },
        {
            "text": "Příspěvková organizace",
            "dbName": "demo",
            "expanded": false,
            "children": [
                {
                    "text": "Vydane",
                    "leaf": true
                },
                {
                    "text": "Prijate",
                    "leaf": true
                }
            ]
        },
        {
            "text": "Moje Firma SK s.r.o.",
            "dbName": "demo",
            "expanded": false,
            "children": [
                {
                    "text": "Vydane",
                    "leaf": true
                },
                {
                    "text": "Prijate",
                    "leaf": true
                }
            ]
        },
        {}
    ]
    But I can't figure out, how to configure the store and model, for this.

  5. #4
    Sencha User
    Join Date
    Sep 2012
    Posts
    27
    Vote Rating
    0
    sveatlo is on a distinguished road

      0  

    Default


    I've changed my json response to:
    Code:
    {    
    "success": true,
    "root":[
            {
                "text": "Home",
                "leaf": true,
                "dbName": "NULL",
                "children": []
            },
            {
                "text": "Moje Firma s.r.o.",
                "leaf": false,
                "expanded": false,
                "children": [
                    {
                        "text": "Vydane",
                        "leaf": true,
                        "dbName": "demo"
                    },
                    {
                        "text": "Prijate",
                        "leaf": true,
                        "dbName": "demo"
                    }
                ]
            },
            {
                "text": "Já Živnostník",
                "leaf": false,
                "expanded": false,
                "children": [
                    {
                        "text": "Vydane",
                        "leaf": true,
                        "dbName": "demo_de"
                    },
                    {
                        "text": "Prijate",
                        "leaf": true,
                        "dbName": "demo_de"
                    }
                ]
            },
            {
                "text": "Nezisková organizace",
                "leaf": false,
                "expanded": false,
                "children": [
                    {
                        "text": "Vydane",
                        "leaf": true,
                        "dbName": "demo_neziskova"
                    },
                    {
                        "text": "Prijate",
                        "leaf": true,
                        "dbName": "demo_neziskova"
                    }
                ]
            },
            {
                "text": "Příspěvková organizace",
                "leaf": false,
                "expanded": false,
                "children": [
                    {
                        "text": "Vydane",
                        "leaf": true,
                        "dbName": "demo_prispevkovka"
                    },
                    {
                        "text": "Prijate",
                        "leaf": true,
                        "dbName": "demo_prispevkovka"
                    }
                ]
            },
            {
                "text": "Moje Firma SK s.r.o.",
                "leaf": false,
                "expanded": false,
                "children": [
                    {
                        "text": "Vydane",
                        "leaf": true,
                        "dbName": "demo_sk"
                    },
                    {
                        "text": "Prijate",
                        "leaf": true,
                        "dbName": "demo_sk"
                    }
                ]
            }
        ]
    }
    It works, when it's saved in a static .json file, but when I set the store proxy to .php file, it doesn't work anymore.

    My store:
    Code:
    Ext.define('Statistics.store.Menu', {
        extend: 'Ext.data.TreeStore',
        model: 'Menu',
        autoLoad: true,
        autoSync: true,
        
        proxy   : {
            type : 'ajax',
            url  : 'resources/scripts/get_menu.php',
            reader: {
                type: 'json',
                root: 'root',
                successProperty: 'success'
            }
        }
        
        
    });
    And models:
    Code:
    Ext.define('Statistics.model.Menu', {
        extend: 'Ext.data.Model',
        
        fields: [
            {name: 'text', type: 'string'},
            {name: 'leaf', type: 'boolean'},
            {name: 'expanded', type: 'boolean', defaultValue: false} 
        ],
        
        hasMany: {model: 'Menu1', name: 'children'}
    
    
    });
    Code:
    Ext.define('Statistics.model.Menu1', {
        extend: 'Ext.data.Model',
        
        fields: [
            {name: 'text', type: 'string'},
            {name: 'leaf', type: 'boolean'},
            {name: 'db_name', type: 'string'}, 
        ],
        
        belongsTo: 'Menu1'
    
    
    });
    Thanks

Thread Participants: 1