[CLOSED] Calendar Add new Field (link)

  1. #1

    [CLOSED] Calendar Add new Field (link)

    Hello

    I want to add custom field "xtype:Link" to a calendar, I want the new field be available on both window and form.

    I looked at this below link, but i couldn't quite figure out how to add a xtype of "Link" to the window and form.

    http://forums.ext.net/showthread.php...-EventEditForm

    Please provide me with an example.

    Thanks
    Last edited by geoffrey.mcgill; Jan 26, 2012 at 5:25 AM. Reason: [CLOSED]
  2. #2
    Hi,

    Here you are.

    Example
    <%@ Page Language="C#" %>
     
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
     
    <script runat="server">
        class MyEvent : Event
        {
            public string Link { get; set; }
        }
         
        protected void Page_Load(object sender, EventArgs e)
        {
            this.CalendarPanel1.EventStore.AddStandardFields();
            this.CalendarPanel1.EventStore.Reader[0].Fields.Add(new RecordField("Link"));
     
     
            if (!X.IsAjaxRequest)
            {
                Store store = this.CalendarPanel1.EventStore;
                store.DataSource = new List<object> 
                { 
                    new MyEvent()
                    { 
                        Title = "My event",
                        CalendarId = 1,
                        StartDate =  DateTime.Now,
                        EndDate =  DateTime.Now.AddDays(1),
                        EventId = 1,
                        Link = "Some link",
                    }
                };
                store.DataBind();
            }
        }
    </script>
     
    <!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 = {
                getCalendar : function () {
                    return CompanyX.CalendarPanel1;
                },
     
                getStore : function () {
                    return CompanyX.EventStore1;
                },
     
                getWindow : function () {
                    return CompanyX.EventEditWindow1;
                },
     
                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;
                        CompanyX.getStore().add(rec);
                    },
     
                    update : function (win, rec) {
                        win.hide();
                        rec.commit();
                    },
     
                    remove : function (win, rec) {
                        this.getStore().remove(rec);
                        win.hide();
                    },
     
                    edit : function (win, rec) {
                        win.hide();
                        CompanyX.getCalendar().showEditForm(rec);
                    },
     
                    show : function (cal, rec, el) {
                        CompanyX.getWindow().show(rec, el);
                    },
     
                    saveAll : function () {
                        CompanyX.getStore().submitData();
                    }
                }
            };        
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" Namespace="CompanyX" />
            <ext:Viewport runat="server" Layout="FitLayout">
                <Items>
                    <ext:CalendarPanel ID="CalendarPanel1" runat="server">
                        <EventStore ID="EventStore1" runat="server" />
                        <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>
                            <EventClick Fn="CompanyX.record.show" Scope="CompanyX" />
                            <DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
                            <BeforeRender Handler="var form = this.get(this.id + '-edit');
                                                   form.get('left-col').add({id: 'TextFieldLink1', fieldLabel: 'Link', xtype:'textfield', dataIndex: 'Link'});" />
                        </Listeners>
                    </ext:CalendarPanel>
                </Items>
            </ext:Viewport>
            <ext:EventEditWindow
                ID="EventEditWindow1"
                runat="server"
                Hidden="true"
                GroupStoreID="GroupStore1">
                <Listeners>
                    <EventAdd Fn="CompanyX.record.add" Scope="CompanyX" />
                    <EventUpdate Fn="CompanyX.record.update" Scope="CompanyX" />
                    <EditDetails Fn="CompanyX.record.edit" Scope="CompanyX" />
                    <EventDelete Fn="CompanyX.record.remove" Scope="CompanyX" />
                    <BeforeRender Handler="this.items.get(0).add({id: 'TextFieldLink2', fieldLabel: 'Link', xtype:'textfield', dataIndex: 'Link'});" />
                </Listeners>
            </ext:EventEditWindow>
        </form>
    </body>
    </html>
  3. #3
    You should also override the EventRecord:
    http://forums.ext.net/showthread.php...ll=1#post77166

Similar Threads

  1. Replies: 4
    Last Post: May 23, 2012, 1:38 PM
  2. Replies: 0
    Last Post: Jan 13, 2012, 2:33 PM
  3. link
    By Pfuentes in forum 1.x Help
    Replies: 0
    Last Post: Sep 12, 2011, 5:28 PM
  4. Replies: 2
    Last Post: Aug 19, 2011, 1:36 PM
  5. Replies: 9
    Last Post: Apr 12, 2011, 3:13 PM

Tags for this Thread

Posting Permissions