This example demonstrates how the Ext MVC application structure can be used with GeoExt and OpenLayers components.
A single GeoExt.data.FeatureGrid object is used by three components: a vector layer in the map, a Ext.grid.Panel and a Ext.chart.Chart.
You can drag the summit features around in the map and see the properties in the grid update.
When you sort the grid by any columns, the chart gets updated.
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")
When mouse hovering a node, a small tooltip appears. Clicking on the node also select the according row in the grid.
When the store is loaded, the map is recentered on the data extent.
The summit model defines several customized fields that use the OpenLayers.Feature.Vector properties such as 'fid' and 'geometry'. See app/model/Summit.js.
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.