问题
I'm new to Sencha. Im getting the response of data in network, But the data is not loaded in grid. If i try to use static data in proxy, grid loading those values. Please help me on this.
Request URL: 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',
},
});
回答1:
You are using a JSONP proxy, but your response is pure JSON. This cannot work, since the data formats are different between the two. You have to either switch to a JSON proxy, or change the answer returned by the server to JSONP format. I would suggest you switch to a JSON proxy.
For JSON to work cross-domain, your server will have to
- accept calls sent with the OPTIONS method (so-called "pre-flight requests") and return status 200,
- and return special headers on both the call to the pre-flight request as well as the actual POST/GET call.
The headers that you have to return can be deduced straightforward from the error messages you receive if you don't return them. For example,
No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:2020' is therefore not allowed access.
means that you have to add a header Access-Control-Allow-Origin: http://localhost:2020 on the server response.
来源：https://stackoverflow.com/questions/46423756/failing-in-display-the-json-data-from-store-in-grid-view-using-sencha-framework