PDA

View Full Version : TreeStore with JSONP



mjhaston
16 Jul 2014, 7:44 AM
Trying JSONP for the first time and I'm missing something! I think my issue is my JSONP response is not being read correctly? I'm basically making a call to the same program on two different systems.

My problem is the JSONP call returns my tree data and then calls itself two more times and duplicates nodes. Anyone see anything obvious in my code or data?

The first call to the JSONP job sends node = root. The next calls send node = schema. Over and over again.




Tree using normal AJAX call:


var prodTreeStore = Ext.create('Ext.data.TreeStore', {
proxy : {
type : 'ajax',
url : 'IP_A/dbutree001.pgm',
},
listeners : {
beforeload : function(store, operation, eOpts) {
var node = operation.node;
operation.params.schema = node.get('schema');
operation.params.table = node.get('table');
operation.params.attribute = node.get('attribute');
operation.params.file = node.get('file');
operation.params.node = node.get('id');
}
},
fields : ['text', 'id', 'schema', 'table', 'field', 'dataType', 'iconCls', 'leaf', 'attribute', 'file']
});



Normal JSON response:



[
{
"text": "SCHEMAS",
"id": "schemas",
"iconCls": "icon-server_database",
"expanded": true,
"children": [
{
"text": "#LIBRARY",
"id": "#LIBRARY",
"schema": "#LIBRARY",
"iconCls": "icon-database",
"expanded": false
},
{
"text": "#RPGLIB",
"id": "#RPGLIB",
"schema": "#RPGLIB",
"iconCls": "icon-database",
"expanded": false
}
]
}
]




Tree using JSONP call:


var devTreeStore = Ext.create('Ext.data.TreeStore', {
fields : ['text', 'id', 'schema', 'table', 'field', 'dataType', 'iconCls', 'leaf', 'attribute', 'file'],
proxy : {
type : 'jsonp',
url : 'IP_B/dbutree001.pgm',
reader : {
type : 'json',
root : 'data'
}
},
listeners : {
beforeload : function(store, operation, eOpts) {
var node = operation.node;
operation.params.schema = node.get('schema');
operation.params.table = node.get('table');
operation.params.attribute = node.get('attribute');
operation.params.file = node.get('file');
operation.params.node = node.get('id');
}
}
});




JSONP response:



Ext.data.JsonP.callback1({
"data": [
{
"text": "SCHEMAS",
"id": "schemas",
"iconCls": "icon-server_database",
"expanded": true,
"children": [
{
"text": "#LIBRARY",
"id": "#LIBRARY",
"schema": "#LIBRARY",
"iconCls": "icon-database",
"expanded": false
},
{
"text": "ABS",
"id": "ABS",
"schema": "ABS",
"iconCls": "icon-database",
"expanded": false
}
]
}
]
})

mjhaston
18 Jul 2014, 5:13 AM
Any help would be greatly appreciated. I think my JSONP response isn't formatted correctly. I see the tree load, but I only see the "SCHEMA" node. I think it's trampled on from there.

skirtle
18 Jul 2014, 6:01 AM
I believe the properties used for root and children must have the same name. I haven't verified this recently but that's how it 'worked' last time I checked.

As I understand it this is because someone noticed that they could reuse a lot of code if they treated the children property like a recursive root. It works fine in most cases but falls in a spectacular heap if you actually need to specify a data root.

mjhaston
18 Jul 2014, 2:48 PM
Thank you Skirtle. And if this helps anyone else I took Skirtle's advice and made this change to my JSON response and it worked.



Ext.data.JsonP.callback1({
"data": [
{
"text": "SCHEMAS",
"id": "schemas",
"iconCls": "icon-server_database",
"expanded": true,
"data": [
{
"text": "#LIBRARY",
"id": "#LIBRARY",
"schema": "#LIBRARY",
"iconCls": "icon-database",
"expanded": false
},
{
"text": "ABS",
"id": "ABS",
"schema": "ABS",
"iconCls": "icon-database",
"expanded": false
}
]
}
]
})