JSONP 在 ExtJS 4 上不起作用 - 未捕获的类型错误：无法调用未定义的方法'substring'

Question

我被这段代码卡住了，我从Youtube API得到这个json格式的数据，如果我使用type:'json'它会失败，因为跨域的东西，但其他元素加载;然后，如果我改变类型:到'jsonp'(这是ExtJS API上描述的语法)它会给我这个错误:"未捕获的TypeError:不能调用方法'substring'的未定义"我尝试设置类型:'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函数调用中。常见的契约是传递一个名为'callback'的参数给服务器，以允许唯一的名称，并避免客户端上的名称冲突。

在浏览器中调用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
});