From 3592cbb6758ea54a86a156424052bba9c40827f4 Mon Sep 17 00:00:00 2001 From: Satish Date: Sat, 23 Mar 2013 22:13:50 +0530 Subject: [PATCH 1/4] Fix for the follwoing bug: [OPEN-342] Bug with single-click - reproducible in 1.5.1 as posted in the forum at: http://ext.ensible.com/forum/viewtopic.php?f=3&t=634 --- src/calendar/view/AbstractCalendar.js | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/calendar/view/AbstractCalendar.js b/src/calendar/view/AbstractCalendar.js index ca394310..444387cf 100644 --- a/src/calendar/view/AbstractCalendar.js +++ b/src/calendar/view/AbstractCalendar.js @@ -2072,11 +2072,6 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, { if (me.dropZone) { me.dropZone.clearShims(); } - if (me.menuActive === true) { - // ignore the first click if a context menu is active (let it close) - me.menuActive = false; - return true; - } if (el) { var id = me.getEventIdFromEl(el), rec = me.getEventRecord(id); From 7f76d495c0fe92a632fcb0feb009619b330cd1f1 Mon Sep 17 00:00:00 2001 From: Satish Date: Mon, 25 Mar 2013 13:51:57 +0530 Subject: [PATCH 2/4] Fix for the following bug: [OPEN-342] Bug with single-click - reproducible in 1.5.1 as posted in the forum at: http://ext.ensible.com/forum/viewtopic.php?f=3&t=634 Implementation: Handling 'keyup' event (just ESC key) so event can be created with the next click after ESC is pressed by the user. Tested the following scenarios (on windows XP): 1) FF & Chrome -> Create event in basic.html sample after ESC key and with single click. Noticed the following: 1) In chrome, 'keypress' and 'keydown' events aren't triggered for ESC key, whereas in FF it is triggering. --- src/calendar/view/AbstractCalendar.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/calendar/view/AbstractCalendar.js b/src/calendar/view/AbstractCalendar.js index ca394310..84413dd5 100644 --- a/src/calendar/view/AbstractCalendar.js +++ b/src/calendar/view/AbstractCalendar.js @@ -15,6 +15,7 @@ Ext.define('Extensible.calendar.view.AbstractCalendar', { requires: [ 'Ext.CompositeElement', + 'Ext.EventObject', 'Extensible.calendar.form.EventDetails', 'Extensible.calendar.form.EventWindow', 'Extensible.calendar.menu.Event', @@ -22,7 +23,8 @@ Ext.define('Extensible.calendar.view.AbstractCalendar', { 'Extensible.calendar.dd.DropZone', 'Extensible.form.recurrence.RangeEditWindow' ], - + + /** * @cfg {Ext.data.Store} eventStore * The {@link Ext.data.Store store} which is bound to this calendar and contains {@link Extensible.calendar.data.EventModel EventRecords}. @@ -570,6 +572,8 @@ viewConfig: { this.on('resize', this.onResize, this); + Ext.getBody().on('keyup', this.onKeyUp, this); + this.el.on({ 'mouseover': this.onMouseOver, 'mouseout': this.onMouseOut, @@ -1878,7 +1882,8 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, { } me.eventMenu.showForEvent(me.getEventRecordFromEl(el), el, xy); - me.menuActive = true; + me.menuActive = true; + }, // private @@ -2076,7 +2081,8 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, { // ignore the first click if a context menu is active (let it close) me.menuActive = false; return true; - } + } + if (el) { var id = me.getEventIdFromEl(el), rec = me.getEventRecord(id); @@ -2108,6 +2114,13 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, { } }, + // private + onKeyUp: function(e, t) { + if (e.getCharCode( ) === Ext.EventObject.ESC) { + this.menuActive = false; + } + }, + // private handleEventMouseEvent: function(e, t, type) { var el = e.getTarget(this.eventSelector, this.eventSelectorDepth, true); From 4937f2608777c8d6ce2864caef9acadc1f46d3a3 Mon Sep 17 00:00:00 2001 From: Satish Date: Tue, 26 Mar 2013 15:54:52 +0530 Subject: [PATCH 3/4] =?UTF-8?q?Implementation=20for=20=20passthrough=20of?= =?UTF-8?q?=20doubleclick=20event=20so=20the=20user=20can=20provide=20a=20?= =?UTF-8?q?handler=20on:=20=E2=80=9Ceventdblclick=E2=80=9D=20event?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/calendar/basic.js | 6 +-- src/calendar/CalendarPanel.js | 58 ++++++++++++++++----------- src/calendar/view/AbstractCalendar.js | 34 ++++++++++++++++ 3 files changed, 71 insertions(+), 27 deletions(-) diff --git a/examples/calendar/basic.js b/examples/calendar/basic.js index d7574900..b3fe4e81 100644 --- a/examples/calendar/basic.js +++ b/examples/calendar/basic.js @@ -52,14 +52,14 @@ Ext.onReady(function(){ listeners: { // A simple example showing how to handle a custom calendar event to // override default behavior. See the docs for all available events. - 'eventclick': { + 'eventdblclick': { fn: function(panel, rec, el){ // override the default edit handling - //Ext.Msg.alert('App Click', 'Editing: ' + rec.data.Title); + Ext.Msg.alert('App dblClick', 'Editing: ' + rec.data.Title); // return false to tell the CalendarPanel that we've handled the click and it // should ignore it (e.g., do not show the default edit window) - //return false; + return false; }, scope: this } diff --git a/src/calendar/CalendarPanel.js b/src/calendar/CalendarPanel.js index 22211d68..ce56a3d9 100644 --- a/src/calendar/CalendarPanel.js +++ b/src/calendar/CalendarPanel.js @@ -320,7 +320,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @event eventadd * Fires after a new event is added to the underlying store - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Extensible.calendar.data.EventModel} rec The new * {@link Extensible.calendar.data.EventModel record} that was added */ @@ -328,7 +328,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @event eventupdate * Fires after an existing event is updated - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this * @param {Extensible.calendar.data.EventModel} rec The new * {@link Extensible.calendar.data.EventModel record} that was updated */ @@ -337,7 +337,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { * @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.view.AbstractCalendar} 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 @@ -346,7 +346,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @event eventdelete * Fires after an event is deleted by the user. - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} 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 @@ -355,7 +355,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @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.view.AbstractCalendar} this * @param {Extensible.calendar.data.EventModel} rec The new * {@link Extensible.calendar.data.EventModel record} that was canceled */ @@ -363,7 +363,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @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.calendar.view.AbstractCalendar} 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 @@ -381,7 +381,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { * 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} 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 @@ -399,7 +399,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @event eventsrendered * Fires after events are finished rendering in the view - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this */ /** * @event eventclick @@ -410,7 +410,17 @@ Ext.define('Extensible.calendar.CalendarPanel', { * 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.view.AbstractCalendar} 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 eventdblclick + *

