未能在網格視圖中顯示商店中的Json數據（使用Sencha框架）

我是Sencha的新手。我在網絡中獲取數據的響應，但數據未加載到網格中。如果我嘗試在代理中使用靜態數據，網格加載這些值。請幫助我。未能在網格視圖中顯示商店中的Json數據（使用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', 
    }, 
});

來源

2017-09-26 santhosh karthik

您使用的是JSONP代理，但你的反應是純粹的JSON。這是行不通的，因爲兩者之間的數據格式不同。您必須切換到JSON代理，或者將服務器返回的答案更改爲JSONP格式。我建議你切換到一個JSON代理。

對於JSON工作跨域，你的服務器將不得不

接受OPTIONS方法發送呼叫（所謂的「飛行前的請求」），並返回狀態200，
和在呼叫前的請求以及實際的POST/GET呼叫都返回特殊的標頭。

如果您不返回它們，則必須從您收到的錯誤消息中直接推導出您必須返回的標頭。例如，

否請求的資源上存在「Access-Control-Allow-Origin」標頭。因此不允許訪問原產地'http://localhost:2020'。

表示您必須在服務器響應中添加標頭Access-Control-Allow-Origin: http://localhost:2020。

來源

2017-09-26 20:03:23 Alexander

感謝您的回覆。我已經將響應轉換爲jsonp格式。它的工作。非常感謝。我已經在節點js中改變了這種輸出響應：res.jsonp（result） –

未能在網格視圖中顯示商店中的Json數據（使用Sencha框架）

回答

相關問題