UnCaught SyntaxError с extjs 4 - PullRequest
Новая
       3

UnCaught SyntaxError с extjs 4

0 голосов
/ 22 августа 2011

Я получаю UnCaught SyntaxError: Неожиданный токен:.

Я действительно озадачен, откуда это взялось. Когда я использую образец 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"
    }]

}

Ответы [ 4 ]

2 голосов
/ 23 августа 2011

jsonP - это особый метод получения данных с сервера в другом домене.Основная идея jsonP заключается в том, что

JsonPProxy внедряет тег <script> в DOM всякий раз, когда обычно выполняется запрос AJAX

Так что представьте, что произойдетесли прокси обработал ваш JSON.Он вставит тег <script> следующим образом: 

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

Когда этот скрипт выполняется, он генерирует исключение.

Таким образом, как Xupypr MV уже написал, вы должны обернутьСтрока исходящего с сервера в: 

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

Проверьте документы длябольше информации.

1 голос
/ 19 апреля 2012

У меня была такая же проблема, и мне потребовалось время, чтобы разобраться с ней.

Я использую Sencha Touch 2, который также реализует Ext.data.proxy.JsonP. Прокси Extjs 4 автоматически создает параметр обратного вызова каждый раз, когда он отправляется на сервер, например callback1, callback2, последовательно. Важно перехватить этот параметр и вернуть его с помощью json, иначе при втором вызове он будет жаловаться на отсутствие метода callback1.

Раздел «Реализация на стороне сервера» на этой странице http://docs.sencha.com/touch/2-0/#!/api/Ext.data.proxy.JsonP описывает, как создать обратный вызов с JsonP. Я полагаю, что оригинальный пример http://www.sencha.com/forum/topics-browse-remote.php также делает это.

1 голос
/ 22 августа 2011

Обратите внимание, оригинал (пример 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"
    }]
});
0 голосов
/ 29 марта 2013

У меня тоже была такая же проблема, и была ошибка в коде на стороне сервера.Я использовал php-файл, но не добавил обратный вызов, исходящий из внешнего интерфейса.Так что http://docs.sencha.com/touch/2-0/#!/api/Ext.data.proxy.JsonP является полезным, который объясняет структуру различных типов серверного кода для запроса jsonp

Спасибо Tapaswini

...