Merge pull request #292 from bentrm/overview

marcjansen · marcjansen · commit 71b737d064e6 · 2014-11-05T20:46:04.000+01:00
Make GeoExt.Overview inherit from Ext.Component
diff --git a/examples/overviewmap/overview-generic.html b/examples/overviewmap/overview-generic.html
@@ -19,21 +19,22 @@
     <script type="text/javascript" src="../loader.js"></script>
     <script type="text/javascript" src="overview-generic.js"></script>
     <style>
-        .gx-overview .olControlOverviewMapElement {
+        .gx-overview-map .olControlOverviewMapElement {
             padding: 0;
             background-color: rgba(0, 0, 0, 0.5)
         }
     </style>
 </head>
 <body>
     <div id="desc">
-        <h1>GeoExt.container.Overview Components</h1>
-        <p>This example shows how to work with the overview component. It inherits
-        from Ext.container.Container wrapping the OpenLayers Overview control. This means
+        <h1>GeoExt.OverviewMap Components</h1>
+        <p>This example shows how to work with the OverviewMap component. It inherits
+        from Ext.Component wrapping the OpenLayers Overview control. This means
         you can place it in your applications layout as you would any other component.
-        The example shows the usage inside a vbox layout, so the components size is
+        The example shows the usage of an GeoExt.OverviewMap as an item of a
+        Ext.panel.Panel inside a vbox layout. The overviews map size is ultimately
         determined by the parents dimensions.<br>
-        The overview has not been configured with a map so it defaults to the
+        The OverviewMap component has not been configured with a map so it defaults to the
         GeoExt.panel.Map guessed at runtime.<p>
         <p>The js is not minified so it is readable. See
         <a href="overview-generic.js">overview-generic.js</a>.</p>
diff --git a/examples/overviewmap/overview-generic.js b/examples/overviewmap/overview-generic.js
@@ -1,7 +1,7 @@
 Ext.require([
     'Ext.container.Viewport',
     'GeoExt.panel.Map',
-    'GeoExt.container.Overview'
+    'GeoExt.OverviewMap'
 ]);
 
 Ext.application({
@@ -56,7 +56,7 @@ Ext.application({
                             title: 'Overview',
                             flex: 1,
                             layout: 'fit',
-                            items: { xtype: 'gx_overview' }
+                            items: { xtype: 'gx_overviewmap' }
                         }
                     ]
                 }
diff --git a/examples/overviewmap/overview.html b/examples/overviewmap/overview.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <title>GeoExt Overview Example</title>
+    <title>GeoExt.OverviewMap Example</title>
 
     <!-- ExtJS -->
     <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/include-ext.js"></script>
@@ -19,22 +19,23 @@
     <script type="text/javascript" src="../loader.js"></script>
     <script type="text/javascript" src="overview.js"></script>
     <style>
-        .gx-overview .olControlOverviewMapElement {
+        .gx-overview-map .olControlOverviewMapElement {
             padding: 0;
             background-color: rgba(0, 0, 0, 0.5)
         }
     </style>
 </head>
 <body>
     <div id="desc">
-        <h1>GeoExt.container.Overview Components</h1>
-        <p>This example shows how to work with the overview component. It inherits
-        from Ext.container.Container wrapping the OpenLayers Overview control. This means
+        <h1>GeoExt.OverviewMap Components</h1>
+        <p>This example shows how to work with the OverviewMap component. It inherits
+        from Ext.Component wrapping the OpenLayers OverviewMap control. This means
         you can place it in your applications layout as you would any other component.
         The example shows the usage as a floating, resizable component positioned
-        absolutely above the map. The second container has been placed inside a vbox layout,
-        so the components size is determined by the parents dimensions.<br>
-        The floating overview map has been configured as "dynamic" which means it will
+        absolutely above the map. The second GeoExt.OverviewMap has been placed as a
+        panels item inside a vbox layout, so the components size is determined by
+        the parents dimensions.<br>
+        The floating OverviewMap has been configured as "dynamic" which means it will
         update itself to show the bound maps active baselayer.<p>
         <p>The js is not minified so it is readable. See
         <a href="overview.js">overview.js</a>.</p>
diff --git a/examples/overviewmap/overview.js b/examples/overviewmap/overview.js
@@ -1,7 +1,7 @@
 Ext.require([
     'Ext.container.Viewport',
     'GeoExt.panel.Map',
-    'GeoExt.container.Overview'
+    'GeoExt.OverviewMap'
 ]);
 
 Ext.application({
@@ -38,7 +38,7 @@ Ext.application({
         });
 
         // Customized floating overview container
-        var overview = Ext.create('GeoExt.container.Overview', {
+        var overview = Ext.create('GeoExt.OverviewMap', {
             map: map,
             dynamic: true,
             autoShow: true,
@@ -111,15 +111,15 @@ Ext.application({
                             flex: 1,
                             layout: 'fit',
                             items: [{
-                                xtype: 'gx_overview'
+                                xtype: 'gx_overviewmap'
                             }]
                         }
                     ]
                 }
             ]
         });
 
-        // Positioning the floating container relative to the viewport
+        // Positioning the floating component relative to the viewport
         var vOffset = -25 - overview.getHeight();
         var position = overview.getAlignToXY(viewport, 'bl', [25, vOffset]);
         overview.setPosition(position);
diff --git a/resources/css/overview.css b/resources/css/overview.css
diff --git a/resources/css/overviewmap.css b/resources/css/overviewmap.css
@@ -0,0 +1,3 @@
+.gx-overview-map .olControlOverviewMapElement {
+    padding: 0;
+}
diff --git a/src/GeoExt/OverviewMap.js b/src/GeoExt/OverviewMap.js
@@ -7,34 +7,30 @@
  */
 
 /**
- * A container encapsulating an OpenLayers.Control.OverviewMap control.
+ * A component encapsulating an OpenLayers.Control.OverviewMap control.
  *
  * When you use this component in an application, make sure to include the
- * stylesheet 'overview.css' or add the following to your own stylesheet.
+ * stylesheet 'overviewmap.css' or add the following to your own stylesheet.
  *
  * <code>
- * .gx-overview .olControlOverviewMapElement { padding: 0; }
+ * .gx-overview-map .olControlOverviewMapElement { padding: 0; }
  * </code>
  *
- * @class GeoExt.container.Overview
+ * @class GeoExt.OverviewMap
  */
-Ext.define('GeoExt.container.Overview', {
-    extend: 'Ext.container.Container',
-    alias: 'widget.gx_overview',
+Ext.define('GeoExt.OverviewMap', {
+    extend: 'Ext.Component',
+    alias: 'widget.gx_overviewmap',
+    requires: [
+        'GeoExt.Version'
+    ],
 
     /**
      * Custom CSS class added to this components #cls.
      *
      * @property {String}
      */
-    ovCls: 'gx-overview',
-
-    /**
-     * The default layout of the Overview component.
-     *
-     * @property {String}
-     */
-    layout: 'fit',
+    ovCls: 'gx-overview-map',
 
     /**
      * The OpenLayers.Map that this overview is bound to. If not set by the user
@@ -63,7 +59,7 @@ Ext.define('GeoExt.container.Overview', {
      * - "size" will default to the containers actual dimensions
      * - "maximized" will always be true to make the overview visible
      *
-     * If you want to hide the overview map, simple use the containers show/hide
+     * If you want to hide the overview map, simple use the components show/hide
      * methods.
      *
      * @cfg {Object}
@@ -85,8 +81,8 @@ Ext.define('GeoExt.container.Overview', {
         // add gx class making sure it won't be overridden on accident
         this.addCls(this.ovCls);
 
-        // bind to the containers events to make sure the overview is added
-        // and removed when the container is (in-)visible.
+        // bind to the components lifecycle events to make sure the overview is
+        // added and removed from the map when the component is (in-)visible.
         this.on({
             'show': this.reinitControl,
             'resize': this.reinitControl,
@@ -106,8 +102,8 @@ Ext.define('GeoExt.container.Overview', {
 
     /**
      * Destroys the encapsulated OpenLayers.Control.OverviewMap removing it from
-     * the maps controls and unbinding all mapped events from this component.
-     * Deletes the containers map and overviewOptions members.
+     * the map controls and unbinds all events from this component.
+     * Deletes the components ctrl, map and overviewOptions members.
      *
      * @private
      */
@@ -163,9 +159,7 @@ Ext.define('GeoExt.container.Overview', {
         // not set by user, the overview control will fail on construction.
         // This is to determine any layer to be shown in overview map.
         if (map.allOverlays) {
-            if (!options.layers
-                    && map.layers
-                    && map.layers.length > 0) {
+            if (!options.layers && map.layers && map.layers.length > 0) {
                 baselayer = map.layers[0].clone();
                 baselayer.setIsBaseLayer(true);
                 options.layers = [ baselayer ];
diff --git a/tests/OverviewMap.html b/tests/OverviewMap.html
@@ -11,13 +11,13 @@
             disableCaching: false,
             enabled: true,
             paths: {
-                GeoExt: '../../src/GeoExt'
+                GeoExt: '../src/GeoExt'
             }
         });
 
         Ext.Loader.syncRequire([
             'GeoExt.panel.Map',
-            'GeoExt.container.Overview'
+            'GeoExt.OverviewMap'
         ]);
 
         function test_lifecycle(t) {
@@ -46,28 +46,28 @@
                     map: map
                 });
 
-            var overview = Ext.create('GeoExt.container.Overview', {
+            var overview = Ext.create('GeoExt.OverviewMap', {
                     floating: true,
                     width: 300,
                     height: 150,
                     map: map
                 });
 
             t.ok(map.getControlsByClass('OpenLayers.Control.OverviewMap').length === 0,
-                'no overview control is added to the map if overview container is not shown');
+                'no overview control is added to the map if overview component is not shown');
 
             try {
                 overview.show();
-                t.ok(true, 'can show overview container');
+                t.ok(true, 'can show overview component');
             } catch (err) {
-                t.ok(false, 'showing an overview container leads to', err);
+                t.ok(false, 'showing an overview component leads to', err);
             }
 
             t.ok(map.getControlsByClass('OpenLayers.Control.OverviewMap').length === 1,
-                'one overview control is added to the map when overview container is shown');
+                'one overview control is added to the map when overview component is shown');
 
             t.ok(overview.ctrl.ovmap.layers[0].id !== map.layers[0].id,
-                'baselayer of overview map is not the same as bounds map baselayer');
+                'baselayer of overview map is not the same as the bounds map baselayer');
 
             t.ok(overview.ctrl.ovmap.layers[0].name === map.layers[0].name,
                 'clone of baselayer of bound map is used in overview map');
@@ -78,26 +78,26 @@
 
             try {
                 overview.hide();
-                t.ok(true, 'hiding the overview container works fine');
+                t.ok(true, 'hiding the overview component works fine');
             } catch (err) {
-                t.ok(false, 'hiding the overview container leads to ', err);
+                t.ok(false, 'hiding the overview component leads to ', err);
             }
 
             t.ok(map.getControlsByClass('OpenLayers.Control.OverviewMap').length === 0,
-                'overview control has been removed from bound map when container is hidden');
+                'overview control has been removed from bound map when component is hidden');
 
             // move map to check if overview reinits at correct center
             map.setCenter([51, 13]);
 
             try {
                 overview.show();
-                t.ok(true, 'showing the overview container after it has been hidden');
+                t.ok(true, 'showing the overview component after it has been hidden');
             } catch (err) {
-                t.ok(false, 'showing an overview container after it has been hidden leads to', err);
+                t.ok(false, 'showing an overview component after it has been hidden leads to', err);
             }
 
             t.ok(map.getControlsByClass('OpenLayers.Control.OverviewMap').length === 1,
-                'one overview control is been readded to the map when overview container is shown');
+                'one overview control is been readded to the map when overview component is shown');
 
             t.ok(overview.ctrl.ovmap.layers[0].id !== map.layers[0].id,
                 'baselayer of overview map is not the same as bounds map baselayer');
@@ -111,7 +111,7 @@
 
             try {
                 overview.destroy();
-                t.ok(true, 'overview container can be destroyed');
+                t.ok(true, 'overview component can be destroyed');
             } catch (err) {
                 t.ok('destroying component leads to ', err);
             }
@@ -137,28 +137,28 @@
             });
 
             // guess map at runtime
-            var overview = Ext.create('GeoExt.container.Overview', {
+            var overview = Ext.create('GeoExt.OverviewMap', {
                 floating: true,
                 width: 300,
                 height: 150,
                 cls: 'custom-user-cls'
             });
 
-            t.ok(overview.hasCls('custom-user-cls'));
-            t.ok(overview.hasCls('gx-overview'));
+            t.ok(overview.hasCls('custom-user-cls'), 'Custom cls parameter is set.');
+            t.ok(overview.hasCls('gx-overview-map'), 'GX cls parameter is set.');
 
             t.ok(mapPanel.map.getControlsByClass('OpenLayers.Control.OverviewMap').length === 0,
-                'no overview control is added to the map if overview container is not shown');
+                'no overview control is added to the map if overview component is not shown');
 
             try {
                 overview.show();
-                t.ok(true, 'can show overview container');
+                t.ok(true, 'can show overview component');
             } catch (err) {
-                t.ok(false, 'showing an overview container leads to', err);
+                t.ok(false, 'showing an overview component leads to', err);
             }
 
             t.ok(mapPanel.map.getControlsByClass('OpenLayers.Control.OverviewMap').length === 1,
-                'one overview control is added to the map when overview container is shown');
+                'one overview control is added to the map when overview component is shown');
 
         }
 
@@ -183,7 +183,7 @@
             var extent = [0, 0, 180, 90];
 
             // guess map at runtime
-            var overview = Ext.create('GeoExt.container.Overview', {
+            var overview = Ext.create('GeoExt.OverviewMap', {
                 floating: true,
                 width: 300,
                 height: 150,
@@ -197,9 +197,9 @@
 
             try {
                 overview.show();
-                t.ok(true, 'can show overview container');
+                t.ok(true, 'can show overview component');
             } catch (err) {
-                t.ok(false, 'showing an overview container leads to', err);
+                t.ok(false, 'showing an overview component leads to', err);
             }
 
             t.ok(overview.ctrl.autoPan === true,
diff --git a/tests/list-tests.html b/tests/list-tests.html
@@ -1,7 +1,6 @@
 <ul id="testlist">
   <li>Action.html</li>
   <li>container/LayerLegend.html</li>
-  <li>container/Overview.html</li>
   <li>container/UrlLegend.html</li>
   <li>container/WmsLegend.html</li>
   <li>container/VectorLegend.html</li>
@@ -30,6 +29,7 @@
   <li>grid/column/Symbolizer.html</li>
   <li>Lang.html</li>
   <li>LegendImage.html</li>
+  <li>OverviewMap.html</li>
   <li>panel/Map.html</li>
   <li>panel/Legend.html</li>
   <li>panel/PrintMapPanel.html</li>

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`Ext.require([`
`2`	`2`	`'Ext.container.Viewport',`
`3`	`3`	`'GeoExt.panel.Map',`
`4`		`- 'GeoExt.container.Overview'`
	`4`	`+ 'GeoExt.OverviewMap'`
`5`	`5`	`]);`
`6`	`6`
`7`	`7`	`Ext.application({`
`@@ -56,7 +56,7 @@ Ext.application({`
`56`	`56`	`title: 'Overview',`
`57`	`57`	`flex: 1,`
`58`	`58`	`layout: 'fit',`
`59`		`- items: { xtype: 'gx_overview' }`
	`59`	`+ items: { xtype: 'gx_overviewmap' }`
`60`	`60`	`}`
`61`	`61`	`]`
`62`	`62`	`}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+.gx-overview-map .olControlOverviewMapElement {`
	`2`	`+ padding: 0;`
	`3`	`+}`