Displaying json response in a grid Ext js

unhappy_vapor :

I am trying to display the following json response in grid columns.

{"day":8,"month":7,"changehistory":8,"expire":"120"}

I have designed my model as below

...
extend: 'Ext.data.Model',
    fields: [{
        name: 'day', type: 'int'
    }, {
        name: 'month', type: 'int'
    }, {
        name: 'changehistory', type:'string'
    }, {
        name: 'expire', type:'int'
    }]
...

I have a store that uses this model as below

model: 'expiration model',
    proxy: {
        type: 'ajax',
        useDefaultXhrHeader: false,
        actionMethods: { read: "POST" },
        limitParam: false,
        startParam: false,
        pageParam: false,
        url: UrlManager.buildURL(expiration_get),
        reader: {
            type: 'json'
        }
    }

And, my grid looks like this

columns: [
        {
            dataIndex: 'day',
            header: 'day' ,
            flex: 1,
            align: 'right',
            minWidth: 125
        }, {
            dataIndex: 'month',
            header: 'month',
            flex: 1,
            align: 'right',
            minWidth: 125
        }, {
            dataIndex: 'changehistory',
            header: 'changehistory',
            flex: 1,
            align: 'right',
            minWidth: 125
        }, {
            dataIndex: 'expire',
            header: 'expire',
            flex: 1,
            align: 'right',
            minWidth: 125
        }]

But currently, grid is displaying four columns with respective values. I want to display information in the following format:

pvlt :

You can use transform function for reader in your store. Slightly changing the columns and model you will get the desired result

fiddle