UnCaught SyntaxError with extjs 4

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",
          开发者_StackOverflow社区  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"
    }]

}

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.

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"
    }]
});

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.

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