ExtJS4 JSON数据未填充Ext.grid.Panel

Question

I've looked at numerous posts regarding this issue, but I'm still having problems for some reason. I have even tried to create a Panel with minimal data, but still no luck. This is really racking my brain. Below is the code that I'm working with:

Ext.onReady(function () {
    var proxy = new Ext.data.HttpProxy({
        url: path/to/app
        api: {
            load: path/to/app
        }
    });


    var reader = new Ext.data.JsonReader({
        successProperty : 'success',
        idProperty      : 'id',
        root            : 'data',
        fields          : [{name:'id', type: 'int'}]
    });

    var writer = new Ext.data.JsonWriter({
        encode: false,
        writeAllFields: true
    });

    var store = new Ext.data.Store({
        autoLoad : true,
        autoSync : true,
        root     : 'data',
        restful  : true,
        fields   : [{name: 'id'}],
        proxy    : proxy,
        reader   : reader,
        writer   : writer
    });

    Ext.create('Ext.grid.Panel', {
        renderTo : 'gadgetview',
        store    : store,
        columns  : [{
                       header    : 'ID',
                       text      : 'ID',
                       dataIndex : 'id',
                       width     : 50
                   }],
        height   : 200,
        width    : 450,
        title    : 'Example'
    });
});

The response from the server is:

{"data":[{"id":1}], "success":true}

I'm hoping that it's something that's readily apparent.

Answer 1

Your configurations are messed up. The reader/writer are properties on the proxy. The root is a property on the reader.

Ext.onReady(function() {

    var store = new Ext.data.Store({
        autoLoad: true,
        fields: [{
            name: 'id'
        }],
        proxy: {
            type: 'ajax',
            url: 'myurl',
            reader: {
                type: 'json',
                root: 'data'
            }
        }
    });

    Ext.create('Ext.grid.Panel', {
        renderTo: 'gadgetview',
        store: store,
        columns: [{
            header: 'ID',
            text: 'ID',
            dataIndex: 'id',
            width: 50
        }],
        height: 200,
        width: 450,
        title: 'Example'
    });
});