[Commits] r983 - apps/opengeo/geoexplorer/trunk/lib

commits at geoext.org commits at geoext.org
Thu Jun 4 20:02:00 CEST 2009


Author: dwins
Date: 2009-06-04 20:02:00 +0200 (Thu, 04 Jun 2009)
New Revision: 983

Modified:
   apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js
Log:
Add add/remove buttons to the base layer list, have separately themed layer selection window for it.


Modified: apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js
===================================================================
--- apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js	2009-06-04 16:57:55 UTC (rev 982)
+++ apps/opengeo/geoexplorer/trunk/lib/GeoExplorer.js	2009-06-04 18:02:00 UTC (rev 983)
@@ -306,6 +306,16 @@
         });
         this.on("ready", function() {addLayerButton.enable();});
 
+        var addBaseLayerButton = new Ext.Button({
+            tooltip : "Add Base Layers",
+            disabled: true,
+            iconCls: "icon-addlayers",
+            handler: this.showBaseCapabilitiesGrid,
+            scope: this
+        });
+        this.on("ready", function() {addBaseLayerButton.enable();});
+
+
         //allow user to select only one layer at a time
         //by sharing selection model
         var selectionModel = new Ext.tree.DefaultSelectionModel({
@@ -316,6 +326,22 @@
             }
         });
 
+        var baseSelectionModel = new Ext.tree.DefaultSelectionModel({
+            listeners: {
+                beforeselect: function() {
+                    removeBaseLayerAction.enable();
+                }
+            }
+        });
+
+        var baseSelectionModel = new Ext.tree.DefaultSelectionModel({
+            listeners: {
+                beforeselect: function() {
+                    removeBaseLayerAction.enable();
+                }
+            }
+        });
+
         var removeLayerAction = new Ext.Action({
             text: "Remove Layer",
             iconCls: "icon-removelayers",
@@ -335,10 +361,28 @@
             }
         });
 
