在Grid View(使用Sencha Framework)中显示出从商店中显示的JSON数据失败

Question

我是Sencha的新手。IM在网络中获取数据的响应，但数据未加载在网格中。如果我尝试在代理中使用静态数据，则网格加载这些值。请帮助我。

请求URL：http：//localhost：8080/list？_dc = 1506420300660＆amp; page = 1＆amp; start = 0＆amp; limit = 0

Response:
[{"name":"Thanos","email":"[e-mail]","phone":"5555555555"},{"name":"Spider Man","email":"[e-mail]","phone":"2125555555"},{"name":"Daredevil","email":"[e-mail]","phone":"2125555555"},{"name":"The Maker","email":"[e-mail]","phone":"2125555555"},{"name":"Rocket","email":"[e-mail]","phone":"5555555555"},{"name":"Galactus","email":"[e-mail]","phone":"5555555555"},{"name":"Silver Surfer","email":"[e-mail]","phone":"5555555555"},{"name":"Hulk","email":"[e-mail]","phone":"2125555555"},{"name":"Squirrel Girl","email":"[e-mail]","phone":"2125555555"},{"name":"Thor","email":"[e-mail]","phone":"5555555555"}]

Store:
Ext.define('CRUD.store.Personnel', {
    extend: 'Ext.data.Store',
    alias: 'store.personnel',
    fields: ['name', 'email', 'phone'],
    // data: [
    //     { name: 'Jean Luc', email: "[e-mail]", phone: "555-111-1111" },
    //     { name: 'Worf', email: "[e-mail]", phone: "555-222-2222" },
    //     { name: 'Deanna', email: "[e-mail]", phone: "555-333-3333" },
    //     { name: 'Data', email: "[e-mail]", 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工作跨域，您的服务器将不得不

• 接受以选项方法（所谓的"飞行前请求"）和返回状态200，
发送的接听电话
• 并在飞行前请求以及实际帖子/获取电话中返回特殊标题。

如果您不返回的错误消息，可以直接从收到的错误消息中直接推导出标头。例如，

没有"访问控制"标题在请求的资源上存在。源'http：//localhost：2020'不允许访问。

表示您必须在服务器响应上添加标头Access-Control-Allow-Origin: http://localhost:2020。