Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix for the bug: [OPEN-342] Bug with single-click - reproducible in 1.5.1 #57

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Fix for the bug: [OPEN-342] Bug with single-click - reproducible in 1.5.1 #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3592cbb
Fix for the follwoing bug:
satishkn Mar 23, 2013
7f76d49
Fix for the following bug:
satishkn Mar 25, 2013
56755f8
Merge branch 'master' of github.com:satishkn/Extensible
satishkn Mar 25, 2013
7c31200
Formatting changes..
satishkn Mar 25, 2013
6768897
Formatting changes.
satishkn Mar 25, 2013
4937f26
Implementation for passthrough of doubleclick event so the user can …
satishkn Mar 26, 2013
d6c0852
Implementation for the bug:
satishkn Mar 27, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions examples/calendar/basic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
58 changes: 34 additions & 24 deletions src/calendar/CalendarPanel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,15 +320,15 @@ 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
*/
eventadd: true,
/**
* @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
*/
Expand All @@ -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
Expand All @@ -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
Expand All @@ -355,15 +355,15 @@ 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
*/
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.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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -410,7 +410,17 @@ Ext.define('Extensible.calendar.CalendarPanel', {
* and is also cancelable (if a handler returns <code>false</code> 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
* <p>Fires after the user double clicks on an event.</p>
* <p><strong>NOTE:</strong> 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
Expand All @@ -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
Expand All @@ -431,15 +441,15 @@ 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
*/
/**
* @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
Expand All @@ -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
Expand All @@ -458,15 +468,15 @@ 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
*/
/**
* @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
Expand All @@ -475,34 +485,34 @@ 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
*/
/**
* @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
*/
Expand All @@ -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. <strong>NOTE:</strong> 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
Expand All @@ -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. <strong>NOTE:</strong> 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
Expand All @@ -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
Expand Down Expand Up @@ -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',
Expand Down
42 changes: 42 additions & 0 deletions src/calendar/view/AbstractCalendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -23,6 +24,7 @@ Ext.define('Extensible.calendar.view.AbstractCalendar', {
'Extensible.form.recurrence.RangeEditWindow'
],
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please discard whitespace-only changes prior to committing



/**
* @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}.
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -570,10 +582,14 @@ 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
});
Expand Down Expand Up @@ -1879,6 +1895,7 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, {

me.eventMenu.showForEvent(me.getEventRecordFromEl(el), el, xy);
me.menuActive = true;

},

// private
Expand Down Expand Up @@ -2077,6 +2094,7 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, {
me.menuActive = false;
return true;
}

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same thing

if (el) {
var id = me.getEventIdFromEl(el),
rec = me.getEventRecord(id);
Expand All @@ -2090,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)) {
Expand All @@ -2108,6 +2143,13 @@ Ext.override(Extensible.calendar.view.AbstractCalendar, {
}
},

// private
onKeyUp: function(e, t) {
if (e.getCharCode( ) === Ext.EventObject.ESC) {
this.menuActive = false;
}
},

// private
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, but please stick to 4-char indentation for consistency with the existing code.

handleEventMouseEvent: function(e, t, type) {
var el = e.getTarget(this.eventSelector, this.eventSelectorDepth, true);
Expand Down
3 changes: 3 additions & 0 deletions src/calendar/view/Month.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down