PDA

View Full Version : [CLOSED] CalendarPanel - When event is clicked, show MenuItems



jamesand
Sep 05, 2013, 12:03 PM
Hi, I have a CalendarPanel and I would like to use MenuItems (or appropiated) to show a menu when a event is clicked.

I already tried to develop it by following this example:

http://examples2.ext.net/#/DataView/Advanced/Report/

But I could do it.

Could anyone please let me know a way to do it?

Thank you.

Daniil
Sep 05, 2013, 3:18 PM
Hi @jamesand,

Let's start with this example.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<script>
var onEventClick = function (calendarPanel, record, el) {
App.Menu1.showBy(el);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem runat="server" Text="Item 1" />
<ext:MenuItem runat="server" Text="Item 2" />
</Items>
</ext:Menu>

<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server">
<EventStore runat="server">
<Events>
<ext:EventModel
Title="My event 1"
StartDate="2013/9/15"
EndDate="2013/9/16"
CalendarId="1" />

<ext:EventModel
Title="My event 2"
StartDate="2013/9/19"
EndDate="2013/9/20"
CalendarId="1" />
</Events>
</EventStore>
<Listeners>
<EventClick Fn="onEventClick" />
</Listeners>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

jamesand
Sep 05, 2013, 6:48 PM
Your code works fine but I cannot make it work in my project.

Would it be any difference in oneventClick if the CalendarPanel is in an .ascx??

Daniil
Sep 06, 2013, 5:32 AM
So, is the Menu defined in the user control? If so, then you cannot access it by App.MenuID by default, because a client id will be prefixed with a user control's id.

Please try:

<ext:XScript runat="server">
<script>
var onEventClick = function (calendarPanel, record, el) {
#{Menu1}.showBy(el);
};
</script>
</ext:XScript>

jamesand
Sep 06, 2013, 12:05 PM
Ok perfect!!

Now I would like to set the ID of the event clicked in the CustomConfig section of each MenuItem. Would it be possible?

Daniil
Sep 06, 2013, 1:04 PM
I would implement it this way.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>

<ext:XScript runat="server">
<script>
var onEventClick = function (calendarPanel, record, el) {
var menu = #{Menu1};

menu.showBy(el);
menu.eventId = record.data.EventId;
};
</script>
</ext:XScript>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<ext:Menu ID="Menu1" runat="server">
<Items>
<ext:MenuItem runat="server" Text="Item 1">
<Listeners>
<Click Handler="alert(this.ownerCt.eventId);" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem runat="server" Text="Item 2">
<Listeners>
<Click Handler="alert(this.ownerCt.eventId);" />
</Listeners>
</ext:MenuItem>
</Items>
</ext:Menu>

<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:CalendarPanel ID="CalendarPanel1" runat="server">
<EventStore runat="server">
<Events>
<ext:EventModel
EventId="1"
Title="My event 1"
StartDate="2013/9/15"
EndDate="2013/9/16"
CalendarId="1" />

<ext:EventModel
EventId="2"
Title="My event 2"
StartDate="2013/9/19"
EndDate="2013/9/20"
CalendarId="1" />
</Events>
</EventStore>
<Listeners>
<EventClick Fn="onEventClick" />
</Listeners>
</ext:CalendarPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>

jamesand
Sep 06, 2013, 2:34 PM
Thank you again Daniil! It works perfectly