PDA

View Full Version : TreeStore with proxy loading JSON



sveatlo
12 Dec 2012, 11:40 AM
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:


{
"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:


<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:


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:


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

mitchellsimoens
14 Dec 2012, 6:47 AM
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:


[
{
"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:


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
});

sveatlo
17 Dec 2012, 9:36 AM
Hi, thanks for your reply.
I've changed the php script, so I get the following answer:


[
{
"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.

sveatlo
18 Dec 2012, 11:26 AM
I've changed my json response to:


{
"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:


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:


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'}


});



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