bmoeskau · bmoeskau · Mar 27, 2016 · Apr 17, 2016 · Apr 17, 2016 · Apr 18, 2016
diff --git a/Extensible-config.js b/Extensible-config.js
@@ -1,5 +1,5 @@
 Extensible = {
-    version: '1.6.1'
+    version: '1.7.0'
 };
 /**
  * =================================================================================================
@@ -61,7 +61,7 @@ Extensible.Config = {
          *
          * @config {String} extJsRoot
          */
-        extJsRoot: 'http://cdn.sencha.com/ext/gpl/4.2.0/',
+        extJsRoot: 'http://cdn.sencha.com/ext/gpl/5.1.0/',
 
         /**
          * The root path to the Extensible framework (defaults to the current url of this script file,
@@ -119,7 +119,12 @@ Extensible.Config = {
          * work consistently with all Ext 4.x versions (just uses the Ext default English strings). As long
          * as you are using 4.1+ feel free to enable this by setting the value to any supported locale code.
          */
-        language: null
+        language: null,
+
+        /**
+         * Name of theme used. Supported values are: 'neptune', nepture-touch', 'crisp', 'crisp-touch'.
+         */
+        theme: 'neptune'
     },
 
     /**
@@ -136,6 +141,7 @@ Extensible.Config = {
         me.extensibleRoot = config.extensibleRoot || me.defaults.extensibleRoot || me.getSdkPath();
         me.cacheExtensible = config.cacheExtensible || me.defaults.cacheExtensible;
         me.language = config.language || me.defaults.language;
+        me.theme = config.theme || me.defaults.theme;
 
         me.adjustPaths();
         me.writeIncludes();
@@ -169,44 +175,46 @@ Extensible.Config = {
     // private -- write out the CSS and script includes to the document
     writeIncludes: function() {
         var me = this,
-            cacheBuster = '?_dc=' + (me.cacheExtensible ? Extensible.version : (+new Date)),
-            suffixExt = '',
-            suffixExtensible = '';
-
-        switch (me.mode) {
-            case 'debug':
-                suffixExt = '-all-debug';
-                suffixExtensible = '-all-debug';
-                break;
-
-            case 'release':
-                suffixExt = '-all';
-                suffixExtensible = '-all'
-                // For release we want to refresh the cache on first load, but allow caching
-                // after that, so use the version number instead of a unique string
-                cacheBuster = '?_dc=' + Extensible.version;
-                break;
-
-            default:
-                // IE does not work in dynamic mode for the Extensible examples currently
-                // based on how it (mis)handles loading of scripts when mixing includes
-                // and in-page scripts. Make sure IE always uses the regular debug versions.
-                if (me.isIE) {
-                    suffixExt = '-all-debug';
-                    suffixExtensible = '-all-debug';
-                }
-                else {
-                    suffixExt = '-debug';
-                    suffixExtensible = '-bootstrap';
-                }
-        }
+            cacheBuster = '?_dc=' + (me.cacheExtensible ? Extensible.version : (+new Date));
 
-        me.includeStylesheet(me.extJsRoot + 'resources/css/ext-all.css');
-        me.includeStylesheet(me.extensibleRoot + 'resources/css/extensible-all.css' + cacheBuster);
-        me.includeStylesheet(me.extensibleRoot + 'examples/examples.css?_dc=' + Extensible.version);
+        // Include style sheets
+        me.includeStylesheet(me.extJsRoot + '/build/packages/ext-theme-' + me.theme +
+            '/build/resources/ext-theme-' + me.theme + '-all.css');
 
-        me.includeScript(me.extJsRoot + 'ext' + suffixExt + '.js');
-        me.includeScript(me.extensibleRoot + 'lib/extensible' + suffixExtensible + '.js' + cacheBuster);
+        if (me.mode === 'release') {
+            me.includeStylesheet(me.extensibleRoot + 'resources/css/extensible-all.css' + cacheBuster);
+        }
+        else {
+            me.includeStylesheet(me.extensibleRoot + 'resources/css/calendar.css' + cacheBuster);
+            me.includeStylesheet(me.extensibleRoot + 'resources/css/calendar-colors.css' + cacheBuster);
+            me.includeStylesheet(me.extensibleRoot + 'resources/css/recurrence.css' + cacheBuster);
+        }
+        me.includeStylesheet(me.extensibleRoot + 'examples/examples.css' + cacheBuster);
+
+        // Include JS files
+        if (me.mode === 'debug' || me.isIE) {
+            // IE does not work in dynamic mode for the Extensible examples currently
+            // based on how it (mis)handles loading of scripts when mixing includes
+            // and in-page scripts. Make sure IE always uses the regular debug versions.
+            me.includeScript(me.extJsRoot + 'build/ext-all-debug.js');
+            me.includeScript(me.extensibleRoot + 'lib/extensible-all-debug.js' + cacheBuster);
+        }
+        else if (me.mode === 'release') {
+            // For release we want to refresh the cache on first load, but allow caching
+            // after that, so use the version number instead of a unique string
+            cacheBuster = '?_dc=' + Extensible.version;
+            me.includeScript(me.extJsRoot + 'build/ext-all.js');
+            me.includeScript(me.extensibleRoot + 'lib/extensible-all.js' + cacheBuster);
+        }
+        else {
+            if (me.mode === 'dynamic-extensible') {
+                me.includeScript(me.extJsRoot + 'build/ext-all-debug.js');
+            }
+            else {
+                me.includeScript(me.extJsRoot + 'build/ext-debug.js');
+            }
+            me.includeScript(me.extensibleRoot + 'lib/extensible-bootstrap.js' + cacheBuster);
+        }
         me.includeScript(me.extensibleRoot + 'examples/examples.js?_dc=' + Extensible.version);
 
         if (me.language) {

diff --git a/examples/calendar/TestApp/App.js b/examples/calendar/TestApp/App.js
@@ -67,7 +67,7 @@ Ext.define('Extensible.example.calendar.TestApp.App', {
                 items: [{
                     id:'app-west',
                     region: 'west',
-                    width: 179,
+                    width: 215,
                     border: false,
                     items: [{
                         xtype: 'datepicker',
@@ -86,7 +86,7 @@ Ext.define('Extensible.example.calendar.TestApp.App', {
                         xtype: 'extensible.calendarlist',
                         store: this.calendarStore,
                         border: false,
-                        width: 178
+                        width: '100%'
                     }]
                 },{
                     xtype: 'extensible.calendarpanel',

diff --git a/examples/calendar/data/Events.js b/examples/calendar/data/Events.js
@@ -25,7 +25,7 @@ Ext.define('Extensible.example.calendar.data.Events', {
                     "start" : makeDate(0, 11, 30),
                     "end"   : makeDate(0, 13),
                     "loc"   : "Chuy's!",
-                    "url"   : "http : //chuys.com",
+                    "url"   : "http://chuys.com",
                     "notes" : "Order the queso",
                     "rem"   : "15"
                 },{

diff --git a/examples/calendar/remote/recurrence.js b/examples/calendar/remote/recurrence.js
@@ -25,13 +25,13 @@ Ext.onReady(function() {
         // Tell PHP to start a debugging session for an IDE to connect to.
         // This is passed as an additional parameter on each request:
         //XDEBUG_SESSION_START: 1,
-        
+
         // Slight hack just so that we can reuse the same demo server code
         // with persistence across multiple examples so that each example gets
         // its own unique data set:
         app_id: 'recurrence'
     };
-    
+
     // Set up mappings to match the DB column names as defined in examples/server/setup.sql
     Extensible.calendar.data.EventMappings = {
         EventId:     {name: 'EventId', mapping:'id', type:'string'},
@@ -44,45 +44,45 @@ Ext.onReady(function() {
         Url:         {name: 'Url', mapping: 'url'},
         IsAllDay:    {name: 'IsAllDay', mapping: 'all_day', type: 'boolean'},
         Reminder:    {name: 'Reminder', mapping: 'reminder'},
-        
+
         // NOTE that since we want recurrence support in this demo, we must also include
         // the recurrence-specific data mappings. Typically RRule and Duration are the only
         // values that need to be persisted and returned with events, and they are the only ones
         // mapped to columns in the MySQL database:
-        RRule:    {name: 'RRule', mapping: 'rrule', type: 'string', useNull: true},
-        Duration: {name: 'Duration', mapping: 'duration', defaultValue: -1, useNull: true, type: 'int'},
-        
+        RRule:    {name: 'RRule', mapping: 'rrule', type: 'string', allowNull: true},
+        Duration: {name: 'Duration', mapping: 'duration', defaultValue: -1, allowNull: true, type: 'int'},
+
         // These additional values are required for processing recurring events properly,
         // but are either calculated or used only during editing. They still must be mapped
         // to whatever the server expects, but typically aren't persisted in the DB. For additional
         // details see the comments in src/calendar/data/EventMappings.
-        OriginalEventId:    {name: 'OriginalEventId', mapping: 'origid', type: 'string', useNull: true},
-        RSeriesStartDate:   {name: 'RSeriesStartDate', mapping: 'rsstart', type: 'date', dateFormat: 'c', useNull: true},
-        RInstanceStartDate: {name: 'RInstanceStartDate', mapping: 'ristart', type: 'date', dateFormat: 'c', useNull: true},
-        REditMode:          {name: 'REditMode', mapping: 'redit', type: 'string', useNull: true}
+        OriginalEventId:    {name: 'OriginalEventId', mapping: 'origid', type: 'string', allowNull: true},
+        RSeriesStartDate:   {name: 'RSeriesStartDate', mapping: 'rsstart', type: 'date', dateFormat: 'c', allowNull: true},
+        RInstanceStartDate: {name: 'RInstanceStartDate', mapping: 'ristart', type: 'date', dateFormat: 'c', allowNull: true},
+        REditMode:          {name: 'REditMode', mapping: 'redit', type: 'string', allowNull: true}
     };
     Extensible.calendar.data.EventModel.reconfigure();
-    
+
     // Calendars are loaded remotely from a static JSON file
     var calendarStore = Ext.create('Extensible.calendar.data.MemoryCalendarStore', {
         autoLoad: true,
         proxy: {
             type: 'ajax',
             url: '../data/calendars.json',
             noCache: false,
-            
+
             reader: {
                 type: 'json',
-                root: 'calendars'
+                rootProperty: 'calendars'
             }
         }
     });
-    
+
     // Events are loaded remotely via Ajax. For simplicity in this demo we use simple param-based
     // actions, although you could easily use REST instead, swapping out the proxy type below.
     // The event data will still be passed as JSON in the request body.
     var apiBase = '../../server/php/api/events-recurrence.php?action=';
-    
+
     var eventStore = Ext.create('Extensible.calendar.data.EventStore', {
         autoLoad: true,
         proxy: {
@@ -91,7 +91,7 @@ Ext.onReady(function() {
             pageParam: null,
             startParam: null,
             limitParam: null,
-            
+
             api: {
                 read:    apiBase + 'load',
                 create:  apiBase + 'add',
@@ -100,7 +100,7 @@ Ext.onReady(function() {
             },
             reader: {
                 type: 'json',
-                root: 'data'
+                rootProperty: 'data'
             },
             writer: {
                 type: 'json',
@@ -130,7 +130,7 @@ Ext.onReady(function() {
             }
         }
     });
-    
+
     // This is the code for the entire UI:
     Ext.create('Ext.container.Viewport', {
         layout: 'border',
@@ -149,7 +149,7 @@ Ext.onReady(function() {
             eventStore: eventStore,
             calendarStore: calendarStore,
             title: 'Recurrence Calendar',
-    
+
             // This is the magical config that enables the recurrence edit
             // widget to appear in the event form. Without it, any existing
             // recurring events sent from the server will still be rendered
@@ -159,4 +159,4 @@ Ext.onReady(function() {
             recurrence: true
         }]
     });
-});
+});
diff --git a/examples/calendar/remote/remote.js b/examples/calendar/remote/remote.js
@@ -25,13 +25,13 @@ Ext.onReady(function() {
         // Tell PHP to start a debugging session for an IDE to connect to.
         // This is passed as an additional parameter on each request:
         // XDEBUG_SESSION_START: 1,
-        
+
         // Slight hack just so that we can reuse the same demo server code
         // with persistence across multiple examples so that each example gets
         // its own unique data set:
         app_id: 'remote'
     };
-    
+
     // Set up mappings to match the DB column names as defined in examples/server/setup.sql
     Extensible.calendar.data.EventMappings = {
         EventId:     {name: 'EventId', mapping:'id', type:'string'},
@@ -46,27 +46,27 @@ Ext.onReady(function() {
         Reminder:    {name: 'Reminder', mapping: 'reminder'}
     };
     Extensible.calendar.data.EventModel.reconfigure();
-    
+
     // Calendars are loaded remotely from a static JSON file
     var calendarStore = Ext.create('Extensible.calendar.data.MemoryCalendarStore', {
         autoLoad: true,
         proxy: {
             type: 'ajax',
             url: '../data/calendars.json',
             noCache: false,
-            
+
             reader: {
                 type: 'json',
-                root: 'calendars'
+                rootProperty: 'calendars'
             }
         }
     });
-    
+
     // Events are loaded remotely via Ajax. For simplicity in this demo we use simple param-based
     // actions, although you could easily use REST instead, swapping out the proxy type below.
     // The event data will still be passed as JSON in the request body.
     var apiBase = '../../server/php/api/events-basic.php?action=';
-    
+
     var eventStore = Ext.create('Extensible.calendar.data.EventStore', {
         autoLoad: true,
         proxy: {
@@ -75,7 +75,7 @@ Ext.onReady(function() {
             pageParam: null,
             startParam: null,
             limitParam: null,
-            
+
             api: {
                 read:    apiBase + 'load',
                 create:  apiBase + 'add',
@@ -84,7 +84,7 @@ Ext.onReady(function() {
             },
             reader: {
                 type: 'json',
-                root: 'data'
+                rootProperty: 'data'
             },
             writer: {
                 type: 'json',
@@ -114,7 +114,7 @@ Ext.onReady(function() {
             }
         }
     });
-    
+
     // This is the actual calendar setup code -- pretty simple!
     var calendarPanel = Ext.create('Extensible.calendar.CalendarPanel', {
         id: 'calendar-remote',
@@ -123,7 +123,7 @@ Ext.onReady(function() {
         calendarStore: calendarStore,
         title: 'Remote Calendar'
     });
-    
+
     Ext.create('Ext.container.Viewport', {
         layout: 'border',
         items: [{
@@ -138,7 +138,7 @@ Ext.onReady(function() {
             calendarPanel
         ]
     });
-    
+
     // You can optionally call load() here if you prefer instead of using the
     // autoLoad config.  Note that as long as you call load AFTER the store
     // has been passed into the CalendarPanel the default start and end date parameters
@@ -147,9 +147,9 @@ Ext.onReady(function() {
     // it will call the remote read method without any date parameters, which is most
     // likely not what you'll want.
     // store.load({ ... });
-    
+
     var errorCheckbox = Ext.get('forceError');
-     
+
     var setRemoteErrorMode = function() {
         if (errorCheckbox.dom.checked) {
             // force an error response to test handling of CUD (not R) actions. this param is
@@ -162,7 +162,7 @@ Ext.onReady(function() {
             calendarPanel.setTitle('Remote Calendar');
         }
     };
-    
+
     setRemoteErrorMode();
     errorCheckbox.on('click', setRemoteErrorMode);
-});
+});
diff --git a/examples/calendar/window.js b/examples/calendar/window.js
@@ -36,7 +36,7 @@ Ext.onReady(function(){
         this.calendarWin.show();
     };
 
-    Ext.fly('cal-win').on('click', showWindow, this);
+    Ext.get('cal-win').on('click', showWindow, this);
 
     showWindow();
 });