[CLOSED] [1.0] Custom EventEditWindow

  1. #1

    [CLOSED] [1.0] Custom EventEditWindow

    Hi,
    I have a problem in the customization of EventEditWindow. As box appears, I get a javascript error. Something wrong in configuration?

    Configuration markup:
    <ext:EventEditWindow ID="EventEditWindow1" runat="server" Hidden="true" GroupStoreID="GroupStore1"
            Namespace="MyNameSpace" RegisterAllResources="True">
            <Items>
                <ext:FormPanel ID="fpEdit" runat="server">
                    <Content>
                        <ext:TextField ID="title" runat="server" FieldLabel="Mytitle" DataIndex="Title" />
                        <ext:DateField ID="StartDate" runat="server" DataIndex="StartDate" />
                        <ext:DateField ID="EndDate" runat="server" DataIndex="EndDate" />
                        <ext:Checkbox ID="allday" runat="server" DataIndex="IsAllDay" />
                        <ext:ComboBox ID="calendar" runat="server" FieldLabel="categoria" DataIndex="CalendarId">
                            <Items>
                                <ext:ListItem Text="Home" Value="1" />
                                <ext:ListItem Text="Work" Value="2" />
                                <ext:ListItem Text="School" Value="3" />
                            </Items>
                        </ext:ComboBox>
                        <ext:TextField runat="server" FieldLabel="MyField" />
                    </Content>
                </ext:FormPanel>
            </Items>
            <Listeners>
                <EventAdd Fn="MyNameSpace.record.add" Scope="MyNameSpace" />
                <EventUpdate Fn="MyNameSpace.record.update" Scope="MyNameSpace" />
                <EditDetails Fn="MyNameSpace.record.edit" Scope="MyNameSpace" />
                <EventDelete Fn="MyNameSpace.record.remove" Scope="MyNameSpace" />
            </Listeners>
     </ext:EventEditWindow>
    This is the javascript error:

    Ext.getCmp("date-range") is undefined
        Ext.ns("Ext.calendar");(function(){Ext...darpanel",Ext.calendar.CalendarPanel);
    Last edited by Daniil; Nov 25, 2010 at 7:10 AM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi,

    This control doesn't support custom <Items>. At least, in markup.

    Changing a EventEditWindow's view should be done via js. The best time to do this is before rendering.
  3. #3
    Hi again,

    It can look something like this. See EventEditWindow's Render handler.

    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>
    
        <script type="text/javascript">
            var CompanyX = {
                getWindow : function() {
                    return CompanyX.EventEditWindow1;
                },
    
                dayClick : function(cal, dt, allDay, el) {
                    this.record.show.call(this, cal, {
                        StartDate: dt,
                        IsAllDay: allDay
                    }, el);
                },
    
                record : {
                    show: function(cal, rec, el) {
                        CompanyX.getWindow().show(rec, el);
                    }
                }
            };
        </script>
    </head>
    <body>
        <form runat="server">
        <ext:ResourceManager runat="server" Namespace="CompanyX" />
        <ext:Viewport runat="server" Layout="fit">
            <Items>
                <ext:CalendarPanel ID="CalendarPanel1" runat="server" Height="500">
                    <EventStore runat="server">
                        <Events>
                            <ext:Event Title="My event" StartDate="2010/10/13" EndDate="2010/10/13" />
                        </Events>
                    </EventStore>
                    <GroupStore ID="GroupStore1" runat="server">
                        <Groups>
                            <ext:Group CalendarId="1" Title="Home" />
                            <ext:Group CalendarId="2" Title="Work" />
                            <ext:Group CalendarId="3" Title="School" />
                            <ext:Group CalendarId="4" Title="Other" />
                        </Groups>
                    </GroupStore>
                    <Listeners>
                        <DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
                    </Listeners>
                </ext:CalendarPanel>
            </Items>
        </ext:Viewport>
        <ext:EventEditWindow 
            ID="EventEditWindow1" 
            runat="server" 
            Hidden="true" 
            GroupStoreID="GroupStore1">
            <Listeners>
                <Render Handler="   var titleItem = this.formPanel.get('title'),
                                        dateRangeItem = this.formPanel.get('date-range'),
                                        calendarItem = this.formPanel.get('calendar');
                                    titleItem.id = 'titleId'; 
                                    titleItem.fieldLabel = 'My Title';
                                    titleItem.dataIndex = 'Title'" />
            </Listeners>
        </ext:EventEditWindow>
        </form>
    </body>
    </html>
  4. #4
    How do i alter the information (text) that is displayed in the calendar above the day(s) of the event?

    The default is to show the title.. Can i show the text contained in two custom fields i've created in the edit event window concatenated?
  5. #5
    Hi Pablo,

    Unfortunately, there is no feature for event like Renderer in a GridPanel.

    To achieve your requirement, you need to override sources.

    1. Open calendar-all-debug.js
    2. Search "<div class="ext-cal-evi">" - an event's title is rendered into this <div>.
    3. You should be able to apply respective changes to achieve your requirement.
  6. #6
    Another solution can be event tooltip.
    http://forums.ext.net/showthread.php?13764
  7. #7
    I was thinking about hiding the title field, and before adding or updating the event altering the value of the title field to the value of the custom fields. Is it possible? I'm trying to do it by myself without success... Could you provide an example?
  8. #8
    Well, Store events API can help.
    http://dev.sencha.com/deploy/ext-3.3...Ext.data.Store

    I think you can use Add and Update event.

    To apply changes you, probably, will need to call .refresh() for the calendar view.

Similar Threads

  1. EventEditWindow of CalendarPanel
    By Rupesh in forum 1.x Help
    Replies: 10
    Last Post: Mar 20, 2012, 10:16 AM
  2. Help For EventEditWindow
    By Rupesh in forum 1.x Help
    Replies: 3
    Last Post: Mar 12, 2012, 8:44 AM
  3. Calendar eventeditwindow
    By Pritesh in forum 1.x Help
    Replies: 0
    Last Post: Mar 05, 2012, 11:11 AM
  4. [CLOSED] EventEditWindow Alignment is out
    By ppqrnd in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Dec 01, 2011, 8:19 AM
  5. EventEditWindow
    By mkkalkan in forum 1.x Help
    Replies: 1
    Last Post: Oct 13, 2011, 8:38 PM

Tags for this Thread

Posting Permissions