X-Git-Url: http://git.ithinksw.org/extjs.git/blobdiff_plain/b37ceabb82336ee82757cd32efe353cfab8ec267..f5240829880f87e0cf581c6a296e436fdef0ef80:/examples/calendar/src/views/DayBodyView.js diff --git a/examples/calendar/src/views/DayBodyView.js b/examples/calendar/src/views/DayBodyView.js new file mode 100644 index 00000000..49653fc3 --- /dev/null +++ b/examples/calendar/src/views/DayBodyView.js @@ -0,0 +1,447 @@ +/*! + * Ext JS Library 3.3.0 + * Copyright(c) 2006-2010 Ext JS, Inc. + * licensing@extjs.com + * http://www.extjs.com/license + */ +/**S + * @class Ext.calendar.DayBodyView + * @extends Ext.calendar.CalendarView + *
This is the scrolling container within the day and week views where non-all-day events are displayed. + * Normally you should not need to use this class directly -- instead you should use {@link Ext.calendar.DayView DayView} + * which aggregates this class and the {@link Ext.calendar.DayHeaderView DayHeaderView} into the single unified view + * presented by {@link Ext.calendar.CalendarPanel CalendarPanel}.
+ * @constructor + * @param {Object} config The config object + */ +Ext.calendar.DayBodyView = Ext.extend(Ext.calendar.CalendarView, { + //private + dayColumnElIdDelimiter: '-day-col-', + + //private + initComponent: function() { + Ext.calendar.DayBodyView.superclass.initComponent.call(this); + + this.addEvents({ + /** + * @event eventresize + * Fires after the user drags the resize handle of an event to resize it + * @param {Ext.calendar.DayBodyView} this + * @param {Ext.calendar.EventRecord} rec The {@link Ext.calendar.EventRecord record} for the event that was resized + * containing the updated start and end dates + */ + eventresize: true, + /** + * @event dayclick + * Fires after the user clicks within the day view container and not on an event element + * @param {Ext.calendar.DayBodyView} 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. Clicks within the + * DayBodyView always return false for this param. + * @param {Ext.Element} el The Element that was clicked on + */ + dayclick: true + }); + }, + + //private + initDD: function() { + var cfg = { + createText: this.ddCreateEventText, + moveText: this.ddMoveEventText, + resizeText: this.ddResizeEventText + }; + + this.el.ddScrollConfig = { + // scrolling is buggy in IE/Opera for some reason. A larger vthresh + // makes it at least functional if not perfect + vthresh: Ext.isIE || Ext.isOpera ? 100: 40, + hthresh: -1, + frequency: 50, + increment: 100, + ddGroup: 'DayViewDD' + }; + this.dragZone = new Ext.calendar.DayViewDragZone(this.el, Ext.apply({ + view: this, + containerScroll: true + }, + cfg)); + + this.dropZone = new Ext.calendar.DayViewDropZone(this.el, Ext.apply({ + view: this + }, + cfg)); + }, + + //private + refresh: function() { + var top = this.el.getScroll().top; + this.prepareData(); + this.renderTemplate(); + this.renderItems(); + + // skip this if the initial render scroll position has not yet been set. + // necessary since IE/Opera must be deferred, so the first refresh will + // override the initial position by default and always set it to 0. + if (this.scrollReady) { + this.scrollTo(top); + } + }, + + /** + * Scrolls the container to the specified vertical position. If the view is large enough that + * there is no scroll overflow then this method will have no affect. + * @param {Number} y The new vertical scroll position in pixels + * @param {Boolean} defer (optional)True to slightly defer the call, false to execute immediately.
+ *This method will automatically defer itself for IE and Opera (even if you pass false) otherwise + * the scroll position will not update in those browsers. You can optionally pass true, however, to + * force the defer in all browsers, or use your own custom conditions to determine whether this is needed.
+ *Note that this method should not generally need to be called directly as scroll position is managed internally.
+ */ + scrollTo: function(y, defer) { + defer = defer || (Ext.isIE || Ext.isOpera); + if (defer) { + (function() { + this.el.scrollTo('top', y); + this.scrollReady = true; + }).defer(10, this); + } + else { + this.el.scrollTo('top', y); + this.scrollReady = true; + } + }, + + // private + afterRender: function() { + if (!this.tpl) { + this.tpl = new Ext.calendar.DayBodyTemplate({ + id: this.id, + dayCount: this.dayCount, + showTodayText: this.showTodayText, + todayText: this.todayText, + showTime: this.showTime + }); + } + this.tpl.compile(); + + this.addClass('ext-cal-body-ct'); + + Ext.calendar.DayBodyView.superclass.afterRender.call(this); + + // default scroll position to 7am: + this.scrollTo(7 * 42); + }, + + // private + forceSize: Ext.emptyFn, + + // private + onEventResize: function(rec, data) { + var D = Ext.calendar.Date, + start = Ext.calendar.EventMappings.StartDate.name, + end = Ext.calendar.EventMappings.EndDate.name; + + if (D.compare(rec.data[start], data.StartDate) === 0 && + D.compare(rec.data[end], data.EndDate) === 0) { + // no changes + return; + } + rec.set(start, data.StartDate); + rec.set(end, data.EndDate); + + this.fireEvent('eventresize', this, rec); + }, + + // inherited docs + getEventBodyMarkup: function() { + if (!this.eventBodyMarkup) { + this.eventBodyMarkup = ['{Title}', + 'Returns the XTemplate that is bound to the calendar's event store (it expects records of type + * {@link Ext.calendar.EventRecord}) to populate the calendar views with all-day events. + * Internally this method by default generates different markup for browsers that support CSS border radius + * and those that don't. This method can be overridden as needed to customize the markup generated.
+ *Note that this method calls {@link #getEventBodyMarkup} to retrieve the body markup for events separately + * from the surrounding container markup. This provdes the flexibility to customize what's in the body without + * having to override the entire XTemplate. If you do override this method, you should make sure that your + * overridden version also does the same.
+ * @return {Ext.XTemplate} The event XTemplate + */ + getEventAllDayTemplate: function() { + if (!this.eventAllDayTpl) { + var tpl, + body = this.getEventBodyMarkup(); + + tpl = !(Ext.isIE || Ext.isOpera) ? + new Ext.XTemplate( + '