examples/calendar/src/views/MonthDayDetailView.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 /*\r
   8  * This is the view used internally by the panel that displays overflow events in the\r
   9  * month view. Anytime a day cell cannot display all of its events, it automatically displays\r
  10  * a link at the bottom to view all events for that day. When clicked, a panel pops up that\r
  11  * uses this view to display the events for that day.\r
  12  */\r
  13 Ext.calendar.MonthDayDetailView = Ext.extend(Ext.BoxComponent, {\r
  14     initComponent: function() {\r
  15         Ext.calendar.CalendarView.superclass.initComponent.call(this);\r
  16 \r
  17         this.addEvents({\r
  18             eventsrendered: true\r
  19         });\r
  20 \r
  21         if (!this.el) {\r
  22             this.el = document.createElement('div');\r
  23         }\r
  24     },\r
  25 \r
  26     afterRender: function() {\r
  27         this.tpl = this.getTemplate();\r
  28 \r
  29         Ext.calendar.MonthDayDetailView.superclass.afterRender.call(this);\r
  30 \r
  31         this.el.on({\r
  32             'click': this.view.onClick,\r
  33             'mouseover': this.view.onMouseOver,\r
  34             'mouseout': this.view.onMouseOut,\r
  35             scope: this.view\r
  36         });\r
  37     },\r
  38 \r
  39     getTemplate: function() {\r
  40         if (!this.tpl) {\r
  41             this.tpl = new Ext.XTemplate(\r
  42             '<div class="ext-cal-mdv x-unselectable">',\r
  43             '<table class="ext-cal-mvd-tbl" cellpadding="0" cellspacing="0">',\r
  44             '<tbody>',\r
  45             '<tpl for=".">',\r
  46             '<tr><td class="ext-cal-ev">{markup}</td></tr>',\r
  47             '</tpl>',\r
  48             '</tbody>',\r
  49             '</table>',\r
  50             '</div>'\r
  51             );\r
  52         }\r
  53         this.tpl.compile();\r
  54         return this.tpl;\r
  55     },\r
  56 \r
  57     update: function(dt) {\r
  58         this.date = dt;\r
  59         this.refresh();\r
  60     },\r
  61 \r
  62     refresh: function() {\r
  63         if (!this.rendered) {\r
  64             return;\r
  65         }\r
  66         var eventTpl = this.view.getEventTemplate(),\r
  67 \r
  68         templateData = [];\r
  69 \r
  70         evts = this.store.queryBy(function(rec) {\r
  71             var thisDt = this.date.clearTime(true).getTime(),\r
  72                 recStart = rec.data[Ext.calendar.EventMappings.StartDate.name].clearTime(true).getTime(),\r
  73                 startsOnDate = (thisDt == recStart),\r
  74                 spansDate = false;\r
  75 \r
  76             if (!startsOnDate) {\r
  77                 var recEnd = rec.data[Ext.calendar.EventMappings.EndDate.name].clearTime(true).getTime();\r
  78                 spansDate = recStart < thisDt && recEnd >= thisDt;\r
  79             }\r
  80             return startsOnDate || spansDate;\r
  81         },\r
  82         this);\r
  83 \r
  84         evts.each(function(evt) {\r
  85             var item = evt.data,\r
  86             M = Ext.calendar.EventMappings;\r
  87 \r
  88             item._renderAsAllDay = item[M.IsAllDay.name] || Ext.calendar.Date.diffDays(item[M.StartDate.name], item[M.EndDate.name]) > 0;\r
  89             item.spanLeft = Ext.calendar.Date.diffDays(item[M.StartDate.name], this.date) > 0;\r
  90             item.spanRight = Ext.calendar.Date.diffDays(this.date, item[M.EndDate.name]) > 0;\r
  91             item.spanCls = (item.spanLeft ? (item.spanRight ? 'ext-cal-ev-spanboth':\r
  92             'ext-cal-ev-spanleft') : (item.spanRight ? 'ext-cal-ev-spanright': ''));\r
  93 \r
  94             templateData.push({\r
  95                 markup: eventTpl.apply(this.getTemplateEventData(item))\r
  96             });\r
  97         },\r
  98         this);\r
  99 \r
 100         this.tpl.overwrite(this.el, templateData);\r
 101         this.fireEvent('eventsrendered', this, this.date, evts.getCount());\r
 102     },\r
 103 \r
 104     getTemplateEventData: function(evt) {\r
 105         var data = this.view.getTemplateEventData(evt);\r
 106         data._elId = 'dtl-' + data._elId;\r
 107         return data;\r
 108     }\r
 109 });\r
 110 \r
 111 Ext.reg('monthdaydetailview', Ext.calendar.MonthDayDetailView);\r