Failing in Display the Json data from store in grid view (Using Sencha Framework)

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',
    },
});

Solution

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.