/*
* This is the view used internally by the panel that displays overflow events in the
* month view. Anytime a day cell cannot display all of its events, it automatically displays
* a link at the bottom to view all events for that day. When clicked, a panel pops up that
* uses this view to display the events for that day.
*/
Ext.ensible.cal.MonthDayDetailView = Ext.extend(Ext.BoxComponent, {
initComponent : function(){
Ext.ensible.cal.CalendarView.superclass.initComponent.call(this);
this.addEvents({
eventsrendered: true
});
if(!this.el){
this.el = document.createElement('div');
}
},
afterRender : function(){
this.tpl = this.getTemplate();
Ext.ensible.cal.MonthDayDetailView.superclass.afterRender.call(this);
this.el.on({
'click': this.view.onClick,
'mouseover': this.view.onMouseOver,
'mouseout': this.view.onMouseOut,
scope: this.view
});
},
getTemplate : function(){
if(!this.tpl){
this.tpl = new Ext.XTemplate(
'',
'
',
'',
'',
'{markup} |
',
'',
'',
'
',
'
'
);
}
this.tpl.compile();
return this.tpl;
},
update : function(dt){
this.date = dt;
this.refresh();
},
refresh : function(){
if(!this.rendered){
return;
}
var eventTpl = this.view.getEventTemplate(),
templateData = [];
evts = this.store.queryBy(function(rec){
var thisDt = this.date.clearTime(true).getTime(),
M = Ext.ensible.cal.EventMappings,
recStart = rec.data[M.StartDate.name].clearTime(true).getTime(),
startsOnDate = (thisDt == recStart),
spansDate = false,
calId = rec.data[M.CalendarId.name],
calRec = this.calendarStore ? this.calendarStore.getById(calId) : null;
if(calRec && calRec.data[Ext.ensible.cal.CalendarMappings.IsHidden.name] === true){
// if the event is on a hidden calendar then no need to test the date boundaries
return false;
}
if(!startsOnDate){
var recEnd = rec.data[Ext.ensible.cal.EventMappings.EndDate.name].clearTime(true).getTime();
spansDate = recStart < thisDt && recEnd >= thisDt;
}
return startsOnDate || spansDate;
}, this);
Ext.ensible.cal.CalendarView.prototype.sortEventRecordsForDay.call(this, evts);
evts.each(function(evt){
var item = evt.data,
M = Ext.ensible.cal.EventMappings;
item._renderAsAllDay = item[M.IsAllDay.name] || Ext.ensible.Date.diffDays(item[M.StartDate.name], item[M.EndDate.name]) > 0;
item.spanLeft = Ext.ensible.Date.diffDays(item[M.StartDate.name], this.date) > 0;
item.spanRight = Ext.ensible.Date.diffDays(this.date, item[M.EndDate.name]) > 0;
item.spanCls = (item.spanLeft ? (item.spanRight ? 'ext-cal-ev-spanboth' :
'ext-cal-ev-spanleft') : (item.spanRight ? 'ext-cal-ev-spanright' : ''));
templateData.push({markup: eventTpl.apply(this.getTemplateEventData(item))});
}, this);
this.tpl.overwrite(this.el, templateData);
this.fireEvent('eventsrendered', this, this.date, evts.getCount());
},
getTemplateEventData : function(evt){
var data = this.view.getTemplateEventData(evt);
data._elId = 'dtl-'+data._elId;
return data;
}
});
Ext.reg('extensible.monthdaydetailview', Ext.ensible.cal.MonthDayDetailView);