PDA

View Full Version : Tree Store - how using nested json root node



dreebit-developer
19 Dec 2011, 6:08 AM
Hi guys,

I am using following json to load data to my tree panel:

{ "status": true,
"response": {
"vComp/GetTreePanel": [
{
"componentId": "1",
"parentId": "-1",
"componentType": "Site",
"attributeName": "Name",
"text": "X-Fab Agle",
"children": [
{
"componentId": "2",
"parentId": "1",
"componentType": "Department",
"attributeName": "Name",
"text": "Sample Text",
"leave": true
}
],
"cls": "Folder"
}
]
}
}

In my tree store I need to define to root node for the proxy.. and that is where I'm struggling. My root node for the Tree Panel should be "vComp/GetTreePanel". Unfortunately I just get to the key "response".

What do I need to do to get to a nested object? Do I need to use models for that? When how? I struggled with that for 4 hours.

Before I added the param-key "vComp/GetTreePanel" everything worked fine. I just want to create a better json structure for other purposes, as I may load more data in future.

This is my store (of course not working):



var requestJSON = [
{
"command": "vComp/GetTreePanel"
}
];


Ext.define('VSM.store.modul.vComponent.TreePanel', {
extend: 'Ext.data.TreeStore',
alias: 'widget.vComponentTreePanelStore',
model: 'VSM.model.modul.vComponent.TreePanelResult',
proxy: {
type: 'ajax',
actionMethods: {
read: 'POST'
},
extraParams: {
request : Ext.encode(requestJSON)
},
url: 'api',
reader: {
type: 'json',
root: "response"
}
},
root: {
text: 'VSM Management',
id: 'src',
expanded: true
},
folderSort: false,
sorters: [{
property: 'text',
direction: 'ASC'
}]
});


And my model for the data:


Ext.define("VSM.model.modul.vComponent.TreePanelModel", { extend: 'Ext.data.Model',
root : "response",
hasMany: {model: 'VSM.model.modul.vComponent.TreePanelResult', name: 'result'}


});


Ext.define("VSM.model.modul.vComponent.TreePanelResult", { extend: 'Ext.data.Model',
root:"vComp/GetTreePanel",
fields: [
{ name: "text", type: "string"},
{ name: "id", type: "string"},
{ name: "vComponentId", type : "string"},
{ name: "cls", type: "string"},
{ name: "leaf", type: "boolean" },
{ name: "description", type: "string" }
],
belongsTo: 'VSM.model.modul.vComponent.TreePanelModel'

});

Thank you in advance...

tobiu
19 Dec 2011, 6:15 AM
reader: {
type : 'json',
root : 'response',
record: 'vComp/GetTreePanel'
}

tvanzoelen
19 Dec 2011, 6:18 AM
Nested data in the Tree must be under the same root name, in your case vComp/GetTreePanel.

See http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.TreeStore section nested data.

For as far I know, you can only have one model for display in the tree.

skirtle
19 Dec 2011, 12:16 PM
I think to specify that root you'd normally need to do something like this:


root: 'response["vComp/GetTreePanel"]'

Unfortunately, for a TreeStore the root is also used to extract the children, so using a root like this will probably blow up complaining that something is undefined (try it anyway, just to confirm).

Rather than specifying a root, try overriding getResponseData:


reader: {
type: 'json',
getResponseData: function(response) {
var data = Ext.reader.data.Json.prototype.getResponseData.call(this, response);

return data.response['vComp/GetTreePanel'];
}
}

This is effectively implementing what you think of as 'root' manually, leaving the actual root to be children.

dreebit-developer
19 Dec 2011, 4:07 PM
@skirtle (http://www.sencha.com/forum/member.php?197255-skirtle):

Thank you! That really worked well and how I want it :)
I overrided the getResponseData method - which was the option I was looking for ... thanks again

@tvanzoelen (http://www.sencha.com/forum/member.php?32684-tvanzoelen)

you are also right .. I didn't know that the root nodes need to have the same keys ... thats why it couldn't work.

This is the working result:


Ext.define('VSM.store.modul.vComponent.TreePanel', { extend: 'Ext.data.TreeStore',
alias: 'widget.vComponentTreePanelStore',
model: 'VSM.model.modul.vComponent.TreePanelModel',
folderSort: true,
proxy: {
type: 'ajax',
actionMethods: {
read: 'POST'
},
extraParams: {
request : Ext.encode([ { "command": "vComp/GetTreePanel" } ])
},
url: 'api',
reader: {
type: 'json',
getResponseData: function(response) {
var jsonData = Ext.JSON.decode(response.responseText);
return jsonData['vComp/GetTreePanel'];
}
}
},
sorters: [{
property: 'text',
direction: 'ASC'
}]
});

tvanzoelen
20 Dec 2011, 12:08 AM
Ah learned something myself, the getResponseData I didn't know of.

But probably it will work just as well without that function and just set the root property of the reader.