diff --git a/Extensible-config.js b/Extensible-config.js
index f8aee88d..2b7853ef 100644
--- 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
index 2b655eee..8ff4e4c3 100644
--- 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
index a67602eb..3d4cf31e 100644
--- 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
index 0cca44a7..657ea26e 100644
--- 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,25 +44,25 @@ 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,
@@ -70,19 +70,19 @@ Ext.onReady(function() {
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
}]
});
-});
\ No newline at end of file
+});
diff --git a/examples/calendar/remote/remote.js b/examples/calendar/remote/remote.js
index df53ccad..a0c6df25 100644
--- 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,7 +46,7 @@ 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,
@@ -54,19 +54,19 @@ Ext.onReady(function() {
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);
-});
\ No newline at end of file
+});
diff --git a/examples/calendar/window.js b/examples/calendar/window.js
index 6cc0e4be..d9470f6b 100644
--- 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();
});
diff --git a/examples/examples.js b/examples/examples.js
index 310ecd16..85e4a8a8 100644
--- a/examples/examples.js
+++ b/examples/examples.js
@@ -7,10 +7,13 @@ Ext.define('Extensible.example', {
this.msgCt.alignTo(document, 't-t');
var s = Ext.String.format.apply(String, Array.prototype.slice.call(arguments, 1));
var m = Ext.core.DomHelper.append(this.msgCt, {html:''}, true);
-
- m.slideIn('t').pause(3000).ghost('t', {remove:true});
+
+ m.slideIn('t').ghost('t', {
+ remove:true,
+ duration: 3000
+ });
},
-
+
insertExamplesMenuLink: function() {
var sampleCt = Ext.get('sample-overview');
if (sampleCt) {
@@ -21,7 +24,7 @@ Ext.define('Extensible.example', {
});
}
},
-
+
insertViewSourceLink: function() {
var sampleCt = Ext.get('sample-overview');
if (sampleCt) {
@@ -47,7 +50,7 @@ Ext.onReady(function() {
'either need to build the project first (see the included README ' +
'file) or you should download the pre-built files from the Extensible website.';
-
+
Ext.Msg.show({
title: 'Extensible Not Ready',
msg: msg,
@@ -56,4 +59,4 @@ Ext.onReady(function() {
maxWidth: 400
});
}
-});
\ No newline at end of file
+});
diff --git a/examples/server/php/api/events-common.php b/examples/server/php/api/events-common.php
index 9a76a2ca..bc7df940 100644
--- a/examples/server/php/api/events-common.php
+++ b/examples/server/php/api/events-common.php
@@ -1,40 +1,40 @@
modify('+1 day');
$end_dt = $endDate->format('Y-m-d');
}
-
+
// Set the app_id to allow each example to reuse this API with its own data.
// In a real application this would not be needed.
- $app_id = $event['app_id'] = isset($_REQUEST['app_id']) ? strtolower($_REQUEST['app_id']) : null;
-
+ $app_id = $event['app_id'] = isset($_REQUEST['app_id']) ? strtolower($_REQUEST['app_id']) : 'remote';
+
// The demos support simulating server failure for testing purposes
$fail = isset($_REQUEST['fail']) ? TRUE : FALSE;
// Helper function for outputting event resposnes consistently
function out($result, $msg = null) {
global $table;
-
+
if (isset($result) && $result !== 0) {
echo json_encode(array(
'success' => true,
@@ -49,7 +49,7 @@ function out($result, $msg = null) {
));
}
};
-
+
if ($fail) {
// The client requested a hard-coded failure, useful for testing
echo json_encode(array(
@@ -58,10 +58,10 @@ function out($result, $msg = null) {
));
die();
}
-
+
function handleException($e) {
$msg = $e->getMessage();
-
+
if (preg_match('/table(.+)not found/i', $msg)) {
out(0, 'Your database does not appear to be properly configured. '.
'Please see Extensible > examples > server > README.md. Details: '.$msg);
diff --git a/examples/server/php/api/events-recurrence.php b/examples/server/php/api/events-recurrence.php
index 81d184f9..a6c6faf6 100644
--- a/examples/server/php/api/events-recurrence.php
+++ b/examples/server/php/api/events-recurrence.php
@@ -260,12 +260,13 @@ function calculateEndDate($event) {
if (isset($recurrence->end_date) && $recurrence->end_date < $max_date) {
// The RRULE includes an explicit end date, so use that
- $end = $recurrence->end_date->format($date_format).'Z';
+ $recurrence->end_date->setTimezone(new DateTimeZone('UTC'));
+ $end = $recurrence->end_date->format($date_format);
}
else if (isset($recurrence->count) && $recurrence->count > 0) {
// The RRULE has a limit, so calculate the end date based on the instance count
$count = 0;
- $newEnd;
+ $newEnd = null;
$rdates = $recurrence->recur($event[$mappings['start_date']])->rrule($rrule);
while ($rdate = $rdates->next()) {
@@ -276,7 +277,8 @@ function calculateEndDate($event) {
}
// The 'minutes' portion should match Extensible.calendar.data.EventModel.resolution:
$newEnd->modify('+'.$event[$mappings['duration']].' minutes');
- $end = $newEnd->format($date_format).'Z';
+ $newEnd->setTimezone(new DateTimeZone('UTC'));
+ $end = $newEnd->format($date_format);
}
else {
// The RRULE does not specify an end date or count, so default to max date
diff --git a/resources/css/calendar.css b/resources/css/calendar.css
index d003db7d..89777814 100644
--- a/resources/css/calendar.css
+++ b/resources/css/calendar.css
@@ -1,19 +1,19 @@
/*******************************************
- *
+ *
* Ext Calendar styles
*
******************************************/
/* -----------------------------------------
- * Ext overrides
+ * Ext overrides
*/
.x-strict .x-webkit .x-small-editor .x-form-field-wrap .x-form-trigger {
height: 21px;
}
/* -----------------------------------------
- * Shared calendar view containers
+ * Shared calendar view containers
*/
.x-panel-tbar .ext-cal-toolbar {
padding: 3px;
@@ -168,7 +168,7 @@
}
.ext-cal-dayview .ext-cal-dtitle {
padding: 8px 1px 2px;
-}
+}
.ext-cal-hd-ad-bg-tbl {
position: absolute;
left: 0;
@@ -354,7 +354,7 @@
.ext-cal-readonly .ext-cal-day,
.ext-cal-readonly .ext-cal-dtitle {
cursor: default;
-}
+}
.ext-day-over {
background: #D1EAEF !important;
}
@@ -756,22 +756,14 @@ td.ext-cal-dtitle-today div {
}
/*******************************************
- *
+ *
* Calendar navigation picker styles
- *
+ *
******************************************/
.ext-cal-nav-picker {
border-style: none none solid;
border-color: #99BBE8;
}
-.ext-cal-nav-picker .x-datepicker-header {
- background: #D3E1F1 url(../images/default/ext/toolbar-bg.gif) repeat-x;
-}
-.ext-cal-nav-picker .x-datepicker-month,
-.ext-cal-nav-picker .x-datepicker-prev,
-.ext-cal-nav-picker .x-datepicker-next {
- background: transparent;
-}
.ext-cal-nav-picker .x-datepicker-prev a {
background-image: url(../images/default/ext/page-prev.gif);
}
@@ -786,10 +778,6 @@ td.ext-cal-dtitle-today div {
font-weight: bold;
font-family: arial,tahoma,verdana,helvetica;
}
-.ext-cal-nav-picker .x-datepicker-month .x-btn-split-right {
- background-image: url(../images/default/ext/button-arrow.gif) !important;
- background-position: right 4px;
-}
.ext-cal-nav-picker .x-datepicker-inner {
border-top: 1px solid #BBCCFF;
}
@@ -812,7 +800,7 @@ td.ext-cal-dtitle-today div {
}
/*******************************************
- *
+ *
* Calendar editor window styles
*
******************************************/
@@ -831,7 +819,7 @@ td.ext-cal-dtitle-today div {
}
/*******************************************
- *
+ *
* Calendar form styles
*
******************************************/
@@ -864,7 +852,7 @@ td.ext-cal-dtitle-today div {
}
/*******************************************
- *
+ *
* DateRangeField styles
*
******************************************/
@@ -878,7 +866,7 @@ td.ext-cal-dtitle-today div {
}
/*******************************************
- *
+ *
* ContextMenu styles
*
******************************************/
@@ -896,7 +884,7 @@ td.ext-cal-dtitle-today div {
}
/*******************************************
- *
+ *
* CalendarList styles
*
******************************************/
@@ -969,12 +957,9 @@ td.ext-cal-dtitle-today div {
.extensible-cal-icon-cal-show {
background-image:url(../images/default/silk/calendar_view_month.png) !important;
}
-.extensible-cal-icon-cal-colors {
- background-image:url(../images/default/silk/color_wheel.png) !important;
-}
/*******************************************
- *
+ *
* CalendarList menu styles
*
******************************************/
@@ -993,7 +978,7 @@ td.ext-cal-dtitle-today div {
outline: 0 none;
cursor: pointer;
}
-.x-calendar-list-menu .x-color-picker a:hover,
+.x-calendar-list-menu .x-color-picker a:hover,
.x-calendar-list-menu .x-color-picker a.x-color-picker-selected {
border-color: #8BB8F3;
}
@@ -1007,4 +992,4 @@ td.ext-cal-dtitle-today div {
height: 14px;
width: 14px;
line-height: 10px;
-}
\ No newline at end of file
+}
diff --git a/src/calendar/CalendarPanel.js b/src/calendar/CalendarPanel.js
index 002b6130..f1c38944 100644
--- a/src/calendar/CalendarPanel.js
+++ b/src/calendar/CalendarPanel.js
@@ -7,7 +7,7 @@
Ext.define('Extensible.calendar.CalendarPanel', {
extend: 'Ext.panel.Panel',
alias: 'widget.extensible.calendarpanel',
-
+
requires: [
'Ext.layout.container.Card',
'Extensible.calendar.view.Day',
@@ -16,7 +16,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
'Extensible.calendar.view.MultiDay',
'Extensible.calendar.view.MultiWeek'
],
-
+
/**
* @cfg {Number} activeItem
* The 0-based index within the available views to set as the default active view (defaults to undefined).
@@ -124,7 +124,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
/**
* @cfg {String} multiDayText
* **Deprecated.** Please override {@link #getMultiDayText} instead.
- *
+ *
* Text to use for the 'X Days' nav bar button (defaults to "{0} Days" where {0} is automatically
* replaced by the value of the {@link #multDayViewCfg}'s dayCount value if available, otherwise it
* uses the view default of 3).
@@ -139,7 +139,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
/**
* @cfg {String} multiWeekText
* **Deprecated.** Please override {@link #getMultiWeekText} instead.
- *
+ *
* Text to use for the 'X Weeks' nav bar button (defaults to "{0} Weeks" where {0} is automatically
* replaced by the value of the {@link #multiWeekViewCfg}'s weekCount value if available, otherwise it
* uses the view default of 2).
@@ -220,34 +220,275 @@ Ext.define('Extensible.calendar.CalendarPanel', {
* A config object that will be applied only to the {@link Extensible.calendar.form.EventDetails
* EventEditForm} managed by this CalendarPanel.
*/
-
+
/**
* A reference to the {@link Extensible.calendar.view.AbstractCalendar view} that is currently active.
* @type {Extensible.calendar.view.AbstractCalendar}
* @property activeView
*/
- layout: {
- type: 'card',
- deferredRender: true
- },
-
+ // private
+ layout: 'card',
+
// private property
startDate: new Date(),
+ /**
+ * @event eventadd
+ * Fires after a new event is added to the underlying store
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.calendar.data.EventModel} rec The new
+ * {@link Extensible.calendar.data.EventModel record} that was added
+ */
+
+ /**
+ * @event eventupdate
+ * Fires after an existing event is updated
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.calendar.data.EventModel} rec The new
+ * {@link Extensible.calendar.data.EventModel record} that was updated
+ */
+
+ /**
+ * @event beforeeventdelete
+ * Fires before an event is deleted by the user. This is a cancelable event, so returning
+ * false from a handler will cancel the delete operation.
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.calendar.data.EventModel} rec The {@link Extensible.calendar.data.EventModel record}
+ * for the event that was deleted
+ * @param {Ext.Element} el The target element
+ */
+
+ /**
+ * @event eventdelete
+ * Fires after an event is deleted by the user.
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.calendar.data.EventModel} rec The
+ * {@link Extensible.calendar.data.EventModel record} for the event that was deleted
+ * @param {Ext.Element} el The target element
+ */
+
+ /**
+ * @event eventcancel
+ * Fires after an event add/edit operation is canceled by the user and no store update took place
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.calendar.data.EventModel} rec The new
+ * {@link Extensible.calendar.data.EventModel record} that was canceled
+ */
+
+ /**
+ * @event viewchange
+ * Fires after a different calendar view is activated (but not when the event edit form is activated)
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.CalendarView} view The view being activated (any valid
+ * {@link Extensible.calendar.view.AbstractCalendar CalendarView} subclass)
+ * @param {Object} info Extra information about the newly activated view. This is a plain object
+ * with following properties:
+ *
+ * * **activeDate**
+ * * The currently selected date
+ * * **viewStart**
+ * * The first date in the new view range
+ * * **viewEnd**
+ * * The last date in the new view range
+ */
+
+ /**
+ * @event editdetails
+ * Fires when the user selects the option to edit the selected event in the detailed edit form
+ * (by default, an instance of {@link Extensible.calendar.form.EventDetails}). Handling code
+ * should hide the active event editor and transfer the current event record to the appropriate
+ * instance of the detailed form by showing it and calling
+ * {@link Extensible.calendar.form.EventDetails#loadRecord loadRecord}.
+ * @param {Extensible.calendar.CalendarPanel} this The CalendarPanel
+ * @param {Extensible.calendar.view.AbstractCalendar} view The currently active
+ * {@link Extensible.calendar.view.AbstractCalendar CalendarView} subclass
+ * @param {Extensible.calendar.data.EventModel} rec The
+ * {@link Extensible.calendar.data.EventModel record} that is currently being edited
+ * @param {Ext.Element} el The target element
+ */
+
+ //
+ // NOTE: CalendarPanel also relays the following events from contained views as if
+ // they originated from this:
+ //
+
+ /**
+ * @event eventsrendered
+ * Fires after events are finished rendering in the view
+ * @param {Extensible.calendar.CalendarPanel} this
+ */
+
+ /**
+ * @event eventclick
+ * Fires after the user clicks on an event element.
+ *
+ * **NOTE:** This version of eventclick differs from the same
+ * event fired directly by {@link Extensible.calendar.view.AbstractCalendar CalendarView}
+ * subclasses in that it provides a default implementation (showing the default edit window)
+ * and is also cancelable (if a handler returns false the edit window will not be
+ * shown). This event when fired from a view class is simply a notification that an event was
+ * clicked and has no default behavior.
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.calendar.data.EventModel} rec The
+ * {@link Extensible.calendar.data.EventModel record} for the event that was clicked on
+ * @param {HTMLNode} el The DOM node that was clicked on
+ */
+
+ /**
+ * @event rangeselect
+ * Fires after the user drags on the calendar to select a range of dates/times in which to
+ * create an event
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Object} dates An object containing the start (StartDate property) and end (EndDate
+ * property) dates selected
+ * @param {Function} callback A callback function that MUST be called after the event handling
+ * is complete so that the view is properly cleaned up (shim elements are persisted in
+ * the view while the user is prompted to handle the range selection). The callback is
+ * already created in the proper scope, so it simply needs to be executed as a standard
+ * function call (e.g., callback()).
+ */
+
+ /**
+ * @event eventover
+ * Fires anytime the mouse is over an event element
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.calendar.data.EventModel} rec The
+ * {@link Extensible.calendar.data.EventModel record} for the event that the cursor is over
+ * @param {HTMLNode} el The DOM node that is being moused over
+ */
+
+ /**
+ * @event eventout
+ * Fires anytime the mouse exits an event element
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.calendar.data.EventModel} rec The
+ * {@link Extensible.calendar.data.EventModel record} for the event that the cursor exited
+ * @param {HTMLNode} el The DOM node that was exited
+ */
+
+ /**
+ * @event beforedatechange
+ * Fires before the start date of the view changes, giving you an opportunity to save state or
+ * anything else you may need to do prior to the UI view changing. This is a cancelable event, so
+ * returning false from a handler will cancel both the view change and the setting of the start date.
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Date} startDate The current start date of the view (as explained in {@link #getStartDate}
+ * @param {Date} newStartDate The new start date that will be set when the view changes
+ * @param {Date} viewStart The first displayed date in the current view
+ * @param {Date} viewEnd The last displayed date in the current view
+ */
+
+ /**
+ * @event dayclick
+ * Fires after the user clicks within a day/week view container and not on an event element
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Date} dt The date/time that was clicked on
+ * @param {Boolean} allday True if the day clicked on represents an all-day box, else false.
+ * @param {Ext.Element} el The Element that was clicked on
+ */
+
+ /**
+ * @event datechange
+ * Fires after the start date of the view changes
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Date} startDate The start date of the view (as explained in {@link #getStartDate}
+ * @param {Date} viewStart The first displayed date in the view
+ * @param {Date} viewEnd The last displayed date in the view
+ */
+
+ /**
+ * @event beforeeventmove
+ * Fires before an event element is dragged by the user and dropped in a new position. This is
+ * a cancelable event, so returning false from a handler will cancel the move operation.
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.calendar.data.EventModel} rec The
+ * {@link Extensible.calendar.data.EventModel record} for the event that will be moved
+ */
+
+ /**
+ * @event eventmove
+ * Fires after an event element is dragged by the user and dropped in a new position
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.calendar.data.EventModel} rec The
+ * {@link Extensible.calendar.data.EventModel record} for the event that was moved with
+ * updated start and end dates
+ */
+
+ /**
+ * @event initdrag
+ * Fires when a drag operation is initiated in the view
+ * @param {Extensible.calendar.CalendarPanel} this
+ */
+
+ /**
+ * @event dayover
+ * Fires while the mouse is over a day element
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Date} dt The date that is being moused over
+ * @param {Ext.Element} el The day Element that is being moused over
+ */
+
+ /**
+ * @event dayout
+ * Fires when the mouse exits a day element
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Date} dt The date that is exited
+ * @param {Ext.Element} el The day Element that is exited
+ */
+
+ /**
+ * @event beforeeventresize
+ * Fires after the user drags the resize handle of an event to resize it, but before the
+ * resize operation is carried out. This is a cancelable event, so returning false from a
+ * handler will cancel the resize operation. **NOTE:** This event is only fired
+ * from views that support event resizing.
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.calendar.data.EventModel} rec The
+ * {@link Extensible.calendar.data.EventModel record} for the event that was resized
+ * containing the updated start and end dates
+ */
+
+ /**
+ * @event eventresize
+ * Fires after the user drags the resize handle of an event and the resize operation is
+ * complete. **NOTE:** This event is only fired from views that support event resizing.
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Extensible.calendar.data.EventModel} rec The
+ * {@link Extensible.calendar.data.EventModel record} for the event that was resized
+ * containing the updated start and end dates
+ */
+
+ /**
+ * @event eventexception
+ * Fires after an event has been processed via an Ext proxy and returned with an exception. This
+ * could be because of a server error, or because the data returned success: false.
+ *
+ * The view provides default handling via the overrideable
+ * {@link Extensible.calendar.view.AbstractCalendar#notifyOnException notifyOnException} method. If
+ * any function handling this event returns false, the notifyOnException method will not be called.
+ *
+ * Note that only Server proxy and subclasses (including Ajax proxy) will raise this event.
+ *
+ * @param {Extensible.calendar.CalendarPanel} this
+ * @param {Object} response The raw response object returned from the server
+ * @param {Ext.data.Operation} operation The operation that was processed
+ * @since 1.6.0
+ */
+
initComponent: function() {
this.tbar = {
cls: 'ext-cal-toolbar',
border: true,
items: []
};
-
+
this.viewCount = 0;
-
+
var text,
multiDayViewCount = (this.multiDayViewCfg && this.multiDayViewCfg.dayCount) || 3,
multiWeekViewCount = (this.multiWeekViewCfg && this.multiWeekViewCfg.weekCount) || 2;
-
+
//
// TODO: Pull the configs for the toolbar/buttons out to the prototype for overrideability
//
@@ -265,9 +506,9 @@ Ext.define('Extensible.calendar.CalendarPanel', {
this.tbar.items.push({id: this.id+'-tb-jump-dt', xtype: 'datefield', width: 120, showToday: false, startDay: this.startDay});
this.tbar.items.push({id: this.id+'-tb-jump', text: this.goText, handler: this.onJumpClick, scope: this});
}
-
+
this.tbar.items.push('->');
-
+
if(this.showDayView) {
this.tbar.items.push({
id: this.id+'-tb-day', text: this.dayText, handler: this.onDayNavClick, scope: this, toggleGroup: this.id+'-tb-views'
@@ -301,257 +542,25 @@ Ext.define('Extensible.calendar.CalendarPanel', {
this.viewCount++;
this.showMonthView = true;
}
-
+
var idx = this.viewCount-1;
this.activeItem = (this.activeItem === undefined ? idx : (this.activeItem > idx ? idx : this.activeItem));
-
+
if(this.showNavBar === false) {
delete this.tbar;
this.addCls('x-calendar-nonav');
}
-
+
this.callParent(arguments);
-
- this.addEvents({
- /**
- * @event eventadd
- * Fires after a new event is added to the underlying store
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Extensible.calendar.data.EventModel} rec The new
- * {@link Extensible.calendar.data.EventModel record} that was added
- */
- eventadd: true,
- /**
- * @event eventupdate
- * Fires after an existing event is updated
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Extensible.calendar.data.EventModel} rec The new
- * {@link Extensible.calendar.data.EventModel record} that was updated
- */
- eventupdate: true,
- /**
- * @event beforeeventdelete
- * Fires before an event is deleted by the user. This is a cancelable event, so returning
- * false from a handler will cancel the delete operation.
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Extensible.calendar.data.EventModel} rec The {@link Extensible.calendar.data.EventModel record}
- * for the event that was deleted
- * @param {Ext.Element} el The target element
- */
- beforeeventdelete: true,
- /**
- * @event eventdelete
- * Fires after an event is deleted by the user.
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Extensible.calendar.data.EventModel} rec The
- * {@link Extensible.calendar.data.EventModel record} for the event that was deleted
- * @param {Ext.Element} el The target element
- */
- eventdelete: true,
- /**
- * @event eventcancel
- * Fires after an event add/edit operation is canceled by the user and no store update took place
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Extensible.calendar.data.EventModel} rec The new
- * {@link Extensible.calendar.data.EventModel record} that was canceled
- */
- eventcancel: true,
- /**
- * @event viewchange
- * Fires after a different calendar view is activated (but not when the event edit form is activated)
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Extensible.CalendarView} view The view being activated (any valid
- * {@link Extensible.calendar.view.AbstractCalendar CalendarView} subclass)
- * @param {Object} info Extra information about the newly activated view. This is a plain object
- * with following properties:
- *
- * * **activeDate**
- * * The currently selected date
- * * **viewStart**
- * * The first date in the new view range
- * * **viewEnd**
- * * The last date in the new view range
- */
- viewchange: true,
- /**
- * @event editdetails
- * Fires when the user selects the option to edit the selected event in the detailed edit form
- * (by default, an instance of {@link Extensible.calendar.form.EventDetails}). Handling code
- * should hide the active event editor and transfer the current event record to the appropriate
- * instance of the detailed form by showing it and calling
- * {@link Extensible.calendar.form.EventDetails#loadRecord loadRecord}.
- * @param {Extensible.calendar.CalendarPanel} this The CalendarPanel
- * @param {Extensible.calendar.view.AbstractCalendar} view The currently active
- * {@link Extensible.calendar.view.AbstractCalendar CalendarView} subclass
- * @param {Extensible.calendar.data.EventModel} rec The
- * {@link Extensible.calendar.data.EventModel record} that is currently being edited
- * @param {Ext.Element} el The target element
- */
- editdetails: true
-
-
- //
- // NOTE: CalendarPanel also relays the following events from contained views as if
- // they originated from this:
- //
-
- /**
- * @event eventsrendered
- * Fires after events are finished rendering in the view
- * @param {Extensible.calendar.CalendarPanel} this
- */
- /**
- * @event eventclick
- * Fires after the user clicks on an event element.
- *
- * **NOTE:** This version of eventclick differs from the same
- * event fired directly by {@link Extensible.calendar.view.AbstractCalendar CalendarView}
- * subclasses in that it provides a default implementation (showing the default edit window)
- * and is also cancelable (if a handler returns false the edit window will not be
- * shown). This event when fired from a view class is simply a notification that an event was
- * clicked and has no default behavior.
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Extensible.calendar.data.EventModel} rec The
- * {@link Extensible.calendar.data.EventModel record} for the event that was clicked on
- * @param {HTMLNode} el The DOM node that was clicked on
- */
- /**
- * @event rangeselect
- * Fires after the user drags on the calendar to select a range of dates/times in which to
- * create an event
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Object} dates An object containing the start (StartDate property) and end (EndDate
- * property) dates selected
- * @param {Function} callback A callback function that MUST be called after the event handling
- * is complete so that the view is properly cleaned up (shim elements are persisted in
- * the view while the user is prompted to handle the range selection). The callback is
- * already created in the proper scope, so it simply needs to be executed as a standard
- * function call (e.g., callback()).
- */
- /**
- * @event eventover
- * Fires anytime the mouse is over an event element
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Extensible.calendar.data.EventModel} rec The
- * {@link Extensible.calendar.data.EventModel record} for the event that the cursor is over
- * @param {HTMLNode} el The DOM node that is being moused over
- */
- /**
- * @event eventout
- * Fires anytime the mouse exits an event element
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Extensible.calendar.data.EventModel} rec The
- * {@link Extensible.calendar.data.EventModel record} for the event that the cursor exited
- * @param {HTMLNode} el The DOM node that was exited
- */
- /**
- * @event beforedatechange
- * Fires before the start date of the view changes, giving you an opportunity to save state or
- * anything else you may need to do prior to the UI view changing. This is a cancelable event, so
- * returning false from a handler will cancel both the view change and the setting of the start date.
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Date} startDate The current start date of the view (as explained in {@link #getStartDate}
- * @param {Date} newStartDate The new start date that will be set when the view changes
- * @param {Date} viewStart The first displayed date in the current view
- * @param {Date} viewEnd The last displayed date in the current view
- */
- /**
- * @event dayclick
- * Fires after the user clicks within a day/week view container and not on an event element
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Date} dt The date/time that was clicked on
- * @param {Boolean} allday True if the day clicked on represents an all-day box, else false.
- * @param {Ext.Element} el The Element that was clicked on
- */
- /**
- * @event datechange
- * Fires after the start date of the view changes
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Date} startDate The start date of the view (as explained in {@link #getStartDate}
- * @param {Date} viewStart The first displayed date in the view
- * @param {Date} viewEnd The last displayed date in the view
- */
- /**
- * @event beforeeventmove
- * Fires before an event element is dragged by the user and dropped in a new position. This is
- * a cancelable event, so returning false from a handler will cancel the move operation.
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Extensible.calendar.data.EventModel} rec The
- * {@link Extensible.calendar.data.EventModel record} for the event that will be moved
- */
- /**
- * @event eventmove
- * Fires after an event element is dragged by the user and dropped in a new position
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Extensible.calendar.data.EventModel} rec The
- * {@link Extensible.calendar.data.EventModel record} for the event that was moved with
- * updated start and end dates
- */
- /**
- * @event initdrag
- * Fires when a drag operation is initiated in the view
- * @param {Extensible.calendar.CalendarPanel} this
- */
- /**
- * @event dayover
- * Fires while the mouse is over a day element
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Date} dt The date that is being moused over
- * @param {Ext.Element} el The day Element that is being moused over
- */
- /**
- * @event dayout
- * Fires when the mouse exits a day element
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Date} dt The date that is exited
- * @param {Ext.Element} el The day Element that is exited
- */
- /**
- * @event beforeeventresize
- * Fires after the user drags the resize handle of an event to resize it, but before the
- * resize operation is carried out. This is a cancelable event, so returning false from a
- * handler will cancel the resize operation. **NOTE:** This event is only fired
- * from views that support event resizing.
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Extensible.calendar.data.EventModel} rec The
- * {@link Extensible.calendar.data.EventModel record} for the event that was resized
- * containing the updated start and end dates
- */
- /**
- * @event eventresize
- * Fires after the user drags the resize handle of an event and the resize operation is
- * complete. **NOTE:** This event is only fired from views that support event resizing.
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Extensible.calendar.data.EventModel} rec The
- * {@link Extensible.calendar.data.EventModel record} for the event that was resized
- * containing the updated start and end dates
- */
- /**
- * @event eventexception
- * Fires after an event has been processed via an Ext proxy and returned with an exception. This
- * could be because of a server error, or because the data returned success: false.
- *
- * The view provides default handling via the overrideable
- * {@link Extensible.calendar.view.AbstractCalendar#notifyOnException notifyOnException} method. If
- * any function handling this event returns false, the notifyOnException method will not be called.
- *
- * Note that only Server proxy and subclasses (including Ajax proxy) will raise this event.
- *
- * @param {Extensible.calendar.CalendarPanel} this
- * @param {Object} response The raw response object returned from the server
- * @param {Ext.data.Operation} operation The operation that was processed
- * @since 1.6.0
- */
- });
-
+
this.addCls('x-cal-panel');
-
+
if(this.eventStore) {
this.store = this.eventStore;
delete this.eventStore;
}
this.setStore(this.store);
-
+
var sharedViewCfg = {
showToday: this.showToday,
todayText: this.todayText,
@@ -566,13 +575,13 @@ Ext.define('Extensible.calendar.CalendarPanel', {
startDay: this.startDay,
ownerCalendarPanel: this
};
-
+
if(this.showDayView) {
var day = Ext.apply({
xtype: 'extensible.dayview',
title: this.dayText
}, sharedViewCfg);
-
+
day = Ext.apply(Ext.apply(day, this.viewConfig), this.dayViewCfg);
day.id = this.id+'-day';
this.initEventRelay(day);
@@ -583,7 +592,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
xtype: 'extensible.multidayview',
title: this.getMultiDayText(multiDayViewCount)
}, sharedViewCfg);
-
+
mday = Ext.apply(Ext.apply(mday, this.viewConfig), this.multiDayViewCfg);
mday.id = this.id+'-multiday';
this.initEventRelay(mday);
@@ -594,7 +603,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
xtype: 'extensible.weekview',
title: this.weekText
}, sharedViewCfg);
-
+
wk = Ext.apply(Ext.apply(wk, this.viewConfig), this.weekViewCfg);
wk.id = this.id+'-week';
this.initEventRelay(wk);
@@ -605,7 +614,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
xtype: 'extensible.multiweekview',
title: this.getMultiWeekText(multiWeekViewCount)
}, sharedViewCfg);
-
+
mwk = Ext.apply(Ext.apply(mwk, this.viewConfig), this.multiWeekViewCfg);
mwk.id = this.id+'-multiweek';
this.initEventRelay(mwk);
@@ -624,7 +633,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
}
}
}, sharedViewCfg);
-
+
month = Ext.apply(Ext.apply(month, this.viewConfig), this.monthViewCfg);
month.id = this.id+'-month';
this.initEventRelay(month);
@@ -657,7 +666,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
'beforeeventmove', 'eventmove', 'initdrag', 'dayover', 'dayout', 'beforeeventresize',
'eventresize', 'eventadd', 'eventupdate', 'beforeeventdelete', 'eventdelete',
'eventcancel', 'eventexception']);
-
+
c.on('editdetails', this.onEditDetails, this);
},
scope: this,
@@ -667,12 +676,12 @@ Ext.define('Extensible.calendar.CalendarPanel', {
afterRender: function() {
this.callParent(arguments);
-
+
this.body.addCls('x-cal-body');
this.updateNavState();
this.setActiveView();
},
-
+
/**
* Returns the text to use for the 'X Days' nav bar button (defaults to "{0} Days" where {0} is automatically replaced by the
* value of the {@link #multDayViewCfg}'s dayCount value if available, otherwise it uses the view default of 3).
@@ -680,7 +689,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
getMultiDayText: function(numDays) {
return this.multiDayText;
},
-
+
/**
* Returns the text to use for the 'X Weeks' nav bar button (defaults to "{0} Weeks" where {0} is automatically replaced by the
* value of the {@link #multiWeekViewCfg}'s weekCount value if available, otherwise it uses the view default of 2).
@@ -688,14 +697,14 @@ Ext.define('Extensible.calendar.CalendarPanel', {
getMultiWeekText: function(numWeeks) {
return this.multiWeekText;
},
-
+
/**
* Sets the event store used by the calendar to display {@link Extensible.calendar.data.EventModel events}.
* @param {Ext.data.Store} store
*/
setStore: function(store, initial) {
var currStore = this.store;
-
+
if(!initial && currStore) {
currStore.un("write", this.onWrite, this);
}
@@ -720,8 +729,9 @@ Ext.define('Extensible.calendar.CalendarPanel', {
},
onWrite: function(store, operation) {
- var rec = operation.records[0];
-
+ var records = operation.getRecords(),
+ rec = records[0];
+
switch(operation.action) {
case 'create':
this.onStoreAdd(store, rec);
@@ -774,7 +784,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
this.hideEditForm();
this.fireEvent('eventcancel', this, rec);
},
-
+
/**
* Shows the built-in event edit form for the passed in event record. This method automatically
* hides the calendar views and navigation toolbar. To return to the calendar, call {@link #hideEditForm}.
@@ -787,7 +797,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
this.layout.getActiveItem().loadRecord(rec);
return this;
},
-
+
/**
* Hides the built-in event edit form and returns to the previous calendar view. If the edit form is
* not currently visible this method has no effect.
@@ -800,10 +810,10 @@ Ext.define('Extensible.calendar.CalendarPanel', {
}
return this;
},
-
+
/**
* Set the active view, optionally specifying a new start date.
- * @param {String/Number} id The id of the view to activate (or the 0-based index of the view within
+ * @param {String/Number} id The id of the view to activate (or the 0-based index of the view within
* the CalendarPanel's internal card layout).
* @param {Date} startDate (optional) The new view start date (defaults to the current start date)
*/
@@ -812,11 +822,11 @@ Ext.define('Extensible.calendar.CalendarPanel', {
layout = me.layout,
editViewId = me.id + '-edit',
toolbar;
-
+
if (startDate) {
me.startDate = startDate;
}
-
+
// Make sure we're actually changing views
if (id !== layout.getActiveItem().id) {
// Show/hide the toolbar first so that the layout will calculate the correct item size
@@ -824,16 +834,17 @@ Ext.define('Extensible.calendar.CalendarPanel', {
if (toolbar) {
toolbar[id === editViewId ? 'hide' : 'show']();
}
-
+
+ // Ext.suspendLayouts();
+
// Activate the new view and refresh the layout
layout.setActiveItem(id || me.activeItem);
- me.doComponentLayout();
me.activeView = layout.getActiveItem();
-
+
if (id !== editViewId) {
if (id && id !== me.preEditView) {
// We're changing to a different view, so the view dates are likely different.
- // Re-set the start date so that the view range will be updated if needed.
+ // Reset the start date so that the view range will be updated if needed.
// If id is undefined, it means this is the initial pass after render so we can
// skip this (as we don't want to cause a duplicate forced reload).
layout.activeItem.setStartDate(me.startDate, true);
@@ -842,7 +853,9 @@ Ext.define('Extensible.calendar.CalendarPanel', {
// so update the nav bar's selected view button
me.updateNavState();
}
+
// Notify any listeners that the view changed
+ // Ext.resumeLayouts(true);
me.fireViewChange();
}
},
@@ -851,10 +864,10 @@ Ext.define('Extensible.calendar.CalendarPanel', {
if (this.layout && this.layout.getActiveItem) {
var view = this.layout.getActiveItem(),
cloneDt = Ext.Date.clone;
-
+
if (view) {
var info;
-
+
// some views do not have these properties, e.g. the detailed edit form
if (view.getViewBounds) {
var vb = view.getViewBounds();
@@ -875,11 +888,11 @@ Ext.define('Extensible.calendar.CalendarPanel', {
updateNavState: function() {
var me = this,
activeItem = me.layout.activeItem;
-
+
if (activeItem && me.showNavBar !== false) {
var suffix = activeItem.id.split(me.id + '-')[1],
btn = Ext.getCmp(me.id + '-tb-' + suffix);
-
+
if (me.showNavToday) {
Ext.getCmp(me.id + '-tb-today').setDisabled(activeItem.isToday());
}
@@ -901,6 +914,10 @@ Ext.define('Extensible.calendar.CalendarPanel', {
return this;
},
+ showDay: function(dt) {
+ this.setActiveView(this.id+'-day', dt);
+ },
+
showWeek: function(dt) {
this.setActiveView(this.id+'-week', dt);
},
@@ -952,7 +969,7 @@ Ext.define('Extensible.calendar.CalendarPanel', {
onMonthNavClick: function() {
this.setActiveView(this.id+'-month');
},
-
+
/**
* Return the calendar view that is currently active, which will be a subclass of
* {@link Extensible.calendar.view.AbstractCalendar AbstractCalendar}.
@@ -961,4 +978,4 @@ Ext.define('Extensible.calendar.CalendarPanel', {
getActiveView: function() {
return this.layout.activeItem;
}
-});
\ No newline at end of file
+});
diff --git a/src/calendar/data/EventMappings.js b/src/calendar/data/EventMappings.js
index e3493f39..961ed933 100644
--- a/src/calendar/data/EventMappings.js
+++ b/src/calendar/data/EventMappings.js
@@ -8,7 +8,7 @@
* Ext records are mapped to your back-end data model. If you only need to change a handful
* of field properties you can directly modify the EventMappings object as needed and then
* reconfigure it. The simplest approach is to only override specific field attributes:
- *
+ *
* var M = Extensible.calendar.data.EventMappings;
* M.Title.mapping = 'evt_title';
* M.Title.name = 'EventTitle';
@@ -18,7 +18,7 @@
* provide your own custom field definitions (as in the following example). Note that if you do
* this, you **MUST** include a complete field definition, including the type attribute
* if the field is not the default type of string.
- *
+ *
* // Add a new field that does not exist in the default EventMappings:
* Extensible.calendar.data.EventMappings.Timestamp = {
* name: 'Timestamp',
@@ -33,7 +33,7 @@
* mappings have all been customized. Note that the name of each field definition object
* (e.g., 'EventId') should **NOT** be changed for the default EventMappings fields as it
* is the key used to access the field data programmatically.
- *
+ *
* Extensible.calendar.data.EventMappings = {
* EventId: {name: 'ID', mapping:'evt_id', type:'int'},
* CalendarId: {name: 'CalID', mapping: 'cal_id', type: 'int'},
@@ -60,7 +60,7 @@
* that mapping as the idProperty of your data reader, otherwise it won't recognize how to
* access the data correctly and will treat existing records as phantoms. Here's an easy way to make sure
* your mapping is always valid:
- *
+ *
* var reader = new Ext.data.reader.Json({
* totalProperty: 'total',
* successProperty: 'success',
@@ -128,14 +128,14 @@ Extensible.calendar.data.EventMappings = {
mapping: 'rem',
type: 'string'
},
-
+
// ----- Recurrence properties -----
// NOTE: Only RRule and Duration need to be persisted. The other properties
// do need to be mapped as they are used on the back end, but typically they
// are transient properties only used during processing of requests and do
// not need to be stored in a DB.
-
+
// The iCal-formatted RRULE (recurrence rule) pattern.
// (See: http://www.kanzaki.com/docs/ical/rrule.html)
// While technically recurrence could be implemented in other custom
@@ -148,9 +148,9 @@ Extensible.calendar.data.EventMappings = {
name: 'RRule',
mapping: 'rrule',
type: 'string',
- useNull: true
+ allowNull: true
},
-
+
// When using recurrence, the standard EndDate value will be the end date
// of the _recurrence series_, not the end date of the "event". In fact,
// with recurrence there is no single "event", only a pattern that generates
@@ -162,10 +162,10 @@ Extensible.calendar.data.EventMappings = {
name: 'Duration',
mapping: 'duration',
defaultValue: -1, // the standard int default of 0 is actually a valid duration
- useNull: true, // Without this, the null returned from the server is coerced to 0
+ allowNull: true, // Without this, the null returned from the server is coerced to 0
type: 'int'
},
-
+
// This is used to associate recurring event instances back to their
// original master events when sending edit requests to the server. This
// is required since each individual event instance will have a unique id
@@ -176,18 +176,18 @@ Extensible.calendar.data.EventMappings = {
name: 'OriginalEventId',
mapping: 'origid',
type: 'string',
- useNull: true
+ allowNull: true
},
-
+
// The start date for the recurring series.
RSeriesStartDate: {
name: 'RSeriesStartDate',
mapping: 'rsstart',
type: 'date',
dateFormat: 'c',
- useNull: true
+ allowNull: true
},
-
+
// If the start date of a recurring event instance is changed and then saved
// using the "single" instance case (or if you drag an event instance and drop
// it on a different date) the server has to create an exception for that instance
@@ -199,9 +199,9 @@ Extensible.calendar.data.EventMappings = {
mapping: 'ristart',
type: 'date',
dateFormat: 'c',
- useNull: true
+ allowNull: true
},
-
+
// Recurrence edit mode ('single', 'future' or 'all'). This is transient data
// and would typically not be persisted (it's ignored by the calendar for
// display purposes), but it's kept on the record for ease of transmission to
@@ -210,6 +210,6 @@ Extensible.calendar.data.EventMappings = {
name: 'REditMode',
mapping: 'redit',
type: 'string',
- useNull: true
+ allowNull: true
}
-};
\ No newline at end of file
+};
diff --git a/src/calendar/data/EventStore.js b/src/calendar/data/EventStore.js
index f05eb9d4..1f35aabd 100644
--- a/src/calendar/data/EventStore.js
+++ b/src/calendar/data/EventStore.js
@@ -4,10 +4,10 @@
Ext.define('Extensible.calendar.data.EventStore', {
extend: 'Ext.data.Store',
model: 'Extensible.calendar.data.EventModel',
-
+
constructor: function(config) {
config = config || {};
-
+
// By default autoLoad will cause the store to load itself during the
// constructor, before the owning calendar view has a chance to set up
// the initial date params to use during loading. We replace autoLoad
@@ -15,30 +15,30 @@ Ext.define('Extensible.calendar.data.EventStore', {
// up default params as needed, then call the load itself.
this.deferLoad = config.autoLoad;
config.autoLoad = false;
-
+
//this._dateCache = [];
-
+
this.callParent(arguments);
},
-
+
load: function(o) {
Extensible.log('store load');
o = o || {};
-
+
// if params are passed delete the one-time defaults
- if(o.params) {
+ if (o.params) {
delete this.initialParams;
}
// this.initialParams will only be set if the store is being loaded manually
// for the first time (autoLoad = false) so the owning calendar view set
// the initial start and end date params to use. Every load after that will
// have these params set automatically during normal UI navigation.
- if(this.initialParams) {
+ if (this.initialParams) {
o.params = o.params || {};
Ext.apply(o.params, this.initialParams);
delete this.initialParams;
}
-
+
this.callParent(arguments);
}
-});
\ No newline at end of file
+});
diff --git a/src/calendar/data/MemoryCalendarStore.js b/src/calendar/data/MemoryCalendarStore.js
index 90fa5560..12bbe74b 100644
--- a/src/calendar/data/MemoryCalendarStore.js
+++ b/src/calendar/data/MemoryCalendarStore.js
@@ -5,7 +5,7 @@
Ext.define('Extensible.calendar.data.MemoryCalendarStore', {
extend: 'Ext.data.Store',
model: 'Extensible.calendar.data.CalendarModel',
-
+
requires: [
'Ext.data.proxy.Memory',
'Ext.data.reader.Json',
@@ -13,12 +13,12 @@ Ext.define('Extensible.calendar.data.MemoryCalendarStore', {
'Extensible.calendar.data.CalendarModel',
'Extensible.calendar.data.CalendarMappings'
],
-
+
proxy: {
type: 'memory',
reader: {
type: 'json',
- root: 'calendars'
+ rootProperty: 'calendars'
},
writer: {
type: 'json'
@@ -26,17 +26,17 @@ Ext.define('Extensible.calendar.data.MemoryCalendarStore', {
},
autoLoad: true,
-
+
initComponent: function() {
this.sorters = this.sorters || [{
property: Extensible.calendar.data.CalendarMappings.Title.name,
direction: 'ASC'
}];
-
+
this.idProperty = this.idProperty || Extensible.calendar.data.CalendarMappings.CalendarId.name || 'id';
-
+
this.fields = Extensible.calendar.data.CalendarModel.prototype.fields.getRange();
-
+
this.callParent(arguments);
}
-});
\ No newline at end of file
+});
diff --git a/src/calendar/data/MemoryEventStore.js b/src/calendar/data/MemoryEventStore.js
index abf44084..a5b0b789 100644
--- a/src/calendar/data/MemoryEventStore.js
+++ b/src/calendar/data/MemoryEventStore.js
@@ -28,13 +28,13 @@ Ext.define('Extensible.calendar.data.MemoryEventStore', {
type: 'memory',
reader: {
type: 'json',
- root: 'evts'
+ rootProperty: 'evts'
},
writer: {
type: 'json'
}
},
-
+
// Since we are faking persistence in memory, we also have to fake our primary
// keys for things to work consistently. This starting id value will be auto-
// incremented as records are created:
@@ -53,7 +53,7 @@ Ext.define('Extensible.calendar.data.MemoryEventStore', {
this.idProperty = this.idProperty || Extensible.calendar.data.EventMappings.EventId.mapping || 'id';
- this.fields = Extensible.calendar.data.EventModel.prototype.fields.getRange();
+ this.fields = Extensible.calendar.data.EventModel.getFields();
// By default this shared example store will monitor its own CRUD events and
// automatically show a page-level message for each event. This is simply a shortcut
@@ -76,13 +76,13 @@ Ext.define('Extensible.calendar.data.MemoryEventStore', {
}
this.autoMsg = config.autoMsg;
- this.onCreateRecords = Ext.Function.createInterceptor(this.onCreateRecords, this.interceptCreateRecords);
+ // this.onCreateRecords = Ext.Function.createInterceptor(this.onCreateRecords, this.interceptCreateRecords);
this.initRecs();
},
// private - override to make sure that any records added in-memory
// still get a unique PK assigned at the data level
- interceptCreateRecords: function(records, operation, success) {
+ /*interceptCreateRecords: function(records, operation, success) {
if (success) {
var i = 0,
rec,
@@ -92,7 +92,7 @@ Ext.define('Extensible.calendar.data.MemoryEventStore', {
records[i].data[Extensible.calendar.data.EventMappings.EventId.name] = this.idSeed++;
}
}
- },
+ },*/
// If the store started with preloaded inline data, we have to make sure the records are set up
// properly as valid "saved" records otherwise they may get "added" on initial edit.
@@ -109,18 +109,22 @@ Ext.define('Extensible.calendar.data.MemoryEventStore', {
if (Extensible.example && Extensible.example.msg) {
var success = operation.wasSuccessful(),
- rec = operation.records[0],
- title = rec.data[Extensible.calendar.data.EventMappings.Title.name];
+ rec = operation.getRecords[0],
+ //var records = 'Ext.data.operation.Destroy' == Ext.getClass(operation).getName()? operation.getResultSet().getRecords() : operation.getRecords(),
+ title = rec.get(Extensible.calendar.data.EventMappings.Title.name) || '(No title)';
+
+
+ title = record.get(Extensible.calendar.data.EventMappings.Title.mapping) || '(No title)';
switch (operation.action) {
case 'create':
- Extensible.example.msg('Add', 'Added "' + Ext.value(title, '(No title)') + '"');
+ Extensible.example.msg('Add', 'Added "' + title + '"');
break;
case 'update':
- Extensible.example.msg('Update', 'Updated "' + Ext.value(title, '(No title)') + '"');
+ Extensible.example.msg('Update', 'Updated "' + title + '"');
break;
case 'destroy':
- Extensible.example.msg('Delete', 'Deleted "' + Ext.value(title, '(No title)') + '"');
+ Extensible.example.msg('Delete', 'Deleted "' + title + '"');
break;
}
}
@@ -153,4 +157,4 @@ Ext.define('Extensible.calendar.data.MemoryEventStore', {
me.loading = false;
me.fireEvent('load', me, records, successful);
}
-});
\ No newline at end of file
+});
diff --git a/src/calendar/dd/DayDragZone.js b/src/calendar/dd/DayDragZone.js
index ef2d42ab..fc684987 100644
--- a/src/calendar/dd/DayDragZone.js
+++ b/src/calendar/dd/DayDragZone.js
@@ -4,19 +4,19 @@
*/
Ext.define('Extensible.calendar.dd.DayDragZone', {
extend: 'Extensible.calendar.dd.DragZone',
-
+
ddGroup: 'DayViewDD',
resizeSelector: '.ext-evt-rsz',
-
+
getDragData: function(e) {
var target = e.getTarget(this.resizeSelector, 2, true),
rec,
parent;
-
+
if (target) {
parent = target.parent(this.eventSelector);
rec = this.view.getEventRecordFromEl(parent);
-
+
if (!rec) {
// if rec is null here it usually means there was a timing issue between drag
// start and the browser reporting it properly. Simply ignore and it will
@@ -32,12 +32,12 @@ Ext.define('Extensible.calendar.dd.DayDragZone', {
proxy: this.proxy
};
}
-
+
target = e.getTarget(this.eventSelector, this.eventSelectorDepth);
-
+
if (target) {
rec = this.view.getEventRecordFromEl(target);
-
+
if (!rec) {
// if rec is null here it usually means there was a timing issue between drag
// start and the browser reporting it properly. Simply ignore and it will
@@ -53,10 +53,10 @@ Ext.define('Extensible.calendar.dd.DayDragZone', {
proxy: this.proxy
};
}
-
+
// If not dragging/resizing an event then we are dragging on the calendar to add a new event
target = this.view.getDayAt(e.getX(), e.getY());
-
+
if (target.el) {
return {
type: 'caldrag',
@@ -66,4 +66,4 @@ Ext.define('Extensible.calendar.dd.DayDragZone', {
}
return null;
}
-});
\ No newline at end of file
+});
diff --git a/src/calendar/dd/DropZone.js b/src/calendar/dd/DropZone.js
index 355957cf..e05059dc 100644
--- a/src/calendar/dd/DropZone.js
+++ b/src/calendar/dd/DropZone.js
@@ -20,8 +20,8 @@ Ext.define('Extensible.calendar.dd.DropZone', {
getTargetFromEvent: function(e) {
var dragOffset = this.dragOffset || 0,
- y = e.getPageY() - dragOffset,
- d = this.view.getDayAt(e.getPageX(), y);
+ y = e.getY() - dragOffset,
+ d = this.view.getDayAt(e.getX(), y);
return d.el ? d: null;
},
@@ -128,11 +128,10 @@ Ext.define('Extensible.calendar.dd.DropZone', {
el.className = 'ext-dd-shim';
this.shimCt.appendChild(el);
- return Ext.create('Ext.Layer', {
- shadow: false,
- useDisplay: true,
- constrain: false
- }, el);
+ el = Ext.get(el);
+ el.setVisibilityMode(2);
+
+ return el;
},
clearShims: function() {
diff --git a/src/calendar/dd/StatusProxy.js b/src/calendar/dd/StatusProxy.js
index 42b7d204..926d33d6 100644
--- a/src/calendar/dd/StatusProxy.js
+++ b/src/calendar/dd/StatusProxy.js
@@ -1,12 +1,12 @@
/**
- * A specialized drag proxy that supports a drop status icon, {@link Ext.dom.Layer} styles and auto-repair. It also
- * contains a calendar-specific drag status message containing details about the dragged event's target drop date range.
- * This is the default drag proxy used by all calendar views.
+ * A specialized drag proxy that supports a drop status icon and auto-repair. It also contains a
+ * calendar-specific drag status message containing details about the dragged event's target drop
+ * date range. This is the default drag proxy used by all calendar views.
* @private
*/
Ext.define('Extensible.calendar.dd.StatusProxy', {
extend: 'Ext.dd.StatusProxy',
-
+
/**
* @cfg {String} moveEventCls
* The CSS class to apply to the status element when an event is being dragged (defaults to 'ext-cal-dd-move').
@@ -23,17 +23,17 @@ Ext.define('Extensible.calendar.dd.StatusProxy', {
renderTpl: [
'',
'',
- '
',
- '
',
+ '
',
+ '
',
'