GeoExt Map and Grid with WFS
HTML
<script src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css">
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-3.4.0/examples/shared/examples.css">
<script src="http://www.openlayers.org/api/2.11/OpenLayers.js"></script>
<script src="http://api.geoext.org/1.1/script/GeoExt.js"></script>
<div id="mainpanel"></div>
GeoExt Map and Grid from WFS-Service
JavaScript
var mapPanel, store, gridPanel, mainPanel;
Ext.onReady(function () {
// create map instance
var map = new OpenLayers.Map();
var wmsLayer = new OpenLayers.Layer.WMS(
"vmap0",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {
layers: 'basic'
});
// create vector layer
var vecLayer = new OpenLayers.Layer.Vector("vector");
map.addLayers([wmsLayer, vecLayer]);
// create map panel
mapPanel = new GeoExt.MapPanel({
title: "Map",
region: "center",
height: 400,
width: 300,
map: map,
center: new OpenLayers.LonLat(5, 45),
zoom: 6
});
// create feature store, binding it to the vector layer
store = new GeoExt.data.FeatureStore({
layer: vecLayer,
fields: [{
name: 'cat',
type: 'string'
}, {
name: 'str1',
type: 'string'
}],
/*
proxy: new GeoExt.data.ProtocolProxy({
protocol: new OpenLayers.Protocol.HTTP({
url: "http://api.geoext.org/1.1/examples/data/summits.json",
format: new OpenLayers.Format.GeoJSON()
})
})
*/
proxy: new GeoExt.data.ProtocolProxy({
protocol: new OpenLayers.Protocol.WFS({
url: "http://demo.opengeo.org/geoserver/wfs",
featureType: "bugsites",
featureNS: "http://opengeo.org",
srsName: "EPSG:4326",
version: "1.1.0"
})
}),
autoLoad: true
});
// create grid panel configured with feature store
gridPanel = new Ext.grid.GridPanel({
title: "Feature Grid",
region: "east",
store: store,
width: 320,
columns: [{
header: "Category",
width: 200,
dataIndex: "cat"
}, {
header: "Str1",
width: 100,
dataIndex: "str1"
}],
...