Scott Penrose

ExtJS OpenLayers

Scott is an expert software developer with over 30 years experience, specialising in education, automation and remote data.

OSDC 2009 Talk - coming soon.

Source Code

This code is taken from the GeoExt example "Feature Grid" -

Data store

var store = new{
        layer: vecLayer,
        fields: [
            {name: 'name', type: 'string'},
            {name: 'elevation', type: 'float'}
        proxy: new{
            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(
        {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]

  • Talk