JSONP 不适用于 ExtJS 4 - 未捕获的类型错误：无法调用未定义的方法“子字符串”

Question

我被这段代码卡住了，我从 Youtube API 获取这个 json 格式的数据，如果我使用 type:'json' 它将失败，因为跨域的事情，但其他元素无论如何都会加载；然后，如果我将 type: 更改为 'jsonp' （这是 ExtJS API 上描述的语法），它会给我这个错误：“Uncaught TypeError: Cannot call method 'substring' of undefined” 我尝试设置 type:'anyotherstupidthing'同样的事情也会发生，那么会发生什么？

这是我当前的数据模型和我的商店：

Ext.define('Video', {
    extend: 'Ext.data.Model',
    fields: ['id', 'title']
});

myStore2 = Ext.create('Ext.data.Store', {
    model: 'Video',
    proxy: {
        type: 'ajax',
        url : 'http://gdata.youtube.com/feeds/api/videos?q=surfing&v=2&alt=jsonc',
        reader: {
            type: 'jsonp',
            root: 'items'
        }
    }
});

提前致谢！ 编。

Answer 1

JsonP 要求服务器将返回的数据包装在一个 JS 函数调用中。常见的约定是向服务器传递一个名为“回调”的参数，以允许使用唯一名称并避免客户端上的名称冲突。

在浏览器中调用 URL http://gdata.youtube.com/feeds/api/videos?q=surfing&v=2&alt=jsonc&callback=myCallback 表明 YouTube 支持这种约定：

Ext 通过 Ext.data.proxy.JsonP 代理类支持 JsonP。阅读器是标准的 JSON 阅读器，不是特定于 JsonP 的，您只需要考虑从服务器返回的数据结构（将 root 设置为 data.items）。

工作代码如下所示：

var myStore2 = Ext.create('Ext.data.Store', {
    model: 'Video',
    proxy: {
        type: 'jsonp',
        url : 'http://gdata.youtube.com/feeds/api/videos?q=surfing&v=2&alt=jsonc',
        reader: {
            type: 'json',
            root: 'data.items'
        }
    },
    listeners: {
        load: function(store, records) {
            Ext.each(records, function(rec) {
                console.log(rec.get('title'));
            });
        }
    },
    autoLoad: true
});