Upgrade to ExtJS 3.3.0 - Released 10/06/2010
[extjs.git] / examples / docs / source / MonthDayDetailView.html
diff --git a/examples/docs/source/MonthDayDetailView.html b/examples/docs/source/MonthDayDetailView.html
new file mode 100644 (file)
index 0000000..8f513e1
--- /dev/null
@@ -0,0 +1,122 @@
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
+  <title>The source code</title>
+    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
+</head>
+<body  onload="prettyPrint();">
+    <pre class="prettyprint lang-js">/*!
+ * Ext JS Library 3.3.0
+ * Copyright(c) 2006-2010 Ext JS, Inc.
+ * licensing@extjs.com
+ * http://www.extjs.com/license
+ */
+/*\r
+ * This is the view used internally by the panel that displays overflow events in the\r
+ * month view. Anytime a day cell cannot display all of its events, it automatically displays\r
+ * a link at the bottom to view all events for that day. When clicked, a panel pops up that\r
+ * uses this view to display the events for that day.\r
+ */\r
+Ext.calendar.MonthDayDetailView = Ext.extend(Ext.BoxComponent, {\r
+    initComponent: function() {\r
+        Ext.calendar.CalendarView.superclass.initComponent.call(this);\r
+\r
+        this.addEvents({\r
+            eventsrendered: true\r
+        });\r
+\r
+        if (!this.el) {\r
+            this.el = document.createElement('div');\r
+        }\r
+    },\r
+\r
+    afterRender: function() {\r
+        this.tpl = this.getTemplate();\r
+\r
+        Ext.calendar.MonthDayDetailView.superclass.afterRender.call(this);\r
+\r
+        this.el.on({\r
+            'click': this.view.onClick,\r
+            'mouseover': this.view.onMouseOver,\r
+            'mouseout': this.view.onMouseOut,\r
+            scope: this.view\r
+        });\r
+    },\r
+\r
+    getTemplate: function() {\r
+        if (!this.tpl) {\r
+            this.tpl = new Ext.XTemplate(\r
+            '<div class="ext-cal-mdv x-unselectable">',\r
+            '<table class="ext-cal-mvd-tbl" cellpadding="0" cellspacing="0">',\r
+            '<tbody>',\r
+            '<tpl for=".">',\r
+            '<tr><td class="ext-cal-ev">{markup}</td></tr>',\r
+            '</tpl>',\r
+            '</tbody>',\r
+            '</table>',\r
+            '</div>'\r
+            );\r
+        }\r
+        this.tpl.compile();\r
+        return this.tpl;\r
+    },\r
+\r
+    update: function(dt) {\r
+        this.date = dt;\r
+        this.refresh();\r
+    },\r
+\r
+    refresh: function() {\r
+        if (!this.rendered) {\r
+            return;\r
+        }\r
+        var eventTpl = this.view.getEventTemplate(),\r
+\r
+        templateData = [];\r
+\r
+        evts = this.store.queryBy(function(rec) {\r
+            var thisDt = this.date.clearTime(true).getTime(),\r
+                recStart = rec.data[Ext.calendar.EventMappings.StartDate.name].clearTime(true).getTime(),\r
+                startsOnDate = (thisDt == recStart),\r
+                spansDate = false;\r
+\r
+            if (!startsOnDate) {\r
+                var recEnd = rec.data[Ext.calendar.EventMappings.EndDate.name].clearTime(true).getTime();\r
+                spansDate = recStart < thisDt && recEnd >= thisDt;\r
+            }\r
+            return startsOnDate || spansDate;\r
+        },\r
+        this);\r
+\r
+        evts.each(function(evt) {\r
+            var item = evt.data,\r
+            M = Ext.calendar.EventMappings;\r
+\r
+            item._renderAsAllDay = item[M.IsAllDay.name] || Ext.calendar.Date.diffDays(item[M.StartDate.name], item[M.EndDate.name]) > 0;\r
+            item.spanLeft = Ext.calendar.Date.diffDays(item[M.StartDate.name], this.date) > 0;\r
+            item.spanRight = Ext.calendar.Date.diffDays(this.date, item[M.EndDate.name]) > 0;\r
+            item.spanCls = (item.spanLeft ? (item.spanRight ? 'ext-cal-ev-spanboth':\r
+            'ext-cal-ev-spanleft') : (item.spanRight ? 'ext-cal-ev-spanright': ''));\r
+\r
+            templateData.push({\r
+                markup: eventTpl.apply(this.getTemplateEventData(item))\r
+            });\r
+        },\r
+        this);\r
+\r
+        this.tpl.overwrite(this.el, templateData);\r
+        this.fireEvent('eventsrendered', this, this.date, evts.getCount());\r
+    },\r
+\r
+    getTemplateEventData: function(evt) {\r
+        var data = this.view.getTemplateEventData(evt);\r
+        data._elId = 'dtl-' + data._elId;\r
+        return data;\r
+    }\r
+});\r
+\r
+Ext.reg('monthdaydetailview', Ext.calendar.MonthDayDetailView);\r
+</pre>    
+</body>
+</html>
\ No newline at end of file