Grids and Data in Ext

With Grids it is possible to display and for example edit data, like you are used to in standard spreadsheet editor.

First you have to define data Ext.data.Store, which can be either SimpleStore, XML or JSON or some other type, see our 06_data.html example.

            var data = [
                [1,"Graham","Chapman"],
                [2,"John","Cleese"],
                [3,"Terry","Gilliam"],
                [4,"Eric","Edle"],
                [5,"Terry","Jones"],
                [6,"Michael","Palin"]
            ];

            // define the Array store
            var store = new Ext.data.ArrayStore({
                    data: data,
                    fields: ["id","firstname","surname"]
                });

Add the store to Grid panel with specified column model:

            var gridPanel = new Ext.grid.GridPanel({
                    title: "Data panel",
                    store: store,
                    width: 500,
                    height: 500,
                    renderTo: Ext.getBody(),

                    // column model is a bit complicated
                    colModel: new Ext.grid.ColumnModel({
                        defaults: {
                            width: 120,
                            sortable: true
                        },
                        columns: [
                            {id: 'id', header: 'ID', width: 200, sortable: true, dataIndex: 'id'},
                            {header: 'Firstname', dataIndex: 'firstname'},
                            {header: 'Surname', dataIndex: 'surname'}
                        ]
                    })

                });