PDA

View Full Version : Have trouble with loading external JSON data file.



volek
18 May 2009, 5:07 AM
I'm trying to load data to the GridPanel from the JSON file from remote host.
This is my java script code:


Ext.onReady(function(){


var myStore = new Ext.data.JsonStore({
proxy: new Ext.data.ScriptTagProxy({
url: 'http://<externalHost>/documents.json'}),
reader: new Ext.data.JsonReader({
root: 'absDocuments',
fields: [ 'name', 'link', 'size', 'id', 'theme', 'initiator', 'complex', 'group',
'subgroup', 'docDate', 'status', 'finishDate', 'respExec' ]
})
});

try {
myStore.load();
} catch (e) {

}


var Grid1Store = new Ext.data.JsonStore({
root: 'absDocuments',
autoload: true,
fields: [ 'name', 'link', 'size', 'id', 'theme', 'initiator', 'complex', 'group',
'subgroup', 'docDate', 'status', 'finishDate', 'respExec' ],
data: {absDocuments: [
{ name: "something",
link: "something",
size: "something",
id: "something",
theme: "something",
initiator: "something",
complex: "something",
group: "something",
subgroup: "something",
docDate: "something",
status: "something",
finishDate: "something",
respExec: "something"
}
,
{ name: "something",
link: "something",
size: "something",
id: "something",
theme: "something",
initiator: "something",
complex: "something",
group: "something",
subgroup: "something",
docDate: "something",
status: "something",
finishDate: "something",
respExec: "something"
}

]
}
});


// create the grid
var grid = new Ext.grid.GridPanel({
store: myStore,
columns: [
{header: "Author", width: 120, dataIndex: 'name', sortable: true},
{header: "Title", width: 180, dataIndex: 'id', sortable: true},
{header: "Manufacturer", width: 115, dataIndex: 'theme', sortable: true},
],
renderTo:'form-main',
width:540,
height:200
});
});


I have static data there Grid1Stor and it renders OK. But when I'm trying to use date from the myStor, it doesn't load any data.
documents.json file contains the folloving data:


{absDocuments: [
{ name: "something",
link: "something",
size: "something",
id: "something",
theme: "something",
initiator: "something",
complex: "something",
group: "something",
subgroup: "something",
docDate: "something",
status: "something",
finishDate: "something",
respExec: "something"
}
,
{ name: "something",
link: "something",
size: "something",
id: "something",
theme: "something",
initiator: "something",
complex: "something",
group: "something",
subgroup: "something",
docDate: "something",
status: "something",
finishDate: "something",
respExec: "something"
}

]
}


It's the same with data in the Grid1Stor.

Why it renders from the static data and doesn't load from file?

Help me, please!

Animal
18 May 2009, 5:32 AM
Have you read (I mean really read) the API docs for ScriptTagProxy?

volek
18 May 2009, 5:43 AM
Nice answer!
Yes, I have read ScriptTagProxy API. I did it again right now. And my question is still actual.
If you could be so kind give me small tip, where is my fault?

Thanks.

Animal
18 May 2009, 5:46 AM
Yes. It was "nice". Because the answer is staring you in the face in the form of clear, precise documentation.

So the line



The content passed back from a server resource requested by a ScriptTagProxy must be executable JavaScript source code because it is used as the source inside a <script> tag.

Somehow passed you by in this "reading" excercise did it?

volek
18 May 2009, 8:27 PM
Animal, have you read my post?
I provided data which I'm trying to load with ScriptTagProxy. It is JSON data. As I know JSON is really in the Java Script executable format.
Easiest way to ansver on help question to say RTFM.
Thanks, Animal again. Please, don't answer me in RTFM maner.

Jangla
27 May 2009, 2:18 AM
You'll get a lot of that round here volek so get used to it :D

So anyway, to add to this thread (instead of having to start a new one), here's my issue: using scripttagproxy to return JSON to a JsonStore which will populate a gmap which is in turn inside a tab panel.

Here's the relevant tab panel listener to set up the store load:


