add extjs 6.0.1 sources

[extjs.git] / extjs / examples / classic / calendar / src / view / MonthDayDetail.js

/*\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.define('Ext.calendar.view.MonthDayDetail', {\r
    extend: 'Ext.Component',\r
    alias: 'widget.monthdaydetailview',\r
\r
    requires: [\r
        'Ext.XTemplate',\r
        'Ext.calendar.util.Date',\r
        'Ext.calendar.view.AbstractCalendar'\r
    ],\r
\r
    afterRender: function() {\r
        this.tpl = this.getTemplate();\r
\r
        this.callParent(arguments);\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 = Ext.Date.clearTime(this.date, true).getTime(),\r
                recStart = Ext.Date.clearTime(rec.data[Ext.calendar.data.EventMappings.StartDate.name], true).getTime(),\r
                startsOnDate = (thisDt == recStart),\r
                spansDate = false;\r
\r
            if (!startsOnDate) {\r
                var recEnd = Ext.Date.clearTime(rec.data[Ext.calendar.data.EventMappings.EndDate.name], 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.data.EventMappings;\r
\r
            item._renderAsAllDay = item[M.IsAllDay.name] || Ext.calendar.util.Date.diffDays(item[M.StartDate.name], item[M.EndDate.name]) > 0;\r
            item.spanLeft = Ext.calendar.util.Date.diffDays(item[M.StartDate.name], this.date) > 0;\r
            item.spanRight = Ext.calendar.util.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