extjs 4未捕获的SyntaxError [英] UnCaught SyntaxError with extjs 4

问题描述

我一直在收到UnCaught SyntaxError:意外令牌:.

I have been getting UnCaught SyntaxError : Unexpected Token : .

我真的很困惑这将来自何处.当我使用示例json时

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

也许我应该使用httpProxy的问题.但是我不确定如何将其合并.

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

这是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 是特殊的从不同域中的服务器检索数据的技术. jsonP的主要思想是

jsonP is a special technique for retrieving data from a server in a different domain. The main idea of jsonP is that

只要AJAX，JsonPProxy就会将<script>标记注入DOM中 通常会提出要求

JsonPProxy injects a <script> tag into the DOM whenever an AJAX request would usually be made

因此，想象一下如果代理处理了您的json会发生什么.它将像这样注入<script>标签:

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.

因此，就像Xupypr MV已经编写的那样，您应该将服务器的输出字符串包装到:

So, like Xupypr MV has already written, you should wrap your outcoming-from-server string into:

myCallback(
  //your json here
);

在这种情况下，JsonPProxy会像这样注入<script>:

in this case JsonPProxy would inject <script> like this:

<sript>
myCallback({
    "totalCount": "4",
    "topics": [{
        "threadid": "435",
        "title": "55e38867-2b1e-4fc4-8179-5907c1c80136"
    },
    // ...
    ]
});
</script>

，它将是有效的<script>标签.

现在，您必须在商店中指出您正在使用"myCallback"作为回调函数(请注意callbackKey配置):

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',
        // ...
    },
    // ...
});

查看文档有关更多信息.

这篇关于extjs 4未捕获的SyntaxError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！