CustomField on EventEditWindow, how to pass CustomStore

  1. #1

    CustomField on EventEditWindow, how to pass CustomStore

    Dear Sir,

    I applied code from solution http://forums.ext.net/showthread.php?21830 by Mimisss.

    I have an idea to add CustomField to EventEditWindow 3-4 fields and hide 'Edit details' link. Because some default field in EventDetailWindow unnecessary for my project. Please see the attached picture.

    Click image for larger version. 

Name:	calendar_eventeditwindow_customfield.jpg 
Views:	52 
Size:	83.5 KB 
ID:	5674

    I don't know how to pass CustomStore to customWindow, CustomField does not show any text.

    Could you please advice, Thank you.

    <%@ Page Culture="en-IN" Language="C#" AutoEventWireup="true" CodeBehind="mycalendar.aspx.cs" Inherits="KRIS.mycalendar" %>
    
    <%@ 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 id="Head1" runat="server">  
        <title>Ext.Net Full Custom and Local Calendar</title> 
        <style type="text/css">
            .ext-color-4,
            .ext-ie .ext-color-4-ad,
            .ext-opera .ext-color-4-ad {
                color: #663300;
            }
            .ext-cal-day-col .ext-color-4,
            .ext-dd-drag-proxy .ext-color-4,
            .ext-color-4-ad,
            .ext-color-4-ad .ext-cal-evm,
            .ext-color-4 .ext-cal-picker-icon,
            .ext-color-4-x dl,
            .ext-color-4-x .ext-cal-evb {
                background: #663300;
            }
            .ext-color-4-x .ext-cal-evb,
            .ext-color-4-x dl {
                border-color: #7C3939;
            }          
        </style>
        
        <ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="ScriptFiles" />
          
        <script src="MyEventRecord.js" type="text/javascript"></script>
        
        <script type="text/javascript">
            var CompanyX = {
                getCalendar: function() { return CompanyX.CalendarPanel1; },
                getStore: function() { return CompanyX.EventStore1; },
                getWindow: function() { return CompanyX.EventEditWindow1; },
                customWindow: function() {
                    // event edit window localization 
                    var win = this.getWindow();
                    var form = win.formPanel;
                    var titleItem = form.get('title');
                    dateRangeItem = form.get('date-range');
                    calendarItem = form.get('calendar');
                    detailsLnk = win.fbar.get(0);
                    saveBtn = win.fbar.get(2);
                    deleteBtn = win.fbar.get(3);
                    cancelBtn = win.fbar.get(4);
                    titleItem.fieldLabel = 'Title'; // Title  
                    dateRangeItem.fieldLabel = 'When';   // When
                    dateRangeItem.toText = 'To';       // to
                    dateRangeItem.allDayText = 'Is all day';  // Is all day
                    calendarItem.fieldLabel = 'Job';  // Calendar group
                    detailsLnk.text = '<a href="#" id="tblink"></a>';    // Edit Details (hide link)
                    saveBtn.text = 'Save';        // Save button
                    deleteBtn.text = 'Delete';        // Delete button
                    cancelBtn.text = 'Cancel';       // Cancel button
    
                    var cmb = new Ext.form.ComboBox({
                        id: 'ComboBox1',
                        fieldLabel: 'CustomField',
    /*                    store: store, // !!! error, I dont' know how to send CustomerStore to customWindow
                        dataIndex: 'MyCustomField1', 
                        mode: 'local',
                        displayField: 'lastname', 
                        valueField: 'id',   */
                        anchor: '90%',
                        triggerAction: 'all',
                        selectOnFocus: true,
                        typeAhead: true
                    });
    
                    form.add(cmb);
    
                    // date-range date format
                    win.get(0).get(1).on('render', function() {
                        this.startDate.format = 'd-m-Y';
                        this.endDate.format = 'd-m-Y';
                        this.startTime.format = 'H:i';
                        this.endTime.format = 'H:i';
    
                        var localTimes = [];            //  sample: your localized time values for the comboboxes
                        for (var h = 0; h < 24; h++) {
                            for (var m = 0; m < 60; m += 15) {
                                var hh = (h < 10) ? '0' + h : h;
                                var mm = (m < 15) ? '0' + m : m;
                                var hm = hh + ':' + mm;
                                localTimes.push(hm);
                            }
                        };
                        this.startTime.getStore().removeAll();         // empty combobox
                        this.startTime.getStore().loadData(localTimes);   // load your localized time values                    
                        this.endTime.getStore().removeAll();         // empty combobox
                        this.endTime.getStore().loadData(localTimes);   // load your localized time values
                    });
                },
                viewChange: function(p, vw, dateInfo) {
                    var win = this.getWindow();
    
                    if (win) {
                        win.hide();
                    }
    
                    if (dateInfo !== null) {
                        // will be null when switching to the event edit form, so ignore
                        var msg = '';
                        if (dateInfo.viewStart.clearTime().getTime() == dateInfo.viewEnd.clearTime().getTime()) {
                            msg = dateInfo.viewStart.format('F j, Y').toString();
                        } else if (dateInfo.viewStart.getFullYear() == dateInfo.viewEnd.getFullYear()) {
                            if (dateInfo.viewStart.getMonth() == dateInfo.viewEnd.getMonth()) {
                                msg = dateInfo.viewStart.format('F j').toString() + ' - ' + dateInfo.viewEnd.format('j, Y').toString();
                            } else {
                                msg = dateInfo.viewStart.format('F j').toString() + ' - ' + dateInfo.viewEnd.format('F j, Y').toString();
                            }
                        } else {
                            msg = dateInfo.viewStart.format('F j, Y').toString() + ' - ' + dateInfo.viewEnd.format('F j, Y').toString();
                        }
                        this.CalendarPanel1.setTitle(msg);
                    }
                },
                setStartDate: function(picker, date) {
                    this.getCalendar().setStartDate(date);
                },
                rangeSelect: function(cal, dates, callback) {
                    this.record.show(cal, dates);
                    this.getWindow().on('hide', callback, cal, { single: true });
                },
                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;
                        // save the event to database and update the event store
                        CompanyX.record.save(rec);
                        CompanyX.ShowMsg('Event ' + rec.data.Title + ' was added');
                    },
                    update: function(win, rec) {
                        win.hide();
                        rec.commit();
                        // update the event in the database
                        CompanyX.record.upd(rec);
                        CompanyX.ShowMsg('Event ' + rec.data.Title + ' was updated');
                    },
                    remove: function(win, rec) {
                        this.getStore().remove(rec);
                        win.hide();
                        // remove the event from the database
                        CompanyX.record.del(rec);
                        CompanyX.ShowMsg('Event ' + rec.data.Title + ' was deleted');
                    },
                    editFormAdd: function(win, rec) {
                        // called from the eventeditform EventAdd
                        // save the event to database and update the event store
                        rec.commit(); // added by Aod47
                        CompanyX.record.save(rec);
                    },
                    editFormUpdate: function(win, rec) {
                        // called from the eventeditform EventUpdate
                        // update the event in the database
                        rec.commit(); // added by Aod47
                        CompanyX.record.upd(rec);
                    },
                    editFormDelete: function(win, rec) {
                        // called from the eventeditform EventDelete
                        // delete the event from database
                        rec.commit(); // added by Aod47
                        CompanyX.record.del(rec);
                    },
                    edit: function(win, rec) {
                        win.hide();
                        CompanyX.getCalendar().showEditForm(rec);
                    },
                    resize: function(cal, rec) {
                        rec.commit();
                        CompanyX.record.upd(rec); // added by Aod47 save record change to database
                        CompanyX.ShowMsg('resize Event ' + rec.data.Title + ' was updated');
                    },
                    move: function(cal, rec) {
                        rec.commit();
                        CompanyX.record.upd(rec); // added by Aod47 save record change to database
                        CompanyX.ShowMsg('move Event ' + rec.data.Title + ' was moved to ' + rec.data.StartDate.format('F jS' + (rec.data.IsAllDay ? '' : ' \\a\\t g:i a')));
                    },
                    show: function(cal, rec, el) {
                        CompanyX.getWindow().show(rec, el);
                    },
                    save: function(rec) {
                        // save the event data to database                   
                        Ext.net.DirectMethod.request({
                            url: "RemoteService3.asmx/Save",
                            json: true,
                            cleanRequest: true,
                            params: {
                                e: rec.data
                            },
                            success: function(result) {
                                // update record with db-assigned id                  
                                rec.data.EventId = result.EventId;
                                // add to store
                                CompanyX.getStore().add(rec);
                            }
                        });
                    },
                    upd: function(rec) {
                        // update event data in the database
                        // event data row is found in the database using EventId                    
                        Ext.net.DirectEvent.request({
                            url: "RemoteService3.asmx/Update",
                            json: true,
                            cleanRequest: true,
                            extraParams: { e: rec.data }
                        });
                    },
                    del: function(rec) {
                        Ext.net.DirectEvent.request({
                            url: "RemoteService3.asmx/Delete",
                            json: true,
                            cleanRequest: true,
                            extraParams: { e: rec.data }
                        });
                    }
                }
            };
    
            var calendar_beforeRender = function(calendar, store) {        
                // localize event edit form
                var form = calendar.get(calendar.id + '-edit');
                form.titleTextAdd = 'form title when add';         // form title when add
                form.titleTextEdit = 'form title when edit';    // form title when edit
                form.layout = "form";                           // form layout
     
                // left col
                var lcol = form.get('left-col');
                lcol.get(0).fieldLabel = 'Title';   // Title
                dateRangeItem = lcol.get(1);
                dateRangeItem.fieldLabel = 'When';       // When
                dateRangeItem.toText = 'to';       // to
                dateRangeItem.allDayText = 'Is all day';  // Is all day
     
                // date-range date format
                dateRangeItem.on('render', function () {
                    this.startDate.format = 'd-m-Y';
                    this.endDate.format = 'd-m-Y';
                    this.startTime.format = 'H:i';
                    this.endTime.format = 'H:i';
    
                    var localTimes = [];            //  sample: your localized time values for the comboboxes
                    for (var h = 0; h < 24; h++) {
                        for (var m = 0; m < 60; m += 15) {
                            var hh = (h < 10) ? '0' + h : h;
                            var mm = (m < 15) ? '0' + m : m;
                            var hm = hh + ':' + mm;
                            localTimes.push(hm);
                        }
                    };
                    this.startTime.getStore().removeAll();         // empty combobox
                    this.startTime.getStore().loadData(localTimes);   // load your localized time values                    
                    this.endTime.getStore().removeAll();         // empty combobox
                    this.endTime.getStore().loadData(localTimes);   // load your localized time values
                });
                
    
                lcol.get(2).fieldLabel = 'Job';       // Calendar group
                lcol.get(3).fieldLabel = 'Reminder';  // Reminder
     
                // right col
                var rcol = form.get('right-col');
                rcol.get(0).fieldLabel = 'Notes';  // Notes
                rcol.get(1).fieldLabel = 'Location';       // Location
                rcol.get(2).fieldLabel = 'Url';        // Url
     
                // footer
                form.fbar.get(0).text = 'Save';   // Save
                form.fbar.get(1).text = 'Delete';     // Delete
                form.fbar.get(2).text = 'Cancel';        // Cancel
     
                // add new fields           
                // here a data-bound combo is added to the form
                // The "customStore" store is decleared in markup  and databound in code behind
                var cmb = new Ext.form.ComboBox({
                    id: 'ComboBox1',
                    fieldLabel: 'CustomField',
                    store: store,
                    dataIndex: 'MyCustomField1',
                    mode: 'local',
                    displayField: 'lastname',
                    valueField: 'id',
                    anchor: '90%',
                    triggerAction: 'all',
                    selectOnFocus: true,
                    typeAhead: true
                });
     
                lcol.add(cmb);
            };
        </script>
    </head>
    <body>  
        <form id="Form1" runat="server">  
            <ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="CompanyX" Locale="en-IN" />  
              
            <ext:Store ID="CustomStore" runat="server">
                <Reader>
                    <ext:JsonReader IDProperty="id">
                        <Fields>
                            <ext:RecordField Name="id" Type="Int" />
                            <ext:RecordField Name="lastname" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
              
            <ext:Viewport ID="Viewport1" runat="server" Layout="fit">      
                <Items>       
                    <ext:CalendarPanel ID="CalendarPanel1" runat="server" BodyBorder="false" Title="..." >              
                        <EventStore ID="EventStore1"
                                    runat="server"
                                    IgnoreExtraFields="false">                                
                        </EventStore>              
                        <GroupStore ID="GroupStore1" runat="server">                  
                            <Groups>                      
                            <ext:Group CalendarId="1" Title="Job 1" />                      
                            <ext:Group CalendarId="2" Title="Job 2" />                      
                            <ext:Group CalendarId="3" Title="Job 3" />                      
                            <ext:Group CalendarId="4" Title="Job 4" />
                            </Groups>              
                        </GroupStore>              
                        <Listeners>             
                            <ViewChange Fn="CompanyX.viewChange" Scope="CompanyX" /> 
                            <EventClick Fn="CompanyX.record.show" Scope="CompanyX" />                  
                            <DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />                  
                            <RangeSelect Fn="CompanyX.rangeSelect" Scope="CompanyX" />                  
                            <EventMove Fn="CompanyX.record.move" Scope="CompanyX" />                  
                            <EventResize Fn="CompanyX.record.resize" Scope="CompanyX" />                  
                            <BeforeRender Handler="calendar_beforeRender(this, #{CustomStore});" />
                            <EventAdd Fn="CompanyX.record.editFormAdd" Scope="CompanyX" />
                            <EventUpdate Fn="CompanyX.record.editFormUpdate" Scope="CompanyX" />
                            <EventDelete Fn="CompanyX.record.editFormDelete" Scope="CompanyX" />
                        </Listeners>     
                        <MonthView ID="MonthView1" 
                                    runat="server" 
                                    ShowHeader="true" 
                                    ShowWeekLinks="true" 
                                    ShowWeekNumbers="true"
                                    />                      
                        </ext:CalendarPanel>      
                    </Items>  
                </ext:Viewport>  
                  
                <ext:EventEditWindow      
                    ID="EventEditWindow1"      
                    runat="server"      
                    Hidden="true"      
                    GroupStoreID="GroupStore1"
                    TitleTextAdd="New Event"
                    TitleTextEdit="Edit Event">      
                    <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" /> 
                        <Render Fn="CompanyX.customWindow" Scope="CompanyX" />                    
                    </Listeners>  
                </ext:EventEditWindow>  
      
        </form>
        </body>
    </html>
    Last edited by Aod47; Feb 21, 2013 at 12:58 AM.

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. EventEditWindow is not defined
    By threewonders in forum 1.x Help
    Replies: 2
    Last Post: Mar 05, 2012, 9:16 AM
  4. EventEditWindow
    By mkkalkan in forum 1.x Help
    Replies: 1
    Last Post: Oct 13, 2011, 8:38 PM
  5. [CLOSED] How to add Custom RemoteValidation with my CustomField
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 13
    Last Post: Sep 16, 2010, 1:26 PM

Tags for this Thread

Posting Permissions