PDA

View Full Version : Problem with root - TreePanel / TreeStore



fabio.policeno
21 Oct 2013, 6:51 AM
Hello,


I'm trying to display the data in the json tree but without success . If I remove the "Data" of json and let the "Items" in the level above, works , but the problem is in the "Data", even defining it as root , I can not populate the tree:

data:

{
"Data": {
"Items": [
{
"Code": "processed",
"Items": null
},
{
"Code": "posted",
"Items": [
{
"Code": "unchanged",
"Items": null
},
{
"Code": "corrected",
"Items": null
},
{
"Code": "doubtful",
"Items": null
},
{
"Code": "negativescore",
"Items": null
},
{
"Code": "blacklisted",
"Items": null
}
]
},
{
"Code": "blocked",
"Items": [
{
"Code": "doubtful",
"Items": null
},
{
"Code": "negativescore",
"Items": null
},
{
"Code": "blacklisted",
"Items": null
}
]
},
{
"Code": "returned",
"Items": [
{
"Code": "absent",
"Items": null
},
{
"Code": "addresschanged",
"Items": null
},
{
"Code": "cancelledpostalbox",
"Items": null
},
{
"Code": "deceased",
"Items": null
},
{
"Code": "inexistentnumber",
"Items": null
},
{
"Code": "insuficientaddress",
"Items": null
},
{
"Code": "invalidpostalcode",
"Items": null
},
{
"Code": "refused",
"Items": null
},
{
"Code": "unoficialnumber",
"Items": null
},
{
"Code": "unsought",
"Items": null
},
{
"Code": "unknown",
"Items": null
},
{
"Code": "other",
"Items": null
}
]
}
]
}
}


code:

Ext.define('JobDetails', {
extend: 'Ext.data.Model',
fields: [
{name: 'Code', type: 'string'},
{name: 'leaf', type: 'boolean', mapping: 'Items', convert: function(v, rec) {
return !Ext.isArray(v) && rec.raw.id !== 'root';
}}
],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'Data'
}
}
});


Ext.onReady(function() {
var store = Ext.create('Ext.data.TreeStore', {
model: 'JobDetails',
defaultRootProperty: 'Items'
});


Ext.create('Ext.tree.Panel', {
height: 400,
renderTo: Ext.getBody(),
useArrows: true,
rootVisible: false,
store: store,
columns: [{
xtype: 'treecolumn',
dataIndex: 'Code',
flex: 1
}]
});
});



screen:
http://f.cl.ly/items/3z3I1g163Q1y3p1r0f27/Captura%20de%20Tela%202013-10-21%20%C3%A0s%2012.41.47.png


Thank's!

tvanzoelen
21 Oct 2013, 1:01 PM
Have you tried to set the record property of the reader?



reader: {
type: 'json',
root: 'Items',
record: 'Data'
}


I was used to set displayField on the tree.. in your case 'Code'. But maybe that is not needed anymore because you have set dataIndex in the column.

fabio.policeno
21 Oct 2013, 1:14 PM
Don't show any node in treepanel :(

tvanzoelen
21 Oct 2013, 1:33 PM
Well just try skirtles approach then.... :)

http://www.sencha.com/forum/showthread.php?163081-Tree-Store-how-using-nested-json-root-node



reader: {
type: 'json',
root: 'Items',
getResponseData: function(response) {
var data = Ext.reader.data.Json.prototype.getResponseData.call(this, response);
return data.response['Data'];
}
}

fabio.policeno
21 Oct 2013, 1:46 PM
Uncaught TypeError: Cannot read property 'data' of undefined buffer-rendered-treegrid.js:16 (http://localhost/extjs/examples/tree/buffer-rendered-treegrid.js)

Ext.define.proxy.reader.getResponseDatabuffer-rendered-treegrid.js:16 (http://localhost/extjs/examples/tree/buffer-rendered-treegrid.js)
Ext.cmd.derive.readext-all.js:21 (http://localhost/extjs/ext-all.js)
Ext.cmd.derive.processResponseext-all.js:21 (http://localhost/extjs/ext-all.js)
(anonymous function)ext-all.js:21 (http://localhost/extjs/ext-all.js)
Ext.apply.callbackext-all.js:21 (http://localhost/extjs/ext-all.js)
Ext.cmd.derive.onCompleteext-all.js:21 (http://localhost/extjs/ext-all.js)
Ext.cmd.derive.onStateChangeext-all.js:21 (http://localhost/extjs/ext-all.js)
(anonymous function)

tvanzoelen
21 Oct 2013, 1:58 PM
Its probably data.Data that the function should return. Response was part of the other post. I copied to quickly.

Else set a breakpoint to see what the response contains and return the Data part.

fabio.policeno
22 Oct 2013, 1:36 AM
...
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json'
},


extractResponseData: function (response) {
return Ext.decode(response.responseText).Data;
}
}
...