diff --git a/examples/popup/popup.js b/examples/popup/popup.js index cc290d2ee..ffd3c4ca5 100644 --- 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 index 124a34a7a..28be4cfc6 100644 --- 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 index ed46e5fe8..2575379b8 100644 --- 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(); + }