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"
     }
 });