GeoEXT 1.1 The WMS Capabilities

by spydmobile

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>
<body>
    <div style="position: relative;">
        <div id="capgrid"></div>
        <div id="tree"></div>
        <div id="mappanel"></div>
    </div>
</body>

JavaScript

var store, tree, panel;
Ext.onReady(function () {

    // create a new WMS capabilities store
    store = new GeoExt.data.WMSCapabilitiesStore({
        url: "http://demo.opengeo.org/geoserver/ows?SERVICE=WMS&VERSION=1.1.1&REQUEST=GetCapabilities"
    });
    // load the store with records derived from the doc at the above url
    store.load();

    // create a grid to display records from the store
    var grid = new Ext.grid.GridPanel({
        title: "WMS Capabilities",
        store: store,
        cm: new Ext.grid.ColumnModel([{
            header: "Name",
            dataIndex: "name",
            sortable: true
        }, {
            id: "title",
            header: "Title",
            dataIndex: "title",
            sortable: true
        }]),
        sm: new Ext.grid.RowSelectionModel({
            singleSelect: true
        }),
        autoExpandColumn: "title",
        renderTo: "capgrid",
        height: 300,
        width: 350,
        floating: true,
        x: 10,
        y: 0,
        bbar: ["->", {
            text: "Add Layer",
            handler: function () {
                var record = grid.getSelectionModel().getSelected();
                if (record) {
                    var copy = record.copy();
                    copy.data["layer"] = record.getLayer();
                    copy.getLayer().mergeNewParams({
                        format: "image/png",
                        transparent: "true"
                    });
                    panel.layers.add(copy);
                    panel.map.zoomToExtent(
                    OpenLayers.Bounds.fromArray(copy.get("llbbox")));
                }
            }
        }]
    });

    // create a map panel
    panel = new GeoExt.MapPanel({
        renderTo: "mappanel",
        width: 350,
        height: 300,
        floating: true,
        x: 570,
        y: 0
    });

    tree = new Ext.tree.TreePanel({
        renderTo: "tree",
        root: new GeoExt.tree.LayerContainer({
           ...