examples/docs/source/DayBodyTemplate.html

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