This example demonstrates how the Ext MVC application structure can be used with GeoExt and OpenLayers components.

A single object is used by three components: a vector layer in the map, a Ext.grid.Panel and a Ext.chart.Chart.

Move features around

You can drag the summit features around in the map and see the properties in the grid update.

Sort grid by columns

When you sort the grid by any columns, the chart gets updated.

Feature attribute editing

The 'Elevation' column is editable. Double-click on a record cell and input a new value. You'll see the chart change accordingly. The vector feature on the map may also change color if the new elevation changed range. (e < 2000 = "green", 2000 >= e < 2300 = "orange", >= 2300 = "red")

Select from Chart

When mouse hovering a node, a small tooltip appears. Clicking on the node also select the according row in the grid.

On store load

When the store is loaded, the map is recentered on the data extent.

Customized model

The summit model defines several customized fields that use the OpenLayers.Feature.Vector properties such as 'fid' and 'geometry'. See app/model/Summit.js.

Dev and built versions

simple-dev.html is the 'dev' version of the application where the Ext.Loader is used to fetch both Ext and GeoExt required files. simple.html is a 'built' version ready for production that was built using Sencha tools. See the Getting Started Guide - Deployment section in Sencha documentation.

The js files used by the 'dev' version are not minified so they are readable. See app.js and app directory.