UnCaught SyntaxError with extjs 4答案

【问题标题】：UnCaught SyntaxError with extjs 4UnCaught SyntaxError with extjs 4
【发布时间】：2011-08-22 16:40:43
【问题描述】：

我收到了 UnCaught SyntaxError : Unexpected Token : .

我真的很困惑这是从哪里来的。当我使用示例 json 时，它可以工作

http://www.sencha.com/forum/topics-browse-remote.php

问题可能是我应该使用 httpProxy。但我不确定如何合并这一点。

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

}

【问题讨论】：

标签： extjs extjs4

【解决方案1】：

jsonP 是一种用于从不同域中的服务器检索数据的特殊技术。 jsonP 的主要思想是

每当 AJAX 发生时，JsonPProxy 都会将 <script> 标签注入 DOM 通常会提出请求

所以想象一下如果代理处理你的 json 会发生什么。它会像这样注入<script>标签：

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

当这个脚本被执行时，它肯定会抛出一个异常。

所以，就像 Xupypr MV 已经写的那样，你应该将你的 outcoming-from-server 字符串包装成：

myCallback(
  //your json here
);

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

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

这将是有效的<script> 标签。

现在您必须在商店中指出您正在使用“myCallback”作为回调函数（注意 callbackKey 配置）：

var store = Ext.create('Ext.data.Store', {
    // ...
    proxy: {
        type: 'jsonp',
        url: 'https://www.estore.localhost/usergrid/indexgrid',
        callbackKey: 'myCallback',
        // ...
    },
    // ...
});

查看docs 了解更多信息。

【讨论】：

【解决方案2】：

注意，原始（sencha 示例）url 返回一些额外的数据，而不仅仅是 json。

让你的反应看起来像这样：

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

【讨论】：

我还看到了 sencha 示例中的第二个响应（我单击了下一页）返回 JSON 以 Ext.data.JsonP.callback2

【解决方案3】：

我遇到了同样的问题，我花了一段时间才弄清楚。

我正在使用 Sencha Touch 2，它也实现了 Ext.data.proxy.JsonP。 Extjs 4 代理每次发送到服务器时都会自动创建一个回调参数，例如回调1，回调2，顺序。捕获这个参数并用json返回很重要，否则第二次调用它会抱怨没有callback1方法。

此页面上的“在服务器端实现”部分 http://docs.sencha.com/touch/2-0/#!/api/Ext.data.proxy.JsonP 描述如何使用 JsonP 创建回调。我想原来的例子http://www.sencha.com/forum/topics-browse-remote.php 也是这样做的。

【讨论】：

【解决方案4】：

我也遇到了同样的问题，而且是服务器端代码错误。我正在使用 php 文件，但没有附加来自前端的回调。所以http://docs.sencha.com/touch/2-0/#!/api/Ext.data.proxy.JsonP 有助于解释 jsonp 请求的不同类型服务器端代码的结构

谢谢塔帕斯维尼

【讨论】：