Upgrade to ExtJS 3.3.0 - Released 10/06/2010

[extjs.git] / examples / calendar / src / templates / DayBodyTemplate.js

diff --git a/examples/calendar/src/templates/DayBodyTemplate.js b/examples/calendar/src/templates/DayBodyTemplate.js
new file mode 100644 (file)
index 0000000..9260014
--- /dev/null
+++ b/examples/calendar/src/templates/DayBodyTemplate.js
@@ -0,0 +1,89 @@
+/*!
+ * Ext JS Library 3.3.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/**
+ * @class Ext.calendar.DayBodyTemplate
+ * @extends Ext.XTemplate
+ * <p>This is the template used to render the scrolling body container used in {@link Ext.calendar.DayView DayView} and 
+ * {@link Ext.calendar.WeekView WeekView}. This template is automatically bound to the underlying event store by the 
+ * calendar components and expects records of type {@link Ext.calendar.EventRecord}.</p>
+ * <p>Note that this template would not normally be used directly. Instead you would use the {@link Ext.calendar.DayViewTemplate}
+ * that internally creates an instance of this template along with a {@link Ext.calendar.DayHeaderTemplate}.</p>
+ * @constructor
+ * @param {Object} config The config object
+ */
+Ext.calendar.DayBodyTemplate = function(config){
+    
+    Ext.apply(this, config);
+    
+    Ext.calendar.DayBodyTemplate.superclass.constructor.call(this,
+        '<table class="ext-cal-bg-tbl" cellspacing="0" cellpadding="0">',
+            '<tbody>',
+                '<tr height="1">',
+                    '<td class="ext-cal-gutter"></td>',
+                    '<td colspan="{dayCount}">',
+                        '<div class="ext-cal-bg-rows">',
+                            '<div class="ext-cal-bg-rows-inner">',
+                                '<tpl for="times">',
+                                    '<div class="ext-cal-bg-row">',
+                                        '<div class="ext-cal-bg-row-div ext-row-{[xindex]}"></div>',
+                                    '</div>',
+                                '</tpl>',
+                            '</div>',
+                        '</div>',
+                    '</td>',
+                '</tr>',
+                '<tr>',
+                    '<td class="ext-cal-day-times">',
+                        '<tpl for="times">',
+                            '<div class="ext-cal-bg-row">',
+                                '<div class="ext-cal-day-time-inner">{.}</div>',
+                            '</div>',
+                        '</tpl>',
+                    '</td>',
+                    '<tpl for="days">',
+                        '<td class="ext-cal-day-col">',
+                            '<div class="ext-cal-day-col-inner">',
+                                '<div id="{[this.id]}-day-col-{.:date("Ymd")}" class="ext-cal-day-col-gutter"></div>',
+                            '</div>',
+                        '</td>',
+                    '</tpl>',
+                '</tr>',
+            '</tbody>',
+        '</table>'
+    );
+};
+
+Ext.extend(Ext.calendar.DayBodyTemplate, Ext.XTemplate, {
+    // private
+    applyTemplate : function(o){
+        this.today = new Date().clearTime();
+        this.dayCount = this.dayCount || 1;
+        
+        var i = 0, days = [],
+            dt = o.viewStart.clone(),
+            times;
+            
+        for(; i<this.dayCount; i++){
+            days[i] = dt.add(Date.DAY, i);
+        }
+
+        times = [];
+        dt = new Date().clearTime();
+        for(i=0; i<24; i++){
+            times.push(dt.format('ga'));
+            dt = dt.add(Date.HOUR, 1);
+        }
+        
+        return Ext.calendar.DayBodyTemplate.superclass.applyTemplate.call(this, {
+            days: days,
+            dayCount: days.length,
+            times: times
+        });
+    }
+});
+
+Ext.calendar.DayBodyTemplate.prototype.apply = Ext.calendar.DayBodyTemplate.prototype.applyTemplate;