Jan 21, 2011, 5:53 AM
Calendar sends multiple proxy requests on startup
Why does the calendar send 5 proxy requests on load? I'm confused about how data is loaded when using the calendar.
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ExtSiteMaster.Master" Inherits="System.Web.Mvc.ViewPage<MyAppApp.Models.Group>" %>
<%@ Import Namespace="MyAppApp.Models" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
ExtGroup
</asp:Content>
<asp:Content ID="extraCss" ContentPlaceHolderID="BottomHeader" runat="server">
<style type="text/css">
#tpGroupTabs__tabJoinGroup .x-tab-right, #tpGroupTabs__tabJoinGroup .x-tab-left, #tpGroupTabs__tabJoinGroup .x-tab-strip-inner
{
background-image:url("../../Content/img/tabs/orange-tab-sprite.gif");
}
#tpGroupTabs span.x-tab-strip-text {font-size:14px; font-family:Arial }
.ext-el-mask { background: none; }
</style>
<script type="text/javascript">
var MyAppCalendar = {
getCalendar: function () {
return MyAppCalendar.plnCalendar;
},
getStore: function () {
return MyAppCalendar.storeCalendarEvents;
},
getWindow: function () {
return MyAppCalendar.winEditEvent;
},
viewChange: function (p, vw, dateInfo) {
var win = this.getWindow();
if (win) {
win.hide();
}
if (dateInfo !== null) {
// will be null when switching to the event edit form, so ignore
this.DatePicker1.setValue(dateInfo.activeDate);
this.updateTitle(dateInfo.viewStart, dateInfo.viewEnd);
}
},
updateTitle: function (startDt, endDt) {
var msg = '';
if (startDt.clearTime().getTime() == endDt.clearTime().getTime()) {
msg = startDt.format('F j, Y');
} else if (startDt.getFullYear() == endDt.getFullYear()) {
if (startDt.getMonth() == endDt.getMonth()) {
msg = startDt.format('F j') + ' - ' + endDt.format('j, Y');
} else {
msg = startDt.format('F j') + ' - ' + endDt.format('F j, Y');
}
} else {
msg = startDt.format('F j, Y') + ' - ' + endDt.format('F j, Y');
}
this.Panel1.setTitle(msg);
},
setStartDate: function (picker, date) {
this.getCalendar().setStartDate(date);
},
rangeSelect: function (cal, dates, callback) {
this.record.show(cal, dates);
this.getWindow().on('hide', callback, cal, { single: true });
},
dayClick: function (cal, dt, allDay, el) {
this.record.show.call(this, cal, {
StartDate: dt,
IsAllDay: allDay
}, el);
},
record: {
add: function (win, rec) {
win.hide();
rec.data.IsNew = false;
MyAppCalendar.getStore().add(rec);
MyAppCalendar.ShowMsg('Event ' + rec.data.Title + ' was added');
},
update: function (win, rec) {
win.hide();
rec.commit();
MyAppCalendar.ShowMsg('Event ' + rec.data.Title + ' was updated');
},
remove: function (win, rec) {
this.getStore().remove(rec);
win.hide();
MyAppCalendar.ShowMsg('Event ' + rec.data.Title + ' was deleted');
},
edit: function (win, rec) {
win.hide();
MyAppCalendar.getCalendar().showEditForm(rec);
},
resize: function (cal, rec) {
rec.commit();
MyAppCalendar.ShowMsg('Event ' + rec.data.Title + ' was updated');
},
move: function (cal, rec) {
rec.commit();
MyAppCalendar.ShowMsg('Event ' + rec.data.Title + ' was moved to ' + rec.data.StartDate.format('F jS' + (rec.data.IsAllDay ? '' : ' \\a\\t g:i a')));
},
show: function (cal, rec, el) {
MyAppCalendar.getWindow().show(rec, el);
},
saveAll: function () {
MyAppCalendar.getStore().submitData();
}
}
};
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<ext:Panel ID="GroupPageWrapper" runat="server" Width="900" Border="false">
<Items>
<ext:TabPanel Plain="true" ID="tpGroupTabs" runat="server" ActiveTabIndex="0" Padding="20" TabWidth="200" Border="false" MinHeight="400">
<Items>
<ext:Panel ID="tabCalendar" runat="server" Closable="false" Title="Calendar" Height="500" Layout="fit">
<Items>
<ext:BorderLayout ID="BorderLayout1" runat="server">
<West Collapsible="true" Split="true">
<ext:Panel ID="Panel4" runat="server" Title="Quick Date" Width="150">
<Items>
<ext:DatePicker
ID="DatePicker1"
runat="server"
Cls="ext-cal-nav-picker">
<Listeners>
<Select Fn="MyAppCalendar.setStartDate" Scope="MyAppCalendar" />
</Listeners>
</ext:DatePicker>
</Items>
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:Button
ID="Button1"
runat="server"
Text="Save All Events"
Icon="Disk"
OnClientClick="MyAppCalendar.record.saveAll();"
/>
</Items>
</ext:Toolbar>
</TopBar>
</ext:Panel>
</West>
<Center>
<ext:Panel ID="Panel5" runat="server" Title="Group Calendar" Layout="Fit" Header="false">
<Items>
<ext:CalendarPanel
ID="plnCalendar"
runat="server"
Region="Center"
ActiveIndex="2"
Border="false">
<GroupStore ID="storeEventGroups" runat="server">
<Groups>
<ext:Group CalendarId="1" Title="Home" />
<ext:Group CalendarId="2" Title="Work" />
<ext:Group CalendarId="3" Title="School" />
</Groups>
</GroupStore>
<EventStore ID="storeCalendarEvents" runat="server" DateFormat="M$">
<Proxy>
<ext:HttpProxy Url="/Event/GetEventsByDate" />
</Proxy>
<Reader>
<ext:JsonReader Root="data">
<Fields>
<ext:RecordField Name="EventId" />
<ext:RecordField Name="CalendarId" />
<ext:RecordField Name="Title" />
<ext:RecordField Name="StartDate" />
<ext:RecordField Name="EndDate" />
<ext:RecordField Name="IsAllDay" />
<ext:RecordField Name="Location" />
<ext:RecordField Name="Notes" />
</Fields>
</ext:JsonReader>
</Reader>
<BaseParams>
<ext:Parameter Name="start" Value="" Mode="Value" />
<ext:Parameter Name="end" Value="" Mode="Value" />
</BaseParams>
</EventStore>
<MonthView ID="MonthView1"
runat="server"
ShowHeader="true"
ShowWeekLinks="true"
ShowWeekNumbers="true"
/>
<Listeners>
<ViewChange Fn="MyAppCalendar.viewChange" Scope="MyAppCalendar" />
<EventClick Fn="MyAppCalendar.record.show" Scope="MyAppCalendar" />
<DayClick Fn="MyAppCalendar.dayClick" Scope="MyAppCalendar" />
<RangeSelect Fn="MyAppCalendar.rangeSelect" Scope="MyAppCalendar" />
<EventMove Fn="MyAppCalendar.record.move" Scope="MyAppCalendar" />
<EventResize Fn="MyAppCalendar.record.resize" Scope="MyAppCalendar" />
<EventDelete Fn="MyAppCalendar.record.remove" />
</Listeners>
</ext:CalendarPanel>
</Items>
</ext:Panel>
</Center>
<East Collapsible="true" Split="true">
<ext:Panel ID="Panel6" runat="server" Title="Event Info" Width="100" Collapsed="true">
</ext:Panel>
</East>
<South Collapsible="true" Split="true">
<ext:Panel ID="Panel7" runat="server" Height="150" Title="Event Details" Collapsed="true">
<Items>
<ext:EventEditWindow
ID="winEditEvent"
runat="server"
Hidden="true"
GroupStoreID="storeEventGroups">
<Listeners>
<EventAdd Fn="MyAppCalendar.record.add" Scope="MyAppCalendar" />
<EventUpdate Fn="MyAppCalendar.record.update" Scope="MyAppCalendar" />
<EditDetails Fn="MyAppCalendar.record.edit" Scope="MyAppCalendar" />
<EventDelete Fn="MyAppCalendar.record.remove" Scope="MyAppCalendar" />
</Listeners>
</ext:EventEditWindow>
</Items>
</ext:Panel>
</South>
</ext:BorderLayout>
</Items>
</ext:Panel>
</asp:Content>public AjaxStoreResult GetEventsByDate(DateTime? start, DateTime? end)
{
try
{
// get the previous month as well
DateTime startDate = start.Value.AddDays(-(start.Value.Day + 30));
// if end is not null, get the end date plus the next month. Else get the next month from the start date.
DateTime endDate = (end.HasValue) ? end.Value.AddDays((end.Value.Day + 30)) : start.Value.AddDays(((30 - start.Value.Day) + 30));
var db = new AppLinqModelDataContext();
var events = from x in db.group_events
where
/* start date is before start and end date is after end */
(startDate <= x.start_time && endDate >= x.end_time) ||
/* start date is between the start and end date */
(startDate >= x.start_time && startDate <= x.end_time) ||
/* start date is before start and
end date is before end and
end is after start */
(startDate <= x.start_time && endDate <= x.end_time && endDate > x.start_time)
&& x.group_id == Session["group_id"]
select new
{
EventId = x.event_id,
CalendarId = 1,
Title = x.title,
StartDate = x.start_time,
EndDate = x.end_time,
IsAllDay = x.all_day,
Location = x.location,
Notes = x.description
};
return new AjaxStoreResult(events, events.Count());
}
catch
{
return new AjaxStoreResult(new object[] { }, 0);
}
}
Last edited by craig2005; Jan 21, 2011 at 6:22 AM.
