examples/calendar/src/templates/DayBodyTemplate.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7 /**
   8  * @class Ext.calendar.DayBodyTemplate
   9  * @extends Ext.XTemplate
  10  * <p>This is the template used to render the scrolling body container used in {@link Ext.calendar.DayView DayView} and
  11  * {@link Ext.calendar.WeekView WeekView}. This template is automatically bound to the underlying event store by the
  12  * calendar components and expects records of type {@link Ext.calendar.EventRecord}.</p>
  13  * <p>Note that this template would not normally be used directly. Instead you would use the {@link Ext.calendar.DayViewTemplate}
  14  * that internally creates an instance of this template along with a {@link Ext.calendar.DayHeaderTemplate}.</p>
  15  * @constructor
  16  * @param {Object} config The config object
  17  */
  18 Ext.calendar.DayBodyTemplate = function(config){
  19
  20     Ext.apply(this, config);
  21
  22     Ext.calendar.DayBodyTemplate.superclass.constructor.call(this,
  23         '<table class="ext-cal-bg-tbl" cellspacing="0" cellpadding="0">',
  24             '<tbody>',
  25                 '<tr height="1">',
  26                     '<td class="ext-cal-gutter"></td>',
  27                     '<td colspan="{dayCount}">',
  28                         '<div class="ext-cal-bg-rows">',
  29                             '<div class="ext-cal-bg-rows-inner">',
  30                                 '<tpl for="times">',
  31                                     '<div class="ext-cal-bg-row">',
  32                                         '<div class="ext-cal-bg-row-div ext-row-{[xindex]}"></div>',
  33                                     '</div>',
  34                                 '</tpl>',
  35                             '</div>',
  36                         '</div>',
  37                     '</td>',
  38                 '</tr>',
  39                 '<tr>',
  40                     '<td class="ext-cal-day-times">',
  41                         '<tpl for="times">',
  42                             '<div class="ext-cal-bg-row">',
  43                                 '<div class="ext-cal-day-time-inner">{.}</div>',
  44                             '</div>',
  45                         '</tpl>',
  46                     '</td>',
  47                     '<tpl for="days">',
  48                         '<td class="ext-cal-day-col">',
  49                             '<div class="ext-cal-day-col-inner">',
  50                                 '<div id="{[this.id]}-day-col-{.:date("Ymd")}" class="ext-cal-day-col-gutter"></div>',
  51                             '</div>',
  52                         '</td>',
  53                     '</tpl>',
  54                 '</tr>',
  55             '</tbody>',
  56         '</table>'
  57     );
  58 };
  59
  60 Ext.extend(Ext.calendar.DayBodyTemplate, Ext.XTemplate, {
  61     // private
  62     applyTemplate : function(o){
  63         this.today = new Date().clearTime();
  64         this.dayCount = this.dayCount || 1;
  65
  66         var i = 0, days = [],
  67             dt = o.viewStart.clone(),
  68             times;
  69
  70         for(; i<this.dayCount; i++){
  71             days[i] = dt.add(Date.DAY, i);
  72         }
  73
  74         times = [];
  75         dt = new Date().clearTime();
  76         for(i=0; i<24; i++){
  77             times.push(dt.format('ga'));
  78             dt = dt.add(Date.HOUR, 1);
  79         }
  80
  81         return Ext.calendar.DayBodyTemplate.superclass.applyTemplate.call(this, {
  82             days: days,
  83             dayCount: days.length,
  84             times: times
  85         });
  86     }
  87 });
  88
  89 Ext.calendar.DayBodyTemplate.prototype.apply = Ext.calendar.DayBodyTemplate.prototype.applyTemplate;