...
listeners:{
activate : function(panel){
myMarkers = new Ext.data.JsonStore({
proxy : new Ext.data.ScriptTagProxy({
url : 'http://www.holiday-chateau.com/props-json.php'
}),
reader : new Ext.data.JsonReader({
root : 'Data',
fields : ['id', 'marker', 'lat', 'lng']
})
});
myMarkers.load({callback : loadMarkers});
}
}
....

function stcCallback1001(data) {
alert("Callback function has been called"); // this never fires....??
//myMarkers.load({callback : loadMarkers});
}

function loadMarkers(success, data){
myMap = Ext.getCmp('property-map');
//progressBar.start(maxNum);

myMarkers.each(function(rec){
var newMarker = new markObj(rec.data.marker);
myMap.addMarker(new GLatLng(rec.data.lat, rec.data.lng), newMarker);
});
myMap.zoomToMarkers();
}


I know, I know, it's all over the place but I think that's indicative of the mess we can get into when trying to work out some of this stuff! I spent all yesterday looking for a single, complete example of a JsonStore loading data via Scripttagproxy and couldn't find one.

As I understand it, I need a callback so when the store loads, something gets called to process the returned information. I actually had this working perfectly locally. Now I have to scale it up and make it work cross domain and I've got my cross-domain knickers in a twist and lost amongst the callbacks
Perhaps this is more complex than one would normally expect but I can't wrap my head round getting the callback correct. Everytime I think I'm close I'll get a "can't find function" error, despite the fact it's there and clearly visible.

So anyone want to help me get over the final hurdle?

Animal
27 May 2009, 2:23 AM
Sorry.

I have to differ with you on that.

If you refuse to actually read, and take meaning from a manual then you are never going to gain full understanding.

The manual section I pointed you at specifies



The content passed back from a server resource requested by a ScriptTagProxy must be executable JavaScript source code because it is used as the source inside a <script> tag.



So what you get in your document is



<script type="text/javascript">
{absDocuments: [
{ name: "something",
link: "something",
size: "something",
id: "something",
theme: "something",
initiator: "something",
complex: "something",
group: "something",
subgroup: "something",
docDate: "something",
status: "something",
finishDate: "something",
respExec: "something"
}
,
{ name: "something",
link: "something",
size: "something",
id: "something",
theme: "something",
initiator: "something",
complex: "something",
group: "something",
subgroup: "something",
docDate: "something",
status: "something",
finishDate: "something",
respExec: "something"
}

]
}
</script>


That's not going to do anything is it?

I even included example code showing what you must do in the server!!!


boolean scriptTag = false;
String cb = request.getParameter("callback");
if (cb != null) {
scriptTag = true;
response.setContentType("text/javascript");
} else {
response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (scriptTag) {
out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (scriptTag) {
out.write(");");
}


How, how, how can any more informatino from any other source help? I could reproduce tyhe API docs word for work, here. But why?

Jangla
27 May 2009, 3:10 AM
If you refuse to actually read, and take meaning from a manual then you are never going to gain full understanding.


I totally agree with that statement. However, I don't consider an API Reference to be a manual - a manual teaches why we do things so we can learn to apply concepts to alternative problems, an API reference tells you certain things should be in place for things to work and (generally speaking) ignores the why.

For example, I've now got my code to the point where it's not chucking any errors and appears to adhere to all the requirements of the API reference - still doesn't work though! (I'll update my code snippet in the example above to reflect the changes I've made to it).

Animal
27 May 2009, 3:13 AM
I didn't realize you had a problem with something. What do you have a problem with? You should start a thread.

Jangla
27 May 2009, 3:31 AM
Can do - I just though it more efficient to add to an existing thread which, apart from the panel type, exhibits the same issues as the thread starter.

Animal
27 May 2009, 4:08 AM
That's not a good idea. It causes cross-communication and confusion about who's talking to who, what solutions apply to who.

EZboy
7 Oct 2009, 1:58 PM
If someone has a complete example please post it !

I have


function stcCallback1001(data) {
alert("Callback function has been called");

}


This function called back and a json data object, but how do i put it in a grid ?

grid.load({params: {start: 0, limit: 100}}) does not show the data