-
12 Dec 2012 11:40 AM #1Sencha User
- Join Date
- Sep 2012
- Posts
- 24
- Vote Rating
- 0
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:
It's generated by a php script, but I'm not sure, if it is usable.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 } ] } ] ] }
Here's the php script:
This is my Menu store: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); ?>
And my Menu model: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 } });
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?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}, ] });
Thanks for any reply
-
Best Answer Posted by mitchellsimoens
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:
And a sample tree store and panel: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 } ] } ] } ]
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 });
-
14 Dec 2012 6:47 AM #2Sencha - Senior Forum Manager
- Join Date
- Mar 2007
- Location
- St. Louis, MO
- Posts
- 33,684
- Vote Rating
- 435
- Answers
- 3111
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:
And a sample tree store and panel: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 } ] } ] } ]
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
________________
http://www.JSONPLint.com - Source to lint your JSONP!
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 almost in print!
When posting code, please use BBCode's CODE tags.
-
17 Dec 2012 9:36 AM #3Sencha User
- Join Date
- Sep 2012
- Posts
- 24
- Vote Rating
- 0
Hi, thanks for your reply.
I've changed the php script, so I get the following answer:
But I can't figure out, how to configure the store and model, for this.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 } ] }, {} ]
-
18 Dec 2012 11:26 AM #4Sencha User
- Join Date
- Sep 2012
- Posts
- 24
- Vote Rating
- 0
I've changed my json response to:
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.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" } ] } ] }
My store:
And models: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' } } });
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'} });ThanksCode: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' });
Reply With Quote
