[CLOSED] CalendarPanel: Is it possible to set the tooltip for the Events?

  1. #1

    [CLOSED] CalendarPanel: Is it possible to set the tooltip for the Events?

    Hi,
    Gridpanel only show the "Title" value for the Events.
    I want to define a tooltip for each event to show some more information.
    I tried, but it seems it could not set the <ext:ToolTip> for each <ext:Event>.
    So is there any other way to reslove it?
    Thanks.
    Last edited by Daniil; May 20, 2011 at 12:47 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I assume that something like this is possible for a calendar.
    https://examples1.ext.net/#/Miscella..._Cell_Tooltip/
  3. #3
    Quote Originally Posted by Daniil View Post
    Hi,

    I assume that something like this is possible for a calendar.
    https://examples1.ext.net/#/Miscella..._Cell_Tooltip/
    Hi, Daniil

    I can understand this example, and I tried to code according to this example, but failed.
    It seems difficult for me, so could you show me some key point code for me based on this CalendarPanel?

    Thanks a lot.
  4. #4
    I understand:)

    Please look at the example. I would suggest you to debug Show handler to understand how it works.

    Example
    <%@ Page Language="C#" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Viewport runat="server" Layout="fit">
            <Items>
                <ext:CalendarPanel ID="CalendarPanel1" runat="server">
                    <EventStore runat="server">
                        <Events>
                            <ext:Event 
                                EventId="0" 
                                Title="My event 1" 
                                StartDate="2011/5/15" 
                                EndDate="2011/5/16" 
                                CalendarId="1" />
                            <ext:Event 
                                EventId="1" 
                                Title="My event 2" 
                                StartDate="2011/5/21" 
                                EndDate="2011/5/22" 
                                CalendarId="2" />
                        </Events>
                    </EventStore>
                </ext:CalendarPanel>
            </Items>
        </ext:Viewport>
        <ext:ToolTip 
            runat="server" 
            Target="={#{CalendarPanel1}.body}" 
            Delegate=".ext-cal-evt" 
            Calendar="={CalendarPanel1}">
            <Listeners>
                <Show Handler="var cls = Ext.fly(this.triggerElement).getAttribute('class'),
                                   clsWithId = cls.split(' ')[0];
                                   eventId = clsWithId.substr(clsWithId.indexOf('-evt-') + 5);
                                   recordIndex = this.calendar.eventStore.find('EventId', parseInt(eventId));
                                   eventData = this.calendar.eventStore.getAt(recordIndex).data;
                               this.body.dom.innerHTML = Ext.encode(eventData.Title);
                               " />
            </Listeners>
        </ext:ToolTip>
        </form>
    </body>
    </html>
  5. #5
    Hi, Daniil
    I followed this code, and it can only run well in Firefox.

    Still have 2 problems:
    1) When in IE(8 or 9), it shows the error, 'null' is null or not an object
    I debugged in VS2008, it seems no 'class' attribute, very strange~~

    2) I add the Namespace for the ResourceManager, and in FireFox there was no result for tooltip.
    ...
    <ext:ResourceManager runat="server" Namespace="CompanyX" />
    ...
        <ext:ToolTip
            runat="server"
            Target="={#CompanyX.{CalendarPanel1}.body}"
            Delegate=".ext-cal-evt"
            Calendar="={CompanyX.CalendarPanel1}">
            <Listeners>
                <Show Handler="var cls = Ext.fly(this.triggerElement).getAttribute('class'),
                                   clsWithId = cls.split(' ')[0];
                                   eventId = clsWithId.substr(clsWithId.indexOf('-evt-') + 5);
                                   recordIndex = this.calendar.eventStore.find('EventId', parseInt(eventId));
                                   eventData = this.calendar.eventStore.getAt(recordIndex).data;
                               this.body.dom.innerHTML = Ext.encode(eventData.Title);
                               " />
            </Listeners>
        </ext:ToolTip>
    Thanks.
  6. #6
    Here is update sample, see the differences.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" Namespace="CompanyX" />
        <ext:Viewport runat="server" Layout="fit">
            <Items>
                <ext:CalendarPanel ID="CalendarPanel1" runat="server">
                    <EventStore runat="server">
                        <Events>
                            <ext:Event
                                EventId="0"
                                Title="My event 1"
                                StartDate="2011/5/15"
                                EndDate="2011/5/16"
                                CalendarId="1" />
                            <ext:Event
                                EventId="1"
                                Title="My event 2"
                                StartDate="2011/5/21"
                                EndDate="2011/5/22"
                                CalendarId="2" />
                        </Events>
                    </EventStore>
                </ext:CalendarPanel>
            </Items>
        </ext:Viewport>
        <ext:ToolTip
            runat="server"
            Target="={#{CalendarPanel1}.body}"
            Delegate=".ext-cal-evt"
            Calendar="={#{CalendarPanel1}}">
            <Listeners>
                <Show Handler="var cls = Ext.fly(this.triggerElement).dom.className,
                                   clsWithId = cls.split(' ')[0];
                                   eventId = clsWithId.substr(clsWithId.indexOf('-evt-') + 5);
                                   recordIndex = this.calendar.eventStore.find('EventId', parseInt(eventId));
                                   eventData = this.calendar.eventStore.getAt(recordIndex).data;
                               this.body.dom.innerHTML = Ext.encode(eventData.Title);
                               " />
            </Listeners>
        </ext:ToolTip>
        </form>
    </body>
    </html>
  7. #7
    Hi, Daniil
    Thank you, it seems no problem in Firefox.
    But in IE, still some issue.
    In "Week" Or "Day" view, when the event is not a "allday" event, it will show the error message: 'this.calendar.eventStore.getAt(...).data' is null or not an object.
    Example:
    ...
    <Events> 
       <ext:Event  EventId="0"  Title="My event 1"  StartDate="2011/5/15"  EndDate="2011/5/18"  CalendarId="1" />
       <ext:Event  EventId="1"  Title="My event 2"  StartDate="2011/5/16"  EndDate="2011/5/22"  CalendarId="2" />
       <ext:Event  EventId="2"  Title="A"  StartDate="2011/5/20 8:30"  EndDate="2011/5/20 10:50"  CalendarId="2" />
    </Events>
    ...
    I debugged this issue, and found the problem.
    I printed out the "cls","clsWidthId","eventId" value in the CalendarPanel Title
    You can see the difference between FireFox and IE in the following picture.

    1) In month view, no difference
    Click image for larger version. 

