Question

我是Sencha的新手。我得到网络中的数据响应，但数据没有加载到网格中。如果我尝试在代理中使用静态数据，网格加载这些值。请帮帮我。

请求网址： http://localhost:8080/list?_dc=1506420300660&page=1&start=0&limit=25&callback=Ext.data.JsonP.callback1

Response:

[{"name":"Thanos","email":"thanos@infgauntlet.com","phone":"5555555555"},{"name":"Spider Man","email":"peter.parker@thebugle.net","phone":"2125555555"},{"name":"Daredevil","email":"matt.murdock@nelsonandmurdock.org","phone":"2125555555"},{"name":"The Maker","email":"reed.richards@therealreedrichards.net","phone":"2125555555"},{"name":"Rocket","email":"rocket@starlordstinks.com","phone":"5555555555"},{"name":"Galactus","email":"galactus@worldeater.com","phone":"5555555555"},{"name":"Silver Surfer","email":"norrin.radd@zenn-la.gov","phone":"5555555555"},{"name":"Hulk","email":"bruce.banner@hulkout.org","phone":"2125555555"},{"name":"Squirrel Girl","email":"doreen.green@nannyservices.net","phone":"2125555555"},{"name":"Thor","email":"thor@odinson.gov","phone":"5555555555"}]



Store:
Ext.define('CRUD.store.Personnel', {
    extend: 'Ext.data.Store',

    alias: 'store.personnel',

    fields: ['name', 'email', 'phone'],

    // data: [
    //     { name: 'Jean Luc', email: "jeanluc.picard@enterprise.com", phone: "555-111-1111" },
    //     { name: 'Worf', email: "worf.moghsson@enterprise.com", phone: "555-222-2222" },
    //     { name: 'Deanna', email: "deanna.troi@enterprise.com", phone: "555-333-3333" },
    //     { name: 'Data', email: "mr.data@enterprise.com", phone: "555-444-4444" }
    // ],

    proxy: {
        headers: {
            "Content-Type": "application/json"
        },
        type: 'jsonp', //cross domain calls - json parser
        url: 'http://localhost:8080/list',
        reader: {
            type: 'json',
        },
        listeners: {

            load: function(store, records, success, operation, data) {
                // Ext.each(records, function(rec) {
                //     Ext.Msg.alert("test")
                //     console.log(rec.get('name'));
                // });

                console.log(JSON.stringify(success));
            },
            exception: function(proxy, response, operation) {
                // exception handling 
                console.log(response);
            }
        }
    },
    // proxy: {
    //     type: 'memory',
    //     reader: {
    //         type: 'json',
    //     }
    // },
    autoLoad: true,
});



View: List.js
/**
 * This view is an example list of people.
 */
Ext.define('CRUD.view.main.List', {
    extend: 'Ext.grid.Panel',

    xtype: 'home',

    requires: [
        'CRUD.store.Personnel'
    ],

    title: 'Heroes',

    store: {
        type: 'personnel'
    },

    columns: [
        { text: 'Name', dataIndex: 'name', flex: 1 },
        { text: 'Email', dataIndex: 'email', flex: 1 },
        { text: 'Phone', dataIndex: 'phone', flex: 1 }
    ],

    listeners: {
        select: 'onItemSelected',
    },
});

Answer 1

您正在使用JSONP代理，但您的响应是纯JSON。这不起作用，因为两者之间的数据格式不同。您必须切换到JSON代理，或将服务器返回的答案更改为JSONP格式。我建议你切换到JSON代理。

要使JSON跨域工作，您的服务器必须

接受使用OPTIONS方法发送的电话（所谓的＆＃34;飞行前请求＆＃34;）并返回状态200，
并在对航班前请求的调用以及实际的POST / GET呼叫上返回特殊标头。

如果您不退回，则可以从收到的错误消息中直接推断出您必须返回的标题。例如，

否＆＃39;访问控制 - 允许 - 来源＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:2020＆＃39;因此不允许访问。

表示您必须在服务器响应中添加标头# A tibble: 3 x 3 cyl data mean_mpg <dbl> <list> <dbl> 1 6 <tibble [7 x 10]> 19.74286 2 4 <tibble [11 x 10]> 26.66364 3 8 <tibble [14 x 10]> 15.10000。

失败在网格视图中显示商店中的Json数据（使用Sencha框架）

1 个答案: