ExtJS: May 2009 Archives

Given the following JSON data:

{"totalCount": 2,"items": [{"ID": 1,"Name": "First"},{"ID": 2,"Name": "Second"}]}

Note: ExtJS requires the above format for GridPanel data. The list of data must be wrapped in an object that contains a "total count" attribute, and the list itself is the data of an "items" attribute. These names of these attributes must match the "totalProperty" and "root" values in the JsonReader of the Store used by the GridPanel. See below.

Here's an ExtJS GridPanel that will load and display it:

ExampleGrid = Ext.extend(Ext.grid.GridPanel, { title: 'Example', border: true, frame: true, closable: true,

        initComponent: function() {

            var proxy = new Ext.data.HttpProxy({
                        url: 'http://host/url/to/get/JSON/data'
                    });

            var store = new Ext.data.Store({
                        remoteSort: true,
                        proxy: proxy,
                        baseParams: {
                            limit: 100
                        },
                        reader: new Ext.data.JsonReader({
                                    totalProperty: 'totalCount',
                                    root: 'items'
                                }, [{
                                            name: 'ID'
                                        }, {
                                            name: 'Name'
                                        }])
                    });

            Ext.apply(this, {
                        loadMask: true,
                        store: store,
                        colModel: new Ext.grid.ColumnModel([{
                                    header: 'ID',
                                    dataIndex: 'ID',
                                    sortable: true
                                }, {
                                    header: 'Name',
                                    dataIndex: 'Name',
                                    sortable: true
                                }])
                    });

            ExampleGrid.superclass.initComponent.apply(this, arguments);
        },

        onRender: function() {
            this.store.load();
            ExampleGrid.superclass.onRender.apply(this, arguments);
        }
    });

Ext.reg('ExampleGrid_panel', ExampleGrid);