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

Question

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

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

Response: 

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



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

    alias: 'store.personnel', 

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

    // data: [ 
    //  { name: 'Jean Luc', email: "[email protected]", phone: "555-111-1111" }, 
    //  { name: 'Worf', email: "[email protected]", phone: "555-222-2222" }, 
    //  { name: 'Deanna', email: "[email protected]", phone: "555-333-3333" }, 
    //  { name: 'Data', email: "[email protected]", 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方法发送呼叫（所谓的“飞行​​前的请求”），并返回状态200，
• 和在呼叫前的请求以及实际的POST/GET呼叫都返回特殊的标头。

如果您不返回它们，则必须从您收到的错误消息中直接推导出您必须返回的标头。例如，

否请求的资源上存在“Access-Control-Allow-Origin”标头。因此不允许访问原产地'http://localhost:2020'。

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