Results 1 to 4 of 4

Thread: TreeStore with proxy loading JSON

  1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    28
    Vote Rating
    1
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Sep 2012
    Posts
    28
    Vote Rating
    1
      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
    28
    Vote Rating
    1
      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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •