How do you create table columns and fields from json? (Dynamic Grid)

Question

I have a json file and I assume that I do not know anyting about the content. I do not know the model. However it is given in the json file the model, the data, and other information about the grid. How I'll create the columns etc in this way?

Answer 1

Stackoverflow is littered with questions very similar to this one. I worked through them all and did not find a definitive solution. However, most of the provided answers pointed me in the right direction. I'll give me best shot at putting all those suggestions together and making this clear for others:

Model: (Only shows 2 fields that will be in all JSON responses. Will still be overwritten)

Ext.define('RTS.model.TestsModel', {
    extend: 'Ext.data.Model',
    alias: 'model.TestsModel',

    fields: [
        {
            name: 'poll_date'
        },
        {
            name: 'poller'
        }
    ]
});

Store:

Ext.define('RTS.store.TestsStore', {
    extend: 'Ext.data.Store',
    alias: 'store.TestsStore',

    model: 'RTS.model.TestsModel',

    constructor: function(cfg) {
        var me = this;

        cfg = cfg || {};

        me.callParent([Ext.apply({
            autoLoad: false,
            proxy       : {
                type    : 'ajax',
                url     : 'tests.php',
                reader  : {
                    type    : 'json',
                    root    : 'tests',
                    successProperty : 'success'
                }
            },            
            storeId: 'tests-store'
        }, cfg)]);
    }
});

View: (The columns will be defined in each JSON response)

Ext.define('RTS.view.TestsView', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.TestsView',

    id: 'tests-view',
    title: 'Tests',
    emptyText: '',
    store: 'TestsStore',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            viewConfig: {

            },
            columns: [
            ]
        });

        me.callParent(arguments);
    }

});

Controller: (The controller does all the work in forcing the view and model to change based on the JSON response).

Ext.define('RTS.controller.TestsController', {
    extend: 'Ext.app.Controller',
    alias: 'controller.TestsController',

    stores: [
        'TestsStore'
    ],
    models: [
        'TestsModel'
    ],
    views: [
        'TestsView'
    ],

    init: function(application) {

        // When store changes, trigger an event on grid
        // to be handled in 'this.control'.  

        // NOTE : Ext JS does not allow control of 
        // non-component events.

        // Ext JS 4.2 beta will allow the controller
        // to detect non-component changes and handle them
        var testsStore = this.getStore('TestsStore');
        testsStore.on("metachange", metaChanged, this);
        function metaChanged(store, meta) {
            var grid = Ext.ComponentQuery.query('TestsView')[0];
            grid.fireEvent('metaChanged', store, meta);
        };


        this.control({
            "TestsView": {
                metaChanged: this.handleStoreMetaChange
            }
        });
    },

    /**
     * Will update the model with the metaData and
     * will reconfigure the grid to use the
     * new model and columns.
     */
    handleStoreMetaChange: function(store, meta) {
        var testsGrids = Ext.ComponentQuery.query('TestsView')[0];
        testsGrids.reconfigure(store, meta.columns);
    }

});

JSON Response: Your json response must have the "metaData" property included. It should define the fields just as you would on a static model and the view that would normally be defined to show the fields.

{
    "success": true,
    "msg": "",
    "metaData": {
        "fields": [
            {
                "name": "poller"
            },
            {
                "name": "poll_date"
            },
            {
                "name": "PING",
                "type": "int"
            },
            {
                "name": "SNMP",
                "type": "int"
            },
            {
                "name": "TELNET",
                "type": "int"
            },
            {
                "name": "SSH",
                "type": "int"
            },
            {
                "name": "all_passed"
            }
        ],
        "columns": [
            {
                "dataIndex": "poller",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "Poller"
            },
            {
                "dataIndex": "poll_date",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "Poll Date"
            },
            {
                "dataIndex": "PING",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "PING",
                "renderer": "RenderFailedTests"
            },
            {
                "dataIndex": "SNMP",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "SNMP",
                "renderer": "RenderFailedTests"
            },
            {
                "dataIndex": "TELNET",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "TELNET",
                "renderer": "RenderFailedTests"
            },
            {
                "dataIndex": "SSH",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "SSH",
                "renderer": "RenderFailedTests"
            },
            {
                "dataIndex": "all_passed",
                "flex": 1,
                "sortable": false,
                "hideable": false,
                "text": "All Passed",
                "renderer": "RenderFailedTests"
            }
        ]
    },
    "tests": [
        {
            "poller": "CHI",
            "poll_date": "2013-03-06",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        },
        {
            "poller": "DAL",
            "poll_date": "2013-03-06",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        },
        {
            "poller": "CHI",
            "poll_date": "2013-03-04",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        },
        {
            "poller": "DAL",
            "poll_date": "2013-03-04",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        },
        {
            "poller": "CHI",
            "poll_date": "2013-03-01",
            "PING": "1",
            "SNMP": "0",
            "TELNET": "1",
            "SSH": "0",
            "all_passed": "0"
        }
    ]
}

Answer 2

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Json -> Response MetaData section

in the grid don't forget to add this one columns: [], then under the store listeners: { 'metachange': function(store, meta) { myGrid.reconfigure(store, meta.columns); } } and the response json file should have metaData with fields and columns. Read Response MetaData section in the documentation for more info.