Skip to content

Make GeoExt.Overview inherit from Ext.Component #292

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 5, 2014
+68 −72
Merged

Make GeoExt.Overview inherit from Ext.Component #292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 7 additions & 6 deletions examples/overview/overview-generic.html → examples/overviewmap/overview-generic.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions examples/overview/overview-generic.js → examples/overviewmap/overview-generic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
Ext.require([
'Ext.container.Viewport',
'GeoExt.panel.Map',
'GeoExt.container.Overview'
'GeoExt.OverviewMap'
]);

Ext.application({
Expand Down Expand Up @@ -56,7 +56,7 @@ Ext.application({
title: 'Overview',
flex: 1,
layout: 'fit',
items: { xtype: 'gx_overview' }
items: { xtype: 'gx_overviewmap' }
}
]
}
Expand Down
17 changes: 9 additions & 8 deletions examples/overview/overview.html → examples/overviewmap/overview.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand All @@ -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>
Expand Down
8 changes: 4 additions & 4 deletions examples/overview/overview.js → examples/overviewmap/overview.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
Ext.require([
'Ext.container.Viewport',
'GeoExt.panel.Map',
'GeoExt.container.Overview'
'GeoExt.OverviewMap'
]);

Ext.application({
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);
Expand Down
3 changes: 0 additions & 3 deletions resources/css/overview.css
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions resources/css/overviewmap.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
.gx-overview-map .olControlOverviewMapElement {
padding: 0;
}
40 changes: 17 additions & 23 deletions src/GeoExt/container/Overview.js → src/GeoExt/OverviewMap.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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}
Expand All @@ -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,
Expand All @@ -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
*/
Expand Down Expand Up @@ -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 ];
Expand Down
50 changes: 25 additions & 25 deletions tests/container/Overview.html → tests/OverviewMap.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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');
Expand All @@ -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');
Expand All @@ -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);
}
Expand All @@ -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');

}

Expand All @@ -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,
Expand All @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion tests/list-tests.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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>
Expand Down