Merge pull request #312 from marcjansen/always-on-top

Fix z-index-issue with popups
geoext · Nov 27, 2014 · 33af022 · 33af022
2 parents b392290 + eee0782
commit 33af022
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 13 deletions.
diff --git a/examples/popup/popup.js b/examples/popup/popup.js
@@ -53,7 +53,8 @@ Ext.onReady(function() {
                 html: bogusMarkup,
                 maximizable: true,
                 collapsible: true,
-                anchorPosition: 'auto'
+                anchorPosition: 'auto',
+                alwaysOnTop: true
             }, constrainOpts);
 
         popup = Ext.create('GeoExt.window.Popup', popupOpts);

diff --git a/src/GeoExt/window/Popup.js b/src/GeoExt/window/Popup.js
@@ -160,6 +160,17 @@ Ext.define('GeoExt.window.Popup', {
      */
     anchorPosition: "auto",
 
+    /**
+     * Shall this popup be always on top? Setting this to true helps in cases
+     * where the popups are working on a map panel that itself is inside of a
+     * window. Future versions of ExtJS do also have such a configuration option
+     * (http://docs.sencha.com/extjs/5.0.1/#!/api/Ext.util.Floating-cfg-alwaysOnTop)
+     * We do not full mimic the behaviour of that configuration but only support
+     * the boolean variant.
+     *
+     * @cfg {Boolean} alwaysOnTop
+     */
+    alwaysOnTop: false,
 
     initComponent: function() {
         if(this.map instanceof GeoExt.panel.Map) {
@@ -349,6 +360,20 @@ Ext.define('GeoExt.window.Popup', {
             }
 
             this.setPosition(left, top);
+            this.handleAlwaysOnTop();
+        }
+    },
+
+    /**
+     * If we have been configured with #alwaysOnTop being `true`, we only need
+     * to manually change our z-indexing in ExtJS 4. ExtJS 5 brings its own
+     * version of `alwaysOnTop`.
+     *
+     * @private
+     */
+    handleAlwaysOnTop: function() {
+        if (this.alwaysOnTop && Ext.versions.core.major === 4) {
+            Ext.WindowManager.bringToFront(this.id);
         }
     },
 

diff --git a/tests/window/Popup.html b/tests/window/Popup.html
@@ -515,18 +515,80 @@
         }
 
         function test_Popup_fixedPosition(t) {
-	    t.plan(8);
-	    var context = setupMultiFeatureContext();
-
-	    Ext.each(context.features, function(feat) {
-    		var pop = popup(feat, context.mapPanel, {anchorPosition: "bottom-left"});
-    		pop.show();
-    		t.eq(pop.anchorPosition, "bottom-left", "fixed position set correctly");
-    		t.ok(!pop.el.child("div.top"), "popups with fixed position 'bottom-left' do not have an extra CSS class");
-    		pop.destroy();
-	    });
-	    tearDownMultiFeature(context);
-	}
+            t.plan(8);
+            var context = setupMultiFeatureContext();
+
+            Ext.each(context.features, function(feat) {
+                var pop = popup(feat, context.mapPanel, {anchorPosition: "bottom-left"});
+                pop.show();
+                t.eq(pop.anchorPosition, "bottom-left", "fixed position set correctly");
+                t.ok(!pop.el.child("div.top"), "popups with fixed position 'bottom-left' do not have an extra CSS class");
+                pop.destroy();
+            });
+            tearDownMultiFeature(context);
+        }
+
+        /**
+         * See https://github.com/geoext/geoext2/issues/303
+         */
+        function test_popupAlwaysOnTop(t) {
+            t.plan(2);
+            var map = new OpenLayers.Map({
+                    allOverlays: true,
+                    fallThrough:true
+                }),
+                vector = new OpenLayers.Layer.Vector('vector'),
+                feature =new OpenLayers.Feature.Vector(
+                    new OpenLayers.Geometry.Point(-45, 5)
+                ),
+                mapWin = Ext.create('Ext.Window', {
+                    layout: 'fit',
+                    width: 600,
+                    height: 400,
+                    x: 20,
+                    y: 250,
+                    items: {
+                        xtype: 'gx_mappanel',
+                        region: 'center',
+                        map: map,
+                        layers: [
+                            vector
+                        ],
+                        center: [0,0],
+                        zoom: 0
+                    }
+                }),
+                pop;
+            mapWin.show();
+            vector.addFeatures([feature]);
+
+            // 1 test: is alwaysOnTop = true working?
+            var pop = popup(feature, map, {alwaysOnTop: true});
+            pop.show();
+            // first focus the map:
+            mapWin.focus();
+            // pan the map a little bit
+            map.pan(1, 1, {animate:false, dragging:false});
+
+            t.ok(pop.el.getZIndex() > mapWin.el.getZIndex(),
+                    'Popup has bigger z-index when alwaysOnTop is true');
+            // cleanup
+            pop.destroy();
+
+            // 1 test: is alwaysOnTop = true working?
+            pop = popup(feature, map, {alwaysOnTop: false});
+            pop.show();
+            // first focus the map:
+            mapWin.focus();
+            // pan the map a little bit
+            map.pan(1, 1, {animate:false, dragging:false});
+
+            t.ok(pop.el.getZIndex() < mapWin.el.getZIndex(),
+                    'Popup has lower z-index when alwaysOnTop is false');
+            // cleanup
+            pop.destroy();
+            mapWin.destroy();
+        }
 
     </script>
   </head>