Name:	P11.jpg 
Views:	215 
Size:	52.1 KB 
ID:	2751
    2) In Week view and allday event, no difference
    Click image for larger version. 

Name:	P12.jpg 
Views:	174 
Size:	59.6 KB 
ID:	2753
    3) In Week view and non-allday event, IE could not get the eventId
    Click image for larger version. 

Name:	P13.jpg 
Views:	176 
Size:	60.7 KB 
ID:	2752
    4) In Day view, the same issue with Week view.

    To reslove this,
    I can re-split the cls if non-allday event in Week view or Day view in IE to get the eventId,
    but I think maybe you can tell me a better way to resolve this issue.

    Thanks.
  8. #8
    I'd suggest to use a regular expression.

    Example
    <%@ Page Language="C#" %>
      
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Ext.Net Example</title>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" Namespace="CompanyX" />
        <ext:Viewport runat="server" Layout="fit">
            <Items>
                <ext:CalendarPanel ID="CalendarPanel1" runat="server">
                    <EventStore runat="server">
                        <Events>
                            <ext:Event  
                                EventId="0"  
                                Title="My event 1"  
                                StartDate="2011/5/15"  
                                EndDate="2011/5/18"  
                                CalendarId="1" />
                            <ext:Event  
                                EventId="1"  
                                Title="My event 2"  
                                StartDate="2011/5/16"  
                                EndDate="2011/5/22"  
                                CalendarId="2" />
                            <ext:Event  
                                EventId="2"     
                                Title="A"  
                                StartDate="2011/5/20 8:30"  
                                EndDate="2011/5/20 10:50"  
                                CalendarId="2" />
                        </Events>
                    </EventStore>
                </ext:CalendarPanel>
            </Items>
        </ext:Viewport>
        <ext:ToolTip
            runat="server"
            Target="={#{CalendarPanel1}.body}"
            Delegate=".ext-cal-evt"
            Calendar="={#{CalendarPanel1}}">
            <Listeners>
                <Show Handler="var reg = /[a-z\ ]?CalendarPanel1\-[a-z\-]+\-evt\-(\d+)/,
                                   cls = Ext.fly(this.triggerElement).dom.className,
                                   eventId = reg.exec(cls)[1],
                                   recordIndex = this.calendar.eventStore.find('EventId', parseInt(eventId)),
                                   eventData = this.calendar.eventStore.getAt(recordIndex).data;
                               this.body.dom.innerHTML = Ext.encode(eventData.Title);" />
            </Listeners>
        </ext:ToolTip>
        </form>
    </body>
    </html>
  9. #9
    Hi Daniil,

    Thanks, please close this topic.

Similar Threads

  1. Replies: 12
    Last Post: Apr 13, 2012, 4:59 PM
  2. [CLOSED] [1.0] CalendarPanel Question
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 22, 2011, 3:43 PM
  3. [CLOSED] [1.0] CalendarPanel
    By Timothy in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Apr 15, 2011, 11:40 AM
  4. [CLOSED] CalendarPanel : bold in the datepicker the days containing events
    By ddslogistics in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 04, 2011, 3:21 PM
  5. Replies: 15
    Last Post: Feb 03, 2011, 1:27 PM

Tags for this Thread

Posting Permissions