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.

Ext & Forms

Ext is very powerful regarding forms. They can be very complex, but let’s make things simple, as in example 07_forms.html:

1
2
3
4
5
6
            var textInput = new Ext.form.TextField({
                    fieldLabel: "Firstname",
                    });
            var checkBox = new Ext.form.Checkbox({
                    fieldLabel: "Use",
                    });

add defined inputs to form:

1
2
3
4
5
6
7
8
9
            var form = new Ext.form.FormPanel({
                    title: "Form panel",
                    items: [textInput,checkBox],
                    width: 500,
                    height: 200,
                    frame: true,
                    renderTo: Ext.getBody(),
                    buttons: [{text:"Submit"}]
                });

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.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
            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:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
            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'}
                        ]
                    })

                });

Main Menu


Table Of Contents

Previous topic

Ext Panel

Next topic

Ext & Forms

This Page