examples/docs/source/BoxLayoutTemplate.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.BoxLayoutTemplate"></div>/**
  16  * @class Ext.calendar.BoxLayoutTemplate
  17  * @extends Ext.XTemplate
  18  * <p>This is the template used to render calendar views based on small day boxes within a non-scrolling container (currently
  19  * the {@link Ext.calendar.MonthView MonthView} and the all-day headers for {@link Ext.calendar.DayView DayView} and
  20  * {@link Ext.calendar.WeekView WeekView}. This template is automatically bound to the underlying event store by the
  21  * calendar components and expects records of type {@link Ext.calendar.EventRecord}.</p>
  22  * @constructor
  23  * @param {Object} config The config object
  24  */
  25 Ext.calendar.BoxLayoutTemplate = function(config){
  26
  27     Ext.apply(this, config);
  28
  29     var weekLinkTpl = this.showWeekLinks ? '<div id="{weekLinkId}" class="ext-cal-week-link">{weekNum}</div>' : '';
  30
  31     Ext.calendar.BoxLayoutTemplate.superclass.constructor.call(this,
  32         '<tpl for="weeks">',
  33             '<div id="{[this.id]}-wk-{[xindex-1]}" class="ext-cal-wk-ct" style="top:{[this.getRowTop(xindex, xcount)]}%; height:{[this.getRowHeight(xcount)]}%;">',
  34                 weekLinkTpl,
  35                 '<table class="ext-cal-bg-tbl" cellpadding="0" cellspacing="0">',
  36                     '<tbody>',
  37                         '<tr>',
  38                             '<tpl for=".">',
  39                                  '<td id="{[this.id]}-day-{date:date("Ymd")}" class="{cellCls}">&nbsp;</td>',
  40                             '</tpl>',
  41                         '</tr>',
  42                     '</tbody>',
  43                 '</table>',
  44                 '<table class="ext-cal-evt-tbl" cellpadding="0" cellspacing="0">',
  45                     '<tbody>',
  46                         '<tr>',
  47                             '<tpl for=".">',
  48                                 '<td id="{[this.id]}-ev-day-{date:date("Ymd")}" class="{titleCls}"><div>{title}</div></td>',
  49                             '</tpl>',
  50                         '</tr>',
  51                     '</tbody>',
  52                 '</table>',
  53             '</div>',
  54         '</tpl>', {
  55             getRowTop: function(i, ln){
  56                 return ((i-1)*(100/ln));
  57             },
  58             getRowHeight: function(ln){
  59                 return 100/ln;
  60             }
  61         }
  62     );
  63 };
  64
  65 Ext.extend(Ext.calendar.BoxLayoutTemplate, Ext.XTemplate, {
  66     // private
  67     applyTemplate : function(o){
  68
  69         Ext.apply(this, o);
  70
  71         var w = 0, title = '', first = true, isToday = false, showMonth = false, prevMonth = false, nextMonth = false,
  72             weeks = [[]],
  73             today = new Date().clearTime(),
  74             dt = this.viewStart.clone(),
  75             thisMonth = this.startDate.getMonth();
  76
  77         for(; w < this.weekCount || this.weekCount == -1; w++){
  78             if(dt > this.viewEnd){
  79                 break;
  80             }
  81             weeks[w] = [];
  82
  83             for(var d = 0; d < this.dayCount; d++){
  84                 isToday = dt.getTime() === today.getTime();
  85                 showMonth = first || (dt.getDate() == 1);
  86                 prevMonth = (dt.getMonth() < thisMonth) && this.weekCount == -1;
  87                 nextMonth = (dt.getMonth() > thisMonth) && this.weekCount == -1;
  88
  89                 if(dt.getDay() == 1){
  90                     // The ISO week format 'W' is relative to a Monday week start. If we
  91                     // make this check on Sunday the week number will be off.
  92                     weeks[w].weekNum = this.showWeekNumbers ? dt.format('W') : '&nbsp;';
  93                     weeks[w].weekLinkId = 'ext-cal-week-'+dt.format('Ymd');
  94                 }
  95
  96                 if(showMonth){
  97                     if(isToday){
  98                         title = this.getTodayText();
  99                     }
 100                     else{
 101                         title = dt.format(this.dayCount == 1 ? 'l, F j, Y' : (first ? 'M j, Y' : 'M j'));
 102                     }
 103                 }
 104                 else{
 105                     var dayFmt = (w == 0 && this.showHeader !== true) ? 'D j' : 'j';
 106                     title = isToday ? this.getTodayText() : dt.format(dayFmt);
 107                 }
 108
 109                 weeks[w].push({
 110                     title: title,
 111                     date: dt.clone(),
 112                     titleCls: 'ext-cal-dtitle ' + (isToday ? ' ext-cal-dtitle-today' : '') +
 113                         (w==0 ? ' ext-cal-dtitle-first' : '') +
 114                         (prevMonth ? ' ext-cal-dtitle-prev' : '') +
 115                         (nextMonth ? ' ext-cal-dtitle-next' : ''),
 116                     cellCls: 'ext-cal-day ' + (isToday ? ' ext-cal-day-today' : '') +
 117                         (d==0 ? ' ext-cal-day-first' : '') +
 118                         (prevMonth ? ' ext-cal-day-prev' : '') +
 119                         (nextMonth ? ' ext-cal-day-next' : '')
 120                 });
 121                 dt = dt.add(Date.DAY, 1);
 122                 first = false;
 123             }
 124         }
 125
 126         return Ext.calendar.BoxLayoutTemplate.superclass.applyTemplate.call(this, {
 127             weeks: weeks
 128         });
 129     },
 130
 131     // private
 132     getTodayText : function(){
 133         var dt = new Date().format('l, F j, Y'),
 134             todayText = this.showTodayText !== false ? this.todayText : '',
 135             timeText = this.showTime !== false ? ' <span id="'+this.id+'-clock" class="ext-cal-dtitle-time">' +
 136                     new Date().format('g:i a') + '</span>' : '',
 137             separator = todayText.length > 0 || timeText.length > 0 ? ' &mdash; ' : '';
 138
 139         if(this.dayCount == 1){
 140             return dt + separator + todayText + timeText;
 141         }
 142         fmt = this.weekCount == 1 ? 'D j' : 'j';
 143         return todayText.length > 0 ? todayText + timeText : new Date().format(fmt) + timeText;
 144     }
 145 });
 146
 147 Ext.calendar.BoxLayoutTemplate.prototype.apply = Ext.calendar.BoxLayoutTemplate.prototype.applyTemplate;
 148 </pre>
 149 </body>
 150 </html>