OSDC 2009 Talk - coming soon.

Source Code

This code is taken from the GeoExt example "Feature Grid" - http://dev.geoext.org/trunk/geoext/examples/feature-grid.html

Data store

var store = new GeoExt.data.FeatureStore({
        layer: vecLayer,
        fields: [
            {name: 'name', type: 'string'},
            {name: 'elevation', type: 'float'}
        ],
        proxy: new GeoExt.data.ProtocolProxy({
            protocol: new OpenLayers.Protocol.HTTP({
                url: "data/summits.json",
                format: new OpenLayers.Format.GeoJSON()
            })
        })
});

A grid

var gridPanel = new Ext.grid.GridPanel({
    store: store,
    columns: [{
      header: "Name", width: 200, dataIndex: "name"
    }, {
      header: "Ele", width: 100, dataIndex: "elevation"
    }]
);

Openlayers Map

    var map = new OpenLayers.Map();
    var wmsLayer = new OpenLayers.Layer.WMS(
        "vmap0",
        "http://labs.metacarta.com/wms/vmap0",
        {layers: 'basic'}
    );
    var vecLayer = new OpenLayers.Layer.Vector("vector");
    map.addLayers([wmsLayer, vecLayer]);

A map

    mapPanel = new GeoExt.MapPanel({
        title: "Map",
        region: "center",
        height: 400,
        width: 600,
        map: map,
        center: new OpenLayers.LonLat(5, 45),
        zoom: 6
    });

Join it together

    mainPanel = new Ext.Panel({
        renderTo: "mainpanel",
        layout: "border",
        height: 400,
        width: 920,
        items: [mapPanel, gridPanel]
    });