Sunday, 26 March 2017

EXTJS3 JSON GRID

In last posts i explained about the Array grid and grouping grid. Now i will explain about the Json Grid.

Ext.onReady(function () {
    var Grid1Store = new Ext.data.JsonStore({
        root: 'users',
        fields: ['id', 'name', 'email'],
        //autoLoad: true,
        data: {
            users: [{
                "id": 1,
                "name": "John Smith",
                "email": "jsmith@example.com"
            }, {
                "id": 2,
                "name": "Anna Smith",
                "email": "asmith@example.com"
            }, {
                "id": 3,
                "name": "Peter Smith",
                "email": "psmith@example.com"
            }, {
                "id": 4,
                "name": "Tom Smith",
                "email": "tsmith@example.com"
            }, {
                "id": 5,
                "name": "Andy Smith",
                "email": "asmith@example.com"
            }, {
                "id": 6,
                "name": "Nick Smith",
                "email": "nsmith@example.com"
            }]
        }
    });

    var onReadyFunction = function () {

        var grid = new Ext.grid.GridPanel({
            renderTo: Ext.getBody(),
            frame: true,
            title: 'Database',
            width: 500,
            height: 300,
            store: Grid1Store,
            columns: [{
                header: "Id",
                dataIndex: 'id'
            }, {
                header: "Name",
                dataIndex: 'name'
            }, {
                header: "Email",
                dataIndex: 'email'
            }]
        });

    }
    Ext.onReady(onReadyFunction);

});

No comments:

Post a Comment