如何从Extjs的网格中的URL加载数据？

Question

I have an url in initComponent by: this.myStore.getProxy().url = MY_URI + record.data.id; , where record is my selected record.

As a result from the GET url I get the following in Chrome's Network Response :

 {
     "result": {
        "id": "15",
        "height": "600",
        "width": "600",
        "squares": [{
            "id": 25,
            "height": 50,
            "width": 50
        }, {
            "id": 26,
            "height": 50,
            "width": 50
        }]
    }
}

Currently in the grid when: store: this.myStore and dataIndex: 'id' or 'dataIndex: 'height' or ' dataIndex: 'width' I don't get the values of the squares object, but the other ones, for example the Height column displays 600 and not 50 .

How can I display the squares' information in the grid?

Thank you.

Answer 1

Set your reader#rootProperty to 'result.squares'

Example:

Ext.create('Ext.data.Store', {
    storeId: 'squareStore',
    fields: ['id', 'height', 'width'],
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: 'data1.json', // your url here
        reader: {
            type: 'json',
            rootProperty: 'result.squares'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Square',
    store: Ext.data.StoreManager.lookup('squareStore'),
    columns: [{
        text: 'id',
        dataIndex: 'id'
    }, {
        text: 'Height',
        dataIndex: 'height',
        flex: 1
    }, {
        text: 'Width',
        dataIndex: 'width'
    }],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/236t