Merge pull request #339 from marcjansen/mergeable-extjs5

Support both ExtJS 4.2.1 and ExtJS 5.1.0
geoext · Apr 7, 2015 · ca268a7 · ca268a7
2 parents 53c77f8 + ef5bf1c
commit ca268a7
Show file tree

Hide file tree

Showing 132 changed files with 3,049 additions and 1,509 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,6 +1,4 @@
 language: node_js
-node_js: 0.10
-# installs dependencies for testing
-install: npm install -g [email protected]
-# command to run tests
-script: casperjs test tests/headless/run-testsuite.js
+node_js:
+ - node
+ - iojs
diff --git a/README.md b/README.md
@@ -138,11 +138,11 @@ prior to submitting your changes. Thanks.
 You can also run the above tests headlessly through casperjs.
 
 ```bash
-# Install casperjs via npm in the GeoExt 2 clone dir (only first time)
-npm install [email protected]
+# Install dependencies via npm in the GeoExt 2 clone dir (only first time)
+npm install
 
 # Run the suite in the root of the repository
-./node_modules/casperjs/bin/casperjs test tests/headless/run-testsuite.js
+npm test
 ```
 
 These tests are also run though [travis](https://travis-ci.org/geoext/geoext2).

diff --git a/examples/action/mappanel_with_actions.html b/examples/action/mappanel_with_actions.html
@@ -1,22 +1,20 @@
 <!DOCTYPE html>
 <html>
-<head>
- <title>GeoExt2 - Action</title>
+ <head>
+  <title>GeoExt2 - Action</title>
 
- <!-- ExtJS -->
- <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/include-ext.js"></script>
- <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/options-toolbar.js"></script>
+  <!-- ExtJS -->
+  <script type="text/javascript" src="../include-ext.js"></script>
+  <script type="text/javascript" src="../options-toolbar.js"></script>
 
- <!-- Shared -->
- <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/example.css" />
- <!-- Basic example styling -->
- <link rel="stylesheet" type="text/css" href="../shared/example.css" />
+ <!-- Basic example styling -->
+ <link rel="stylesheet" type="text/css" href="../shared/example.css" />
 
- <!-- You should definitely consider using a custom single-file version of OpenLayers -->
- <script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script>
+  <!-- You should definitely consider using a custom single-file version of OpenLayers -->
+  <script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script>
 
- <script type="text/javascript" src="../loader.js"></script>
- <script type="text/javascript" src="mappanel_with_actions.js"></script>
-</head>
-<body></body>
+  <script type="text/javascript" src="../loader.js"></script>
+  <script type="text/javascript" src="mappanel_with_actions.js"></script>
+ </head>
+ <body></body>
 </html>
diff --git a/examples/action/mappanel_with_actions.js b/examples/action/mappanel_with_actions.js
@@ -17,7 +17,7 @@ Ext.application({
  name: 'ActionExample',
  launch: function(){
 
- var map = new OpenLayers.Map({});
+ var map = new OpenLayers.Map({allOverlays: true, fallThrough: true});
  map.addControl(new OpenLayers.Control.LayerSwitcher());
  var wms = new OpenLayers.Layer.WMS(
  "OpenStreetMap WMS",

diff --git a/examples/app/simple/app/view/Map.js b/examples/app/simple/app/view/Map.js
@@ -25,7 +25,7 @@ Ext.define('CF.view.Map', {
  items = [],
  ctrl;
 
- var map = new OpenLayers.Map();
+ var map = new OpenLayers.Map({allOverlays: true, fallThrough: true});
 
  // ZoomToMaxExtent control, a "button" control
  items.push(Ext.create('Ext.button.Button', Ext.create('GeoExt.Action', {

diff --git a/examples/geocoder/geocoder.html b/examples/geocoder/geocoder.html
@@ -4,20 +4,17 @@
  <title>GeoExt GeocoderComboBox Example</title>
 
  <!-- ExtJS -->
- <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/include-ext.js"></script>
- <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/options-toolbar.js"></script>
+ <script type="text/javascript" src="../include-ext.js"></script>
+ <script type="text/javascript" src="../options-toolbar.js"></script>
 
- <!-- Shared -->
- <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/example.css" />
  <!-- Basic example styling -->
  <link rel="stylesheet" type="text/css" href="../shared/example.css" />
 
  <!-- You should definitely consider using a custom single-file version of OpenLayers -->
  <script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script>
- 
+
  <script type="text/javascript" src="../loader.js"></script>
  <script type="text/javascript" src="geocoder.js"></script>
-
  </head>
  <body>
  <h1>GeoExt.form.field.GeocoderComboBox</h1>

diff --git a/examples/grid/feature-grid-w-proxy.html b/examples/grid/feature-grid-w-proxy.html
@@ -4,14 +4,12 @@
  <title>GeoExt WFS FeatureStore in an Ext Grid</title>
 
  <!-- ExtJS -->
- <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/include-ext.js"></script>
- <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/options-toolbar.js"></script>
+ <script type="text/javascript" src="../include-ext.js"></script>
+ <script type="text/javascript" src="../options-toolbar.js"></script>
 
- <!-- Shared -->
- <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/example.css" />
  <!-- Basic example styling -->
  <link rel="stylesheet" type="text/css" href="../shared/example.css" />
- 
+
  <style>
  div.olControlAttribution {
  background-color: rgb(237,237,237);

diff --git a/examples/grid/feature-grid.html b/examples/grid/feature-grid.html
@@ -4,11 +4,9 @@
  <title>GeoExt FeatureStore in an Ext Grid</title>
 
  <!-- ExtJS -->
- <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/include-ext.js"></script>
- <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/options-toolbar.js"></script>
+ <script type="text/javascript" src="../include-ext.js"></script>
+ <script type="text/javascript" src="../options-toolbar.js"></script>
 
- <!-- Shared -->
- <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/example.css" />
  <!-- Basic example styling -->
  <link rel="stylesheet" type="text/css" href="../shared/example.css" />
 
@@ -17,7 +15,6 @@
 
  <script type="text/javascript" src="../loader.js"></script>
  <script type="text/javascript" src="feature-grid.js"></script>
-
  </head>
  <body>
  <h1>Grid Panel configured with a GeoExt.data.FeatureStore</h1>

diff --git a/examples/grid/feature-grid.js b/examples/grid/feature-grid.js
@@ -27,7 +27,7 @@ Ext.application({
  name: 'Feature Grid - GeoExt2',
  launch: function() {
  // create map instance
- var map = new OpenLayers.Map();
+ var map = new OpenLayers.Map({allOverlays: true, fallThrough: true});
  var wmsLayer = new OpenLayers.Layer.WMS(
  "OpenStreetMap WMS",
  "http://ows.terrestris.de/osm/service?",
@@ -93,13 +93,14 @@ Ext.application({
  {
  name: 'symbolizer',
  convert: function(v, r) {
- return r.raw.layer.styleMap.createSymbolizer(r.raw, 'default');
+ var dataKey = GeoExt.isExt4 ? 'raw' : 'data',
+ data = r[dataKey];
+ return data.layer.styleMap.createSymbolizer(data, 'default');
  }
  },
  {name: 'name', type: 'string'},
  {name: 'elevation', type: 'float'}
- ],
- autoLoad: true
+ ]
  });
 
  // create grid panel configured with feature store
@@ -114,7 +115,7 @@ Ext.application({
  width: 30,
  xtype: 'gx_symbolizercolumn',
  dataIndex: "symbolizer"
- },{
+ }, {
  header: "Name",
  width: 200,
  dataIndex: "name"

diff --git a/examples/include-ext.js b/examples/include-ext.js
@@ -0,0 +1,105 @@
+/**
+ * Modified from ext-5.0.0/shared/include-ext.js:
+ *
+ * * support query parameter 'extjs'
+ * * default to 'neptune' theme, as this one exists in both v4 and v5
+ * * load the debug-variants of the resources
+ *
+ * This file includes the required ext-all js and css files based upon "theme" and "rtl"
+ * url parameters. It first searches for these parameters on the page url, and if they
+ * are not found there, it looks for them on the script tag src query string.
+ * For example, to include the neptune flavor of ext from an index page in a subdirectory
+ * of extjs/examples/:
+ * <script type="text/javascript" src="../../examples/shared/include-ext.js?theme=neptune"></script>
+ */
+(function() {
+ function getQueryParam(name) {
+ var regex = RegExp('[?&]' + name + '=([^&]*)');
+
+ var match = regex.exec(location.search) || regex.exec(path);
+ return match && decodeURIComponent(match[1]);
+ }
+
+ function hasOption(opt, queryString) {
+ var s = queryString || location.search;
+ var re = new RegExp('(?:^|[&?])' + opt + '(?:[=]([^&]*))?(?:$|[&])', 'i');
+ var m = re.exec(s);
+
+ return m ? (m[1] === undefined || m[1] === '' ? true : m[1]) : false;
+ }
+
+ function getCookieValue(name){
+ var cookies = document.cookie.split('; '),
+ i = cookies.length,
+ cookie, value;
+
+ while(i--) {
+ cookie = cookies[i].split('=');
+ if (cookie[0] === name) {
+ value = cookie[1];
+ }
+ }
+
+ return value;
+ }
+
+ var scriptEls = document.getElementsByTagName('script'),
+ v = getQueryParam('extjs') ? getQueryParam('extjs') : '5.1.0',
+ basePath = 'http://cdn.sencha.com/ext/gpl/'+ v,
+ path = (v[0] == 4) ? basePath : basePath + '/build',
+ rtl = getQueryParam('rtl'),
+ theme = getQueryParam('theme') || 'neptune',
+ includeCSS = !hasOption('nocss', path),
+ hasOverrides = !hasOption('nooverrides', path) && !!{
+ // TODO: remove neptune
+ neptune: 1,
+ classic: 1,
+ gray: 1,
+ 'neptune-touch': 1,
+ crisp: 1,
+ 'crisp-touch': 1
+ }[theme],
+ repoDevMode = getCookieValue('ExtRepoDevMode'),
+ packagePath,
+ themePath,
+ i = 3,
+ overridePath;
+
+ rtl = rtl && rtl.toString() === 'true';
+
+ theme = 'ext-theme-' + theme;
+ packagePath = path + '/packages/' + theme + '/build/';
+ themePath = packagePath + 'resources/' + theme + (rtl ? '-all-rtl' : '-all');
+
+ if (includeCSS) {
+ document.write('<link rel="stylesheet" type="text/css" href="' +
+ themePath + '-debug.css"/>');
+ }
+
+ document.write('<script type="text/javascript" src="' + path + '/ext-all' +
+ (rtl ? '-rtl' : '') + '-debug.js"></script>');
+
+ if (hasOverrides) {
+ // since document.write('<script>') does not block execution in IE, we need to
+ // makes sure we prevent ext-theme-neptune.js from executing before ext-all.js
+ // normally this can be done using the defer attribute on the script tag, however
+ // this method does not work in IE when in repoDevMode. It seems the reason for
+ // this is because in repoDevMode ext-all.js is simply a script that loads other
+ // scripts and so Ext is still undefined when the neptune overrides are executed.
+ // To work around this we use the _beforereadyhandler hook to load the neptune
+ // overrides dynamically after Ext has been defined.
+ overridePath = packagePath + theme + (repoDevMode ? '-debug' : '') + '.js';
+
+ if (repoDevMode && window.ActiveXObject) {
+ Ext = {
+ _beforereadyhandler: function() {
+ Ext.Loader.loadScript({ url: overridePath });
+ }
+ };
+ } else {
+ document.write('<script type="text/javascript" src="' +
+ overridePath + '" defer></script>');
+ }
+ }
+
+})();
diff --git a/examples/layeropacityslider/layeropacityslider.html b/examples/layeropacityslider/layeropacityslider.html
@@ -1,28 +1,26 @@
+<!DOCTYPE html>
 <html>
  <head>
  <title>GeoExt LayerOpacitySlider</title>
 
  <!-- ExtJS -->
- <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/include-ext.js"></script>
- <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/options-toolbar.js"></script>
+ <script type="text/javascript" src="../include-ext.js"></script>
+ <script type="text/javascript" src="../options-toolbar.js"></script>
 
- <!-- Shared -->
- <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/example.css" />
  <!-- Basic example styling -->
  <link rel="stylesheet" type="text/css" href="../shared/example.css" />
 
  <!-- You should definitely consider using a custom single-file version of OpenLayers -->
  <script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script>
- 
+
  <script type="text/javascript" src="../loader.js"></script>
+ <script type="text/javascript" src="layeropacityslider.js"></script>
 
  <style type="text/css">
  .x-tree-node-leaf .gx-tree-layer-icon {
  width: 0px;
  }
  </style>
-
- <script type="text/javascript" src="layeropacityslider.js"></script>
  </head>
  <body>
  <h1>GeoExt.LayerOpacitySlider</h1>

diff --git a/examples/legendpanel/legendpanel.html b/examples/legendpanel/legendpanel.html
@@ -3,28 +3,25 @@
  <title>GeoExt Legend Panel</title>
 
  <!-- ExtJS -->
- <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/include-ext.js"></script>
- <script type="text/javascript" src="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/options-toolbar.js"></script>
+ <script type="text/javascript" src="../include-ext.js"></script>
+ <script type="text/javascript" src="../options-toolbar.js"></script>
 
- <!-- Shared -->
- <link rel="stylesheet" type="text/css" href="http://cdn.sencha.com/ext/gpl/4.2.1/examples/shared/example.css" />
  <!-- Basic example styling -->
  <link rel="stylesheet" type="text/css" href="../shared/example.css" />
 
  <!-- You should definitely consider using a custom single-file version of OpenLayers -->
  <script src="http://openlayers.org/api/2.13.1/OpenLayers.js"></script>
- 
+
  <script type="text/javascript" src="../loader.js"></script>
  <script type="text/javascript" src="legendpanel.js"></script>
 
  <style type="text/css">
- .mylabel {
- font-weight: bold;
- color: red;
- display: block;
- width: 100%;
- }
-
+ .mylabel {
+ font-weight: bold;
+ color: red;
+ display: block;
+ width: 100%;
+ }
  </style>
  </head>
  <body>

diff --git a/examples/legendpanel/legendpanel.js b/examples/legendpanel/legendpanel.js
@@ -27,9 +27,7 @@ Ext.require([
 Ext.application({
  name: 'LegendPanel GeoExt2',
  launch: function() {
- var map = new OpenLayers.Map({
- allOverlays: true
- });
+ var map = new OpenLayers.Map({allOverlays: true, fallThrough: true});
  map.addLayers([
  new OpenLayers.Layer.WMS(
  "OpenStreetMap WMS",

diff --git a/examples/loader.js b/examples/loader.js
@@ -2,7 +2,6 @@ Ext.Loader.setConfig({
  enabled: true,
  disableCaching: false,
  paths: {
- GeoExt: "../../src/GeoExt",
- Ext: "http://cdn.sencha.com/ext/gpl/4.2.1/src"
+ GeoExt: "../../src/GeoExt"
  }
 });