migrate to extjs 5: CRUD

Extensible-config.js

@@ -3,15 +3,15 @@ Extensible = {
 };
 /**
  * =================================================================================================
- * 
+ *
  *   THIS FILE IS FOR *DEV* MODE ONLY, NOT FOR PRODUCTION USE!
- * 
+ *
  * =================================================================================================
- * 
+ *
  * This is intended as a development mode only convenience so that you can configure all include
  * paths for all Extensible examples in one place. For production deployment you should configure
  * your application with your own custom includes and/or Ext.Loader configuration directly.
- * 
+ *
  * =================================================================================================
  */
 Extensible.Config = {
@@ -21,26 +21,29 @@ Extensible.Config = {
     defaults: {
         /**
          * The mode to use for loading framework files. Valid values are:
-         * 
+         *
          * - 'release': minified single file (e.g. ext-all.js)
          * - 'debug': (default) non-minifed single file (e.g. ext-all-debug.js)
          * - 'dynamic': uses Ext.Loader to load classes individually (e.g., ext.js). NOTE: this
          *    option does not work for IE, which will be defaulted to the 'debug' option.
-         * 
+         * - 'dynamic-extensible': Loads the Extensible framework dynically and the EXT JS framework from a
+         *   non-minified single file. This loads much faster than the 'dynamic' mode. NOTE: This
+         *    option does not work for IE, which will be defaulted to the 'debug' option.
+         *
          * Typically the default of 'debug' is the best trade-off between code readability and
          * load/execution speed. If you need to step into framework files frequently during
          * debugging you might switch to 'dynamic' mode -- it is much slower during initial
          * page load but generally provides a faster and easier debugging experience.
-         * 
+         *
          * Note that for debug and release modes to reflect any code or CSS changes made to Extensible
          * files you must rebuild the framework after each change using the scripts provided under
          * the `/build` folder (requires Java). If you cannot build the framework and you've made any
          * changes to Extensible files you should use dynamic mode to ensure that changes are reflected.
-         * 
+         *
          * @config {String} mode
          */
         mode: 'debug',
-        
+
         /**
          * The root path to the Ext JS framework (defaults to loading 4.2.0 from the Sencha CDN via
          * `http://cdn.sencha.com/ext/gpl/4.2.0/`). Path should be absolute and should end with a '/'.
@@ -61,55 +64,55 @@ 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,
          * 'Extensible-config.js', which is shipped in the root folder of Extensible). Path should
          * be absolute and should end with a '/'.
-         * 
+         *
          * Alternate example values:
-         * 
+         *
          * // A custom absolute path:
          * http://localhost/extensible/
          * http://mydomain/extensible/1.0.1/
-         * 
+         *
          * @config {String} extensibleRoot
          */
         extensibleRoot: null, // initialized dynamically in getSdkPath()
-        
+
         /**
          * True to allow the default browser behavior of caching the Extensible JS and CSS files
          * after initial load (defaults to true), or false to append a unique cache-buster parameter
          * to the url to enforce reloading Extensible files with each page refresh (useful if you are
          * actively changing and debugging Extensible code). If true, the current version number of
          * Extensible will still be used to force a reload with each new version of the framework, but
          * after the initial load of each version the cached files will be used.
-         * 
+         *
          * This option only applies when using `debug` or `dynamic` modes. In `release` mode the Extensible
          * version number will be used to ensure that Extensible files are always cached after the initial
          * load of each release and this option will be ignored. Note that when using `dynamic` mode you
          * would additionally have to ensure that the Ext.Loader's `disableCaching` option is true in order
-         * to add the cache buster parameter to each dynamically-loaded class. 
-         * 
+         * to add the cache buster parameter to each dynamically-loaded class.
+         *
          * Note that this option does not affect the caching of Ext JS files in any way. If you are
          * using dynamic loading, the Ext Loader will govern caching, otherwise the default browser
          * caching will be in effect.
-         * 
+         *
          * @config {Boolean} cacheExtensible
          */
         cacheExtensible: true,
 
         /**
          * Language files to load for the Ext JS and Extensible frameworks. Valid values are ISO language codes of
          * supported languages. See directory src/locale for a list of supported languages. Examples are:
-         * 
+         *
          * - 'en'
          * - 'en_GB'
          * - 'de'
          * - 'fr'
          * - etc...
-         * 
+         *
          * NOTE: This setting will NOT work for Ext versions < 4.1 due to how the locale files were written
          * in 4.0.x. Because the 4.0.x locale files check for existence of classes by reference rather than
          * by name, they do not play nicely when loaded asynchronously (Ext may load later, causing runtime
@@ -119,96 +122,98 @@ 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'
     },
-    
+
     /**
      * Sets up all configurable properties and writes all includes to the document.
      */
     init: function() {
         var me = this,
             config = window.ExtensibleDefaults || {};
-        
+
         me.isIE = /msie/.test(navigator.userAgent.toLowerCase());
-        
+
         me.mode = config.mode || me.defaults.mode;
         me.extJsRoot = config.extJsRoot || me.defaults.extJsRoot;
         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();
     },
-    
+
     // private -- returns the current url to this script file, which is shipped in the SDK root folder
     getSdkPath: function() {
         var scripts = document.getElementsByTagName('script'),
             thisScriptSrc = scripts[scripts.length - 1].src,
             sdkPath = thisScriptSrc.substring(0, thisScriptSrc.lastIndexOf('/') + 1);
-        
+
         return sdkPath;
     },
-    
+
     // private -- helper function for ease of deployment
     adjustPaths: function() {
         if (this.extensibleRoot.indexOf('ext.ensible.com') > -1) {
             // If hosted at ext.ensible.com force non-debug release build includes
             this.mode = 'release';
         }
     },
-    
+
     includeStylesheet: function(filePath) {
         document.write('<link rel="stylesheet" type="text/css" href="' + filePath + '" />');
     },
-    
+
     includeScript: function(filePath) {
         document.write('<script type="text/javascript" src="' + filePath + '"></script>');
     },
-    
+
     // 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));
+
+        // Include style sheets
+        me.includeStylesheet(me.extJsRoot + '/build/packages/ext-theme-' + me.theme + '/build/resources/ext-theme-' + me.theme + '-all.css');
+        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.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);
-
-        me.includeScript(me.extJsRoot + 'ext' + suffixExt + '.js');
-        me.includeScript(me.extensibleRoot + 'lib/extensible' + suffixExtensible + '.js' + cacheBuster);
         me.includeScript(me.extensibleRoot + 'examples/examples.js?_dc=' + Extensible.version);
-        
+
         if (me.language) {
             me.includeScript(me.extJsRoot + 'locale/ext-lang-' + me.language + '.js');
             me.includeScript(me.extensibleRoot + 'src/locale/extensible-lang-' + me.language + '.js' + cacheBuster);

build/resources/extensible.jsb2

@@ -38,6 +38,9 @@
         },{
             "text": "Month.js",
             "path": "../../src/calendar/template/"
+        },{
+            "text": "AgendaBody.js",
+            "path": "../../src/calendar/template/"
         },{
             "text": "CalendarScrollManager.js",
             "path": "../../src/calendar/dd/"
@@ -128,6 +131,15 @@
         },{
             "text": "MultiWeek.js",
             "path": "../../src/calendar/view/"
+        },{
+            "text": "AgendaHeader.js",
+            "path": "../../src/calendar/view/"
+        },{
+            "text": "AgendaBody.js",
+            "path": "../../src/calendar/view/"
+        },{
+            "text": "Agenda.js",
+            "path": "../../src/calendar/view/"
         },{
             "text": "CalendarPanel.js",
             "path": "../../src/calendar/"

examples/calendar/TestApp/App.js

@@ -1,6 +1,6 @@
 Ext.Loader.setConfig({
     enabled: true,
-    //disableCaching: false,
+    disableCaching: false,
     paths: {
         "Extensible": "../../../src",
         "Extensible.example": "../.."
@@ -40,7 +40,11 @@ Ext.define('Extensible.example.calendar.TestApp.App', {
             // of MemoryEventStore to see how automatic store messaging is implemented.
             autoMsg: false
         });
-
+
+        // Make the calendar stateful. This is optional. If set, the application will remember hidden
+        // calendars in the calendar list panel.
+        Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
+
         // This is the app UI layout code.  All of the calendar views are subcomponents of
         // CalendarPanel, but the app title bar and sidebar/navigation calendar are separate
         // pieces that are composed in app-specific layout code since they could be omitted
@@ -105,6 +109,7 @@ Ext.define('Extensible.example.calendar.TestApp.App', {
                         //viewStartHour: 6,
                         //viewEndHour: 18,
                         //minEventDisplayMinutes: 15
+                        startDay: 0,
                         showTime: false
                     },
 
@@ -119,14 +124,28 @@ Ext.define('Extensible.example.calendar.TestApp.App', {
                     multiWeekViewCfg: {
                         //weekCount: 3
                     },
-
+
+                    agendaViewCfg: {
+                        linkDatesToDayView: true,
+                        dateRangeDefault: '3months'
+                    },
+
+                    listViewCfg: {
+                        linkDatesToDayView: true,
+                        dateRangeDefault: '3months',
+                        simpleList: true,
+                        groupBy: 'month'
+                    },
+
                     // Some optional CalendarPanel configs to experiment with:
                     //readOnly: true,
                     //showDayView: false,
                     //showMultiDayView: true,
                     //showWeekView: false,
                     //showMultiWeekView: false,
                     //showMonthView: false,
+                    showAgendaView: true,
+                    showListView: true,
                     //showNavBar: false,
                     //showTodayText: false,
                     //showTime: false,
@@ -135,6 +154,12 @@ Ext.define('Extensible.example.calendar.TestApp.App', {
                     //title: 'My Calendar', // the header of the calendar, could be a subtitle for the app
 
                     listeners: {
+                        'datechange': {
+                            fn: function(vw, startDt, viewStart, viewEnd){
+                                this.updateTitle(viewStart, viewEnd);
+                            },
+                            scope: this
+                        },
                         'eventclick': {
                             fn: function(vw, rec, el){
                                 this.clearMsg();

examples/calendar/basic.js

@@ -26,7 +26,10 @@ Ext.onReady(function(){
         renderTo: 'simple',
         title: 'Basic Calendar',
         width: 700,
-        height: 500
+        height: 500,
+        activeItem: 3, // default to month view
+        showAgendaView: true,
+        showListView: true
     });
 
     //
@@ -38,6 +41,8 @@ Ext.onReady(function(){
         eventStore: eventStore,
         renderTo: 'panel',
         title: 'Calendar with Panel Configs',
+        showAgendaView: true,
+        showListView: true,
         activeItem: 1, // default to week view
         width: 700,
         height: 500,

examples/calendar/custom-mappings.js

@@ -81,6 +81,9 @@ Ext.onReady(function(){
         calendarStore: calendarStore,
         renderTo: 'cal',
         title: 'Custom Event Mappings',
+        showAgendaView: true,
+        showListView: true,
+        activeItem: 3, // default to month view
         width: 800,
         height: 700
     });