Event Window Date field does not show or commit date value

  1. #1

    Event Window Date field does not show or commit date value

    Good evening everybody, I hope you are all doing great.

    I have just moved to 2.x so here is an issue with the (dreadful) calendar. I have followed Daniil's example http://forums.ext.net/showthread.php...l=1#post107464 which works okay. Besides the string fields I have also added a DateTime field (Test3). The problem is the date value is not displayed in the event window even though it exists in the json data:

    Example page:
    <%@ Page Language="C#"%>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
       
    <script runat="server">
        class MyEventModel : EventModel
        {
            public string Test1 { get; set; }
            public string Test2 { get; set; }
            public DateTime Test3 { get; set; }
        }
           
        protected void Page_Load(object sender, EventArgs e)
        {
            Model model = this.CalendarPanel1.EventStore.ModelInstance;
            model.Fields.Add(new ModelField("Test1"));
            model.Fields.Add(new ModelField("Test2"));
            model.Fields.Add(new ModelField("Test3"));
     
            this.CalendarPanel1.EventStore.Model.Add(model);
       
            if (!X.IsAjaxRequest)
            {
                EventStore store = this.CalendarPanel1.EventStore;
                store.Events.AddRange(new List<MyEventModel>
                {
                    new MyEventModel()
                    {
                        Title = "My event",
                        CalendarId = 1,
                        StartDate =  DateTime.Now,
                        EndDate =  DateTime.Now.AddDays(1),
                        EventId = 1,
                        Test1 = "I'm the first",
                        Test2 = "I'm the second",
                        Test3 = DateTime.Now.AddDays(2)
                    }
                });
            }
        }
      
        protected void EventStore_SubmitData(object sender, StoreSubmitDataEventArgs e)
        {
            MyEventModel[] events = JSON.Deserialize<MyEventModel[]>(e.Json);
            X.Msg.Alert("Submitted", JSON.Serialize(events)).Show();
        }
    </script>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Ext.NET v2 Example</title>
          
        <script type="text/javascript" src="/resources/js/EventMappings.js"></script>
        <script type="text/javascript" src="/resources/js/EventWindow.js"></script>
        <script type="text/javascript" src="/resources/js/common.js"></script>
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="CompanyX" />
     
            <ext:Viewport ID="Viewport1" runat="server" Layout="FitLayout">
                <Items>
                    <ext:CalendarPanel ID="CalendarPanel1" runat="server">
                        <EventStore ID="EventStore1" runat="server" OnSubmitData="EventStore_SubmitData">
                            <Listeners>  
                                <BeforeSync Handler="return false;" />
                            </Listeners>
                        </EventStore>
                        <CalendarStore ID="CalendarStore1" runat="server">
                            <Calendars>
                                <ext:CalendarModel CalendarId="1" Title="Home" />
                                <ext:CalendarModel CalendarId="2" Title="Work" />
                                <ext:CalendarModel CalendarId="3" Title="School" />
                            </Calendars>
                        </CalendarStore>
                        <Listeners>
                            <EventClick Fn="CompanyX.record.show" Scope="CompanyX" />
                            <DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
                        </Listeners>
                        <Buttons>
                            <ext:Button ID="Button1" runat="server" Text="Submit" Handler="CompanyX.record.saveAll()" />
                        </Buttons>
                    </ext:CalendarPanel>
                </Items>
            </ext:Viewport>
     
            <ext:EventWindow
                ID="EventWindow1"
                runat="server"
                Hidden="true"
                CalendarStoreID="CalendarStore1">
                <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" />
                </Listeners>
            </ext:EventWindow>
        </form>
    </body>
    </html>
    EventMappings.js:
    Ext.apply(Ext.calendar.data.EventMappings, {
        Test1: {
            name: 'Test1',
            mapping: 'test1',
            type: 'string'
        },
        Test2: {
            name: 'Test2',
            mapping: 'test2',
            type: 'string'
        },
        Test3: {
            name: 'Test3',
            mapping: 'test3',
            type: 'date'
        }
    });
    
    //needs to reconfigure EventModel
    Ext.calendar.data.EventModel.reconfigure();
    EventWindow.js:
    Ext.calendar.form.EventWindow.override({
        constructor: function (config) {
            this.callParent(arguments);
    
            var form = this.child("form");
    
            form.add([{
                itemId: 'test1',
                name: Ext.calendar.data.EventMappings.Test1.name,
                fieldLabel: 'Test1',
                xtype: 'textfield',
                anchor: '100%'
            }, {
                itemId: 'test2',
                name: Ext.calendar.data.EventMappings.Test2.name,
                fieldLabel: 'Test2',
                xtype: 'textfield',
                anchor: '100%'
            }, {
                itemId: 'test3',
                name: Ext.calendar.data.EventMappings.Test3.name,
                fieldLabel: 'Test3',
                xtype: 'datefield',
                format: 'n/j/Y'
            }]);
        }
    });
    common.js:
    var CompanyX = {
        getStore: function () {
            return CompanyX.EventStore1;
        },
    
        getWindow: function () {
            return CompanyX.EventWindow1;
        },
    
        dayClick: function (cal, dt, allDay, el) {
            this.record.show.call(this, cal, {
                StartDate: dt,
                IsAllDay: allDay
            }, el);
        },
    
        record: {
            add: function (win, rec) {
                win.hide();
                CompanyX.getStore().add(rec);
                CompanyX.getStore().sync();
            },
    
            update: function (win, rec) {
                win.hide();
                rec.commit();
                CompanyX.getStore().sync();
            },
    
            remove: function (win, rec) {
                CompanyX.getStore().remove(rec);
                CompanyX.getStore().sync();
                win.hide();
            },
    
            edit: function (win, rec) {
                win.hide();
                rec.commit();
                CompanyX.getCalendar().showEditForm(rec);
            },
    
            show: function (cal, rec, el) {
                CompanyX.getWindow().show(rec, el);
            },
    
            saveAll: function () {
                CompanyX.getStore().submitData({
                    mappings: false
                });
            }
        }
    };
    If I modify this line as follows:
    model.Fields.Add(new ModelField("Test3", ModelFieldType.Date));
    then the date value is displayed correctly in the event window but when edited and committed it is set to null.

    Any idea?
  2. #2

    SOLVED

    I finally figured it out myself.

    FYI, the Test3 field must be declared as follows:

        
    Test3: {
            name: 'Test3',
            mapping: 'test3',
            type: 'date',
            dateFormat: 'c'
    }
    and the field in EventWindow.js must explicitly set the submitFormat as follows:

    {
                itemId: 'test3',
                name: Ext.calendar.data.EventMappings.Test3.name,
                fieldLabel: 'Test3',
                xtype: 'datefield',
                format: 'n/j/Y',
                submitFormat: 'c'
    }
    Please mark as SOLVED.

Similar Threads

  1. [CLOSED] Date Picker show special date
    By trePjt in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Dec 06, 2013, 12:12 AM
  2. Replies: 2
    Last Post: Apr 23, 2012, 12:47 PM
  3. Replies: 4
    Last Post: Jun 30, 2011, 3:30 PM
  4. [CLOSED] Displaying Todays date in Date field
    By Vasudhaika in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Feb 22, 2011, 10:38 AM
  5. [CLOSED] How to Set Date Format in a Coolite Date Field
    By speedstepmem3 in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Dec 02, 2010, 8:47 AM

Tags for this Thread

Posting Permissions