Fires after the user double clicks on an event.

+ *

NOTE: This event when fired from a view class is simply a notification that a double click on the element / element + * is detected by the framework and has no default behavior implemented. + * @param {Extensible.calendar.view.AbstractCalendar} 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 @@ -419,7 +429,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { * @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 {Extensible.calendar.view.AbstractCalendar} 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 @@ -431,7 +441,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @event eventover * Fires anytime the mouse is over an event element - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} 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 @@ -439,7 +449,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @event eventout * Fires anytime the mouse exits an event element - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} 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 @@ -449,7 +459,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { * 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 {Extensible.calendar.view.AbstractCalendar} 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 @@ -458,7 +468,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @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 {Extensible.calendar.view.AbstractCalendar} 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 @@ -466,7 +476,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @event datechange * Fires after the start date of the view changes - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} 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 @@ -475,14 +485,14 @@ Ext.define('Extensible.calendar.CalendarPanel', { * @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.view.AbstractCalendar} 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.view.AbstractCalendar} 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 @@ -490,19 +500,19 @@ Ext.define('Extensible.calendar.CalendarPanel', { /** * @event initdrag * Fires when a drag operation is initiated in the view - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} this */ /** * @event dayover * Fires while the mouse is over a day element - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} 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 {Extensible.calendar.view.AbstractCalendar} this * @param {Date} dt The date that is exited * @param {Ext.Element} el The day Element that is exited */ @@ -512,7 +522,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { * 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.view.AbstractCalendar} 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 @@ -521,7 +531,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { * @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.view.AbstractCalendar} 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 @@ -537,7 +547,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { * * Note that only Server proxy and subclasses (including Ajax proxy) will raise this event. * - * @param {Extensible.calendar.CalendarPanel} this + * @param {Extensible.calendar.view.AbstractCalendar} 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 @@ -653,7 +663,7 @@ Ext.define('Extensible.calendar.CalendarPanel', { fn: function(c) { // Relay view events so that app code only has to handle them in one place. // These events require no special handling by the calendar panel. - this.relayEvents(c, ['eventsrendered', 'eventclick', 'dayclick', 'eventover', 'eventout', + this.relayEvents(c, ['eventsrendered', 'eventclick', 'eventdblclick', 'dayclick', 'eventover', 'eventout', 'beforedatechange', 'datechange', 'rangeselect', 'beforeeventcopy', 'eventcopy', 'beforeeventmove', 'eventmove', 'initdrag', 'dayover', 'dayout', 'beforeeventresize', 'eventresize', 'eventadd', 'eventupdate', 'beforeeventdelete', 'eventdelete', diff --git a/src/calendar/view/AbstractCalendar.js b/src/calendar/view/AbstractCalendar.js index 3c42f2b8..13e54921 100644 --- a/src/calendar/view/AbstractCalendar.js +++ b/src/calendar/view/AbstractCalendar.js @@ -23,6 +23,8 @@ Ext.define('Extensible.calendar.view.AbstractCalendar', { 'Extensible.calendar.dd.DropZone', 'Extensible.form.recurrence.RangeEditWindow' ], + + /** * @cfg {Ext.data.Store} eventStore * The {@link Ext.data.Store store} which is bound to this calendar and contains {@link Extensible.calendar.data.EventModel EventRecords}. @@ -372,6 +374,16 @@ viewConfig: { * @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 */ + eventdblclick: true, + /** + * @event eventdblclick + * Fires after the user double clicks on an event element. This could be useful for + * the user to provide a different functionality for double click. + * This event is a passthrough and doesn't provide any functionality. + * @param {Extensible.calendar.view.AbstractCalendar} 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 + */ eventover: true, /** * @event eventout @@ -571,11 +583,13 @@ viewConfig: { this.on('resize', this.onResize, this); Ext.getBody().on('keyup', this.onKeyUp, this); + Ext.getBody().on('dblclick', this.onDblClick, this); this.el.on({ 'mouseover': this.onMouseOver, 'mouseout': this.onMouseOut, 'click': this.onClick, +// 'dblclick': this.onDblClick, //'resize': this.onResize, scope: this }); @@ -1878,8 +1892,10 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, { } }); } + me.eventMenu.showForEvent(me.getEventRecordFromEl(el), el, xy); me.menuActive = true; + }, // private @@ -2078,6 +2094,7 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, { me.menuActive = false; return true; } + if (el) { var id = me.getEventIdFromEl(el), rec = me.getEventRecord(id); @@ -2091,6 +2108,23 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, { } }, + /* + * Double click handling. + */ + onDblClick: function(e, t) { + var me = this, + el = e.getTarget(me.eventSelector, 5); + + if (el) { + var id = me.getEventIdFromEl(el), + rec = me.getEventRecord(id); + + me.fireEvent('eventdblclick', me, rec, el); + } + + return true; + }, + // private onMouseOver: function(e, t) { if (this.trackMouseOver !== false && (this.dragZone === undefined || !this.dragZone.dragging)) { From d6c08528c86eec302fbfebaa1033e137d01a92ed Mon Sep 17 00:00:00 2001 From: Satish Date: Wed, 27 Mar 2013 20:28:11 +0530 Subject: [PATCH 4/4] Implementation for the bug: [OPEN-334] Month view: "+X more..." link missing. Details about the bug can be reviewed at: http://ext.ensible.com/forum/viewtopic.php?f=3&t=613&sid=9f1e63e3221d5e8bb110e99d2f4f3f5e Implementation is to recalculate the no of events to display when the month is changed. Steps to verify: in the current TestApp example, load the current month view for march 2013 it has all the test events. Click the < button to go to feb, then resize to make the browser smaller, then click > to go back to march, the + more links should be displayed properly (not hidden). --- src/calendar/view/Month.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/calendar/view/Month.js b/src/calendar/view/Month.js index 4055c7a9..aab462d1 100644 --- a/src/calendar/view/Month.js +++ b/src/calendar/view/Month.js @@ -325,6 +325,9 @@ Ext.define('Extensible.calendar.view.Month', { if(this.detailPanel) { this.detailPanel.hide(); } + + this.maxEventsPerDay = this.getMaxEventsPerDay(); + this.callParent(arguments); if(this.showTime !== false) {