Aug 29, 2011, 11:12 AM
Calendar loses DOM on refresh
HI All,
I have a small problem with a Calendar panel. Here is the main view of my app (stripped down of the useless stuff):
Any idea?
I have a small problem with a Calendar panel. Here is the main view of my app (stripped down of the useless stuff):
<html>
<head id="Head1" runat="server">
<title>Joono Campaign Server</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Style" />
<link rel="stylesheet" type="text/css" href="../../Content/Calendar.css" />
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder2" runat="server" Mode="ScriptFiles" />
<script type="text/javascript" src="../../Scripts/Calendar.js"></script>
<script type="text/javascript" src="../../Scripts/JoonoScript.js"></script>
</head>
<body>
<ext:ResourceManager ID="ResourceManager1" runat="server" ShowWarningOnAjaxFailure="false" />
<ext:Button runat="server" Text="Reload">
<Listeners>
<Click Handler="mainPnl.removeAll(); mainPnl.reload();" />
</Listeners>
</ext:Button>
<ext:Panel ID="mainPnl" runat="server" Width="1200" Height="700">
<AutoLoad Url="/Calendar/" ShowMask="true" Scripts="true" NoCache="true">
<Params>
<ext:Parameter Name="containerId" Value="function () { return this.id; }" Mode="Raw">
</ext:Parameter>
</Params>
</AutoLoad>
</ext:Panel>
</body>
</html>
And here is the partial view which is loaded into the Panel:<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.CalendarPanel1.EventStore.Events.Add(
new Event()
{
EventId = 1,
CalendarId = 1,
Title = "Test Event",
IsAllDay = true,
StartDate = new DateTime(2011, 8, 20),
EndDate = new DateTime(2011, 8, 30)
});
}
}
</script>
<ext:FitLayout runat="server">
<Items>
<ext:CalendarPanel
ID="CalendarPanel1"
runat="server"
Border="false" Title="..."
Cls="app-center" Width="1200" Height="600">
<GroupStore ID="GroupStore1" runat="server">
<Groups>
<ext:Group CalendarId="1" Title="Events" />
</Groups>
</GroupStore>
<EventStore runat="server" ID="EventStore1">
</EventStore>
<MonthView ID="MonthView1"
runat="server"
ShowHeader="true"
ShowWeekLinks="true"
ShowWeekNumbers="true"
/>
<DirectEvents>
</DirectEvents>
<Listeners>
<ViewChange Fn="viewChange" />
</Listeners>
</ext:CalendarPanel>
</Items>
</ext:FitLayout>
The calendar shows up nicely with the Event. Also, on the calendar you can drag and select a range of days and they will be highlighted... of course there is no event attached so nothing happens. The problem is if I click the button "Reload": the view refreshes ok but the drag to select the range tops working and the error I get in Firebug is: "this.el.dom is undefined".Any idea?