examples/calendar/src/views/DayHeaderView.js

   1 /*!
   2  * Ext JS Library 3.3.0
   3  * Copyright(c) 2006-2010 Ext JS, Inc.
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   8  * @class Ext.calendar.DayHeaderView
   9  * @extends Ext.calendar.MonthView
  10  * <p>This is the header area container within the day and week views where all-day events are displayed.
  11  * Normally you should not need to use this class directly -- instead you should use {@link Ext.calendar.DayView DayView}
  12  * which aggregates this class and the {@link Ext.calendar.DayBodyView DayBodyView} into the single unified view
  13  * presented by {@link Ext.calendar.CalendarPanel CalendarPanel}.</p>
  14  * @constructor
  15  * @param {Object} config The config object
  16  */
  17 Ext.calendar.DayHeaderView = Ext.extend(Ext.calendar.MonthView, {
  18     // private configs
  19     weekCount: 1,
  20     dayCount: 1,
  21     allDayOnly: true,
  22     monitorResize: false,
  23
  24     /**
  25      * @event dayclick
  26      * Fires after the user clicks within the day view container and not on an event element
  27      * @param {Ext.calendar.DayBodyView} this
  28      * @param {Date} dt The date/time that was clicked on
  29      * @param {Boolean} allday True if the day clicked on represents an all-day box, else false. Clicks within the
  30      * DayHeaderView always return true for this param.
  31      * @param {Ext.Element} el The Element that was clicked on
  32      */
  33
  34     // private
  35     afterRender: function() {
  36         if (!this.tpl) {
  37             this.tpl = new Ext.calendar.DayHeaderTemplate({
  38                 id: this.id,
  39                 showTodayText: this.showTodayText,
  40                 todayText: this.todayText,
  41                 showTime: this.showTime
  42             });
  43         }
  44         this.tpl.compile();
  45         this.addClass('ext-cal-day-header');
  46
  47         Ext.calendar.DayHeaderView.superclass.afterRender.call(this);
  48     },
  49
  50     // private
  51     forceSize: Ext.emptyFn,
  52
  53     // private
  54     refresh: function() {
  55         Ext.calendar.DayHeaderView.superclass.refresh.call(this);
  56         this.recalcHeaderBox();
  57     },
  58
  59     // private
  60     recalcHeaderBox: function() {
  61         var tbl = this.el.child('.ext-cal-evt-tbl'),
  62         h = tbl.getHeight();
  63
  64         this.el.setHeight(h + 7);
  65
  66         if (Ext.isIE && Ext.isStrict) {
  67             this.el.child('.ext-cal-hd-ad-inner').setHeight(h + 4);
  68         }
  69         if (Ext.isOpera) {
  70             //TODO: figure out why Opera refuses to refresh height when
  71             //the new height is lower than the previous one
  72             //            var ct = this.el.child('.ext-cal-hd-ct');
  73             //            ct.repaint();
  74             }
  75     },
  76
  77     // private
  78     moveNext: function(noRefresh) {
  79         this.moveDays(this.dayCount, noRefresh);
  80     },
  81
  82     // private
  83     movePrev: function(noRefresh) {
  84         this.moveDays( - this.dayCount, noRefresh);
  85     },
  86
  87     // private
  88     onClick: function(e, t) {
  89         var el = e.getTarget('td', 3),
  90             parts,
  91             dt;
  92         if (el) {
  93             if (el.id && el.id.indexOf(this.dayElIdDelimiter) > -1) {
  94                 parts = el.id.split(this.dayElIdDelimiter);
  95                 dt = parts[parts.length - 1];
  96
  97                 this.fireEvent('dayclick', this, Date.parseDate(dt, 'Ymd'), true, Ext.get(this.getDayId(dt)));
  98                 return;
  99             }
 100         }
 101         Ext.calendar.DayHeaderView.superclass.onClick.apply(this, arguments);
 102     }
 103 });
 104
 105 Ext.reg('dayheaderview', Ext.calendar.DayHeaderView);