UnCaught SyntaxError with extjs 4 - extjs

Question

I have been getting UnCaught SyntaxError : Unexpected Token : .
I'm really puzzled where this would come from. When i use the sample json it works
http://www.sencha.com/forum/topics-browse-remote.php
The issue maybe that i should use httpProxy. But i'm unsure how to incorporate this.
Ext.Loader.setConfig({ enabled: true });
Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager'
]);
Ext.onReady(function () {
Ext.tip.QuickTipManager.init();
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
'title', 'threadid'
],
idProperty: 'threadid'
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 50,
model: 'ForumThread',
remoteSort: true,
proxy: {
type: 'jsonp',
//url: 'http://www.sencha.com/forum/topics-browse-remote.php',
url: 'https://www.estore.localhost/usergrid/indexgrid',
reader: {
root: 'topics',
totalProperty: 'totalCount'
},
// sends single sort as multi parameter
simpleSortMode: true
},
sorters: [{
property: 'title',
direction: 'DESC'
}]
});
// pluggable renders
function renderTopic(value, p, record) {
return "test";
}
var pluginExpanded = true;
var grid = Ext.create('Ext.grid.Panel', {
width: 700,
height: 500,
title: 'ExtJS.com - Browse Forums',
store: store,
disableSelection: true,
loadMask: true,
viewConfig: {
id: 'gv',
trackOver: false,
stripeRows: false,
plugins: [{
ptype: 'preview',
bodyField: 'excerpt',
expanded: true,
pluginId: 'preview'
}]
},
// grid columns
columns: [{
// id assigned so we can apply custom css (e.g. .x-grid-cell-topic b { color:#333 })
// TODO: This poses an issue in subclasses of Grid now because Headers are now Components
// therefore the id will be registered in the ComponentManager and conflict. Need a way to
// add additional CSS classes to the rendered cells.
id: 'topic',
text: "Topic",
dataIndex: 'title',
flex: 1,
renderer: renderTopic,
sortable: false
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items: [
'-', {
text: 'Show Preview',
pressed: pluginExpanded,
enableToggle: true,
toggleHandler: function (btn, pressed) {
var preview = Ext.getCmp('gv').getPlugin('preview');
preview.toggleExpanded(pressed);
}
}]
}),
renderTo: 'topic-grid'
});
// trigger the data store load
store.loadPage(1);
});
Here is the json
{
"totalCount": "4",
"topics": [{
"threadid": "435",
"title": "55e38867-2b1e-4fc4-8179-5907c1c80136"
}, {
"threadid": "444",
"title": "4975db6c-d9cd-4628-a6e9-ca1d4815d28d"
}, {
"threadid": "529",
"title": "c778e5ea-eb79-42b1-8f13-7cba4600491f"
}, {
"threadid": "530",
"title": "a1024264-9eed-4784-ab91-cf2169151478"
}]
}

Answer 1

jsonP is a special technique for retrieving data from a server in a different domain. The main idea of jsonP is that
JsonPProxy injects a <script> tag into the DOM whenever an AJAX
request would usually be made
So imagine what would happen if proxy processed your json. It would inject <script> tag like this:
<sript>
{
"totalCount": "4",
"topics": [{
"threadid": "435",
"title": "55e38867-2b1e-4fc4-8179-5907c1c80136"
},
// ...
]
}
</script>
When this script is being executed it defenetly throws an exception.
So, like Xupypr MV has already written, you should wrap your outcoming-from-server string into:
myCallback(
//your json here
);
in this case JsonPProxy would inject <script> like this:
<sript>
myCallback({
"totalCount": "4",
"topics": [{
"threadid": "435",
"title": "55e38867-2b1e-4fc4-8179-5907c1c80136"
},
// ...
]
});
</script>
and it would be valid <script> tag.
Now you have to indicate in the store that you are using 'myCallback' as callback function (notice the callbackKey config):
var store = Ext.create('Ext.data.Store', {
// ...
proxy: {
type: 'jsonp',
url: 'https://www.estore.localhost/usergrid/indexgrid',
callbackKey: 'myCallback',
// ...
},
// ...
});
Check out docs for more info.

Answer 2

Notice, original (sencha example) url returns some extra data, not only json.
Make you response look like this:
Ext.data.JsonP.callback1({
"totalCount": "4",
"topics": [{
"threadid": "435",
"title": "55e38867-2b1e-4fc4-8179-5907c1c80136"
}, {
"threadid": "444",
"title": "4975db6c-d9cd-4628-a6e9-ca1d4815d28d"
}, {
"threadid": "529",
"title": "c778e5ea-eb79-42b1-8f13-7cba4600491f"
}, {
"threadid": "530",
"title": "a1024264-9eed-4784-ab91-cf2169151478"
}]
});

Answer 3

I was having the same problem and took me a while to figure it out.
I'm using Sencha Touch 2, which also implements the Ext.data.proxy.JsonP. The Extjs 4 proxy automatically creates a callback parameter each time it is sent to the server, e.g. callback1, callback2, sequentially. It is important to catch this parameter and return it with the json, otherwise the second time it is called it will complain not having a callback1 method.
The section "Implement on the server side" on this page
http://docs.sencha.com/touch/2-0/#!/api/Ext.data.proxy.JsonP
describes how to create callback with the JsonP. I suppose the original example http://www.sencha.com/forum/topics-browse-remote.php also does this.

Answer 4

I was also having the same problem, and was a mistake in server side code. I was using php file but not appended the callback going from frontend. So http://docs.sencha.com/touch/2-0/#!/api/Ext.data.proxy.JsonP is helpful which explains the structure of different types of serverside code for jsonp request
Thanks
Tapaswini