JSONP не работает на ExtJS 4 - Uncaught TypeError: Невозможно вызвать метод 'substring' из неопределенного - PullRequest
1 голос
/ 21 сентября 2011

Я застрял с этим кодом, я получаю данные, отформатированные в json, из API YouTube, если я использую тип: 'json', то это не удастся из-за этой междоменной вещи, но другие элементы загружаются в любом случае; затем, если я изменю тип: на «jsonp» (это синтаксис, описанный в API ExtJS), это даст мне такую ​​ошибку: «Uncaught 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'
        }
    }
});

Заранее спасибо! Ed.

1 Ответ

3 голосов
/ 22 сентября 2011

JsonP требует, чтобы сервер упаковал возвращенные данные в вызов функции JS.Общий контракт заключается в передаче параметра с именем 'callback' на сервер, чтобы разрешить уникальные имена и избежать конфликта имен на клиенте.

Вызов URL http://gdata.youtube.com/feeds/api/videos?q=surfing&v=2&alt=jsonc&callback=myCallback в браузере показывает, что YouTube поддерживает это соглашение:

Ext поддерживает JsonP через прокси-класс Ext.data.proxy.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
});
...