+        var removeBaseLayerAction = new Ext.Action({
+            text: "Remove Base Layer",
+            iconCls: "icon-removelayers",
+            disabled: true,
+            tooltip: "Remove Base Layer",
+            handler: function() {
+                var node = baseSelectionModel.getSelectedNode();
+                if(node && node.layer) {
+                    var layer = node.layer;
+                    var store = node.layerStore;
+                    var record = store.getAt(store.findBy(function(record) {
+                        return record.get("layer") === layer;
+                    }))
+                    store.remove(record);
+                    removeBaseLayerAction.disable();
+                }
+            }
+        });
+
         var layerTreeConfig = {
             border:false,
             rootVisible: false,
-            selModel: selectionModel,
             autoScroll: true,
             split: true,
             listeners: {
@@ -371,6 +415,12 @@
         var overlayLayerTree = new Ext.tree.TreePanel(
             Ext.apply(
                 {
+                    title: "Layers",
+                    tbar: [
+                        addLayerButton,
+                        Ext.apply(new Ext.Button(removeLayerAction), {text: ""})
+                    ],
+                    selModel: selectionModel,
                     root: new GeoExplorer.GroupContainer({
                         background: false,
                         layerStore: this.layerStore
@@ -385,27 +435,43 @@
         var baseLayerTree = new Ext.tree.TreePanel(
             Ext.apply(
                 {
+                    title: 'Base Layers',
+                    tbar: [
+                        addBaseLayerButton,
+                        Ext.apply(new Ext.Button(removeBaseLayerAction), {text: ""})
+                    ],
                     root: new GeoExplorer.GroupContainer({
                         background: true,
                         layerStore: this.layerStore
                     }), 
+                    selModel: baseSelectionModel,
                     ddGroup: "BaseLayerDD",
-                    title: 'Base Layers',
-                    height: 120,
-                    region: 'south'
-                }, 
-                layerTreeConfig));
+                    height: 160,
+                    region: 'south',
+                    contextMenu: new Ext.menu.Menu({
+                    items: [
+                        {
+                            text: "Zoom to Layer Extent",
+                            iconCls: "icon-zoom-visible",
+                            handler: function(){
+                                var node = selectionModel.getSelectedNode();
+                                if(node && node.layer) {
+                                    this.map.zoomToExtent(node.layer.restrictedExtent);
+                                }
+                            },
+                            scope: this
+                        },
+                        removeBaseLayerAction
+                    ]
+            })
+        }, 
+        layerTreeConfig));
 
         var layersContainer = new Ext.Panel({
             border: false,
             region: 'center',
-            title: "Layers",
             layout: 'border',
             items: [overlayLayerTree, baseLayerTree],
-            tbar: [
-                addLayerButton,
-                Ext.apply(new Ext.Button(removeLayerAction), {text: ""})
-            ]
         });
 
         var legendContainer = new GeoExt.LegendPanel({
@@ -623,7 +689,7 @@
 
         var firstSource = this.layerSources.getAt(0);
 
-        var capGridPanel = new GeoExplorer.CapabilitiesGrid({
+        var capGridConfig = {
             store: firstSource.data.store,
             mapPanel : this.mapPanel,
             layout: 'fit',
@@ -635,9 +701,12 @@
                     panel.addLayers();
                 }
             }
-        });
-        
-        var sourceComboBox = new Ext.form.ComboBox({
+        };
+
+        var capGridPanel = new GeoExplorer.CapabilitiesGrid(capGridConfig);
+        var baseCapGridPanel = new GeoExplorer.CapabilitiesGrid(capGridConfig);
+
+        var sourceComboConfig = {
             store: this.layerSources,
             valueField: "identifier",
             displayField: "name",
@@ -647,12 +716,44 @@
             forceSelection: true,
             mode: "local",
             value: firstSource.data.identifier
-        });
-        
+        };
+
+        var sourceComboBox = new Ext.form.ComboBox(sourceComboConfig);
         sourceComboBox.on("select", function(combo, record, index) {
             capGridPanel.reconfigure(record.data.store, capGridPanel.getColumnModel());
         }, this);
-        
+
+        var baseSourceComboBox = new Ext.form.ComboBox(sourceComboConfig);
+        baseSourceComboBox.on("select", function(combo, record, index) {
+            capGridPanel.reconfigure(record.data.store, baseCapGridPanel.getColumnModel());
+        }, this);
+
+        var capGridToolbar = [
+            new Ext.Toolbar.TextItem({
+                text: "View available data from:"
+            }),
+            sourceComboBox,
+            new Ext.Button({
+                text: "or add a new server.",
+                handler: function() {
+                    newSourceWindow.show();
+                }
+            })
+        ];
+
+        var baseCapGridToolbar = [
+            new Ext.Toolbar.TextItem({
+                text: "View available data from:"
+            }),
+            baseSourceComboBox,
+            new Ext.Button({
+                text: "or add a new server.",
+                handler: function() {
+                    newSourceWindow.show();
+                }
+            })
+        ];
+
         var newSourceWindow = new GeoExplorer.NewSourceWindow();
         
         newSourceWindow.on("server-added", function(url) {
@@ -684,22 +785,11 @@
             layout: 'border',
             height: 300,
             width: 600,
+            modal: true,
             items: [
                 capGridPanel
             ],
-            tbar: [
-                new Ext.Toolbar.TextItem({
-                    text: "View available data from:"
-                }),
-                sourceComboBox,
-                new Ext.Button({
-                    text: "or add a new server.",
-                    handler: function() {
-                        newSourceWindow.show();
-                    },
-                    scope: this
-                })
-            ],
+            tbar: capGridToolbar,
             bbar: [
                 "->",
                 new Ext.Button({
@@ -711,14 +801,6 @@
                     scope : this
                 }),
                 new Ext.Button({
-                    text: "Add Base Layers",
-                    iconCls: "icon-addlayers",
-                    handler: function(){
-                        capGridPanel.addLayers(true);
-                    },
-                    scope : this
-                }),
-                new Ext.Button({
                     text: "Done",
                     handler: function() {
                         this.capGrid.hide();
@@ -732,11 +814,53 @@
                 }
             }
         });
+
+        this.baseCapGrid = new Ext.Window({
+            title: "Available Base Layers",
+            closeAction: 'hide',
+            layout: 'border',
+            height: 300,
+            width: 600,
+            modal: true,
+            items: [
+                baseCapGridPanel
+            ],
+            tbar: baseCapGridToolbar,
+            bbar: [
+                "->",
+                new Ext.Button({
+                    text: "Add Base Layers",
+                    iconCls: "icon-addlayers",
+                    handler: function(){
+                        baseCapGridPanel.addLayers(true);
+                    },
+                    scope : this
+                }),
+                new Ext.Button({
+                    text: "Done",
+                    handler: function() {
+                        this.baseCapGrid.hide();
+                    },
+                    scope: this
+                })
+            ]
+        });
+ 
     },
 
     /** private: method[showCapabilitiesGrid]
      * Shows the window with a capabilities grid.
      */
+    showBaseCapabilitiesGrid: function() {
+        if(!this.capGrid) {
+            this.initCapGrid();
+        }
+        this.baseCapGrid.show();
+    },
+
+    /** private: method[showCapabilitiesGrid]
+     * Shows the window with a capabilities grid.
+     */
     showCapabilitiesGrid: function() {
         if(!this.capGrid) {
             this.initCapGrid();



More information about the Commits mailing list