Feature Grid

This example shows an Ext grid loaded with features read through Ajax from a GeoJSON document. This example demonstrates how GeoExt components can help combine Ext and OpenLayers. The components used are: FeatureStore, FeatureReader and ProtocolProxy.

Code:

      
        var store = new GeoExt.data.FeatureStore({
            fields: [
                {name: 'name', type: 'string'},
                {name: 'elevation', type: 'float'}
            ],
            proxy: new GeoExt.data.ProtocolProxy({
                protocol: new OpenLayers.Protocol.HTTP({
                    url: "summits.json",
                    format: new OpenLayers.Format.GeoJSON()
                })
            }),
            autoLoad: true
        });
        var grid = new Ext.grid.GridPanel({
            store: store,
            height: 250,
            width: 320,
            columns: [{
                header: "Name",
                width: 200,
                dataIndex: "name"
            }, {
                header: "Elevation",
                width: 100,
                dataIndex: "elevation"
            }],
            renderTo: "grid"
        });