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