GeoEXT 1.1 Tree Work

Use of trees and children

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>
    <h1>Layer Tree Example</h1>
        <p>This is example that shows how create a TreePanel with layers
        from a map.  GeoExt does not provide a LayerTree component.  Instead,
        to create a tree with nodes that represent layers, create a tree with
        a LayerContainer at the root, or add LayerNodes directly. See also the
        <a href="tree.html">tree</a> example for a more complex tree
        configuration</p>

        <p>Note that the js is not minified so it is readable.
        See <a href="layercontainer.js">layercontainer.js</a>.</p>

        <div style="position: relative;">
            <div id="capgrid"></div>
            <div id="tree"></div>
            <div id="mappanel"></div>
        </div>

JavaScript

/**
 * Copyright (c) 2008-2011 The Open Source Geospatial Foundation
 * 
 * Published under the BSD license.
 * See http://svn.geoext.org/core/trunk/geoext/license.txt for the full text
 * of the license.
 */

/** api: example[layercontainer]
 *  Layer Tree
 *  ----------
 *  Create a layer tree with a LayerContainer.
 */

var store, tree, panel;
Ext.onReady(function() {
    
    // create a new WMS capabilities store
    store = new GeoExt.data.WMSCapabilitiesStore({
        url: "data/wmscap.xml"
    });
    // 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();
                    // Ext 3.X does not allow circular references in objects passed 
                    // to record.set 
                    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"))
                    );
                }
            }
        }]
    });
    
   ...