[CLOSED] ext:EventWindow: All fields in window

  1. #1

    [CLOSED] ext:EventWindow: All fields in window

    Hi

    I wish all fields in ext:EventWindow (location, notes, reminder)... itīs possible? Or I need create a new window?

    Thanks for any help.
    Last edited by Daniil; Apr 17, 2012 at 2:49 PM. Reason: [CLOSED]
  2. #2
    Hi,

    Please click the "Edit Details" link at the bottom on the left.

    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 v2 Example</title>
    
        <script type="text/javascript">
            var CompanyX = {
                getCalendar : function () {
                   return CompanyX.CalendarPanel1;
                },
    
                getWindow : function() {
                    return CompanyX.EventWindow1;
                },
    
                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);
                    },
    
                    edit : function (win, rec) {
                        win.hide();
                        rec.commit();
                        CompanyX.getCalendar().showEditForm(rec);
                    }
                }
            };
        </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">
                            <Events>
                                <ext:EventModel
                                    Title="My event" 
                                    StartDate="2012/4/15" 
                                    EndDate="2012/4/15" 
                                    CalendarId="1" />
                            </Events>
                        </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>
                            <DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
                            <EventClick  Fn="CompanyX.record.show" Scope="CompanyX" />
                        </Listeners>
                    </ext:CalendarPanel>
                </Items>
            </ext:Viewport>
            <ext:EventWindow 
                ID="EventWindow1" 
                runat="server" 
                Hidden="true" 
                CalendarStoreID="CalendarStore1">
                <Listeners>
                    <EditDetails Fn="CompanyX.record.edit" Scope="CompanyX" />
                </Listeners>
            </ext:EventWindow>
        </form>
    </body>
    </html>
  3. #3
    Yes, I had seen this detail window.

    But to have access to all fields, I have to open the Event Window and then click on 'Edit detail' to open Detail Window.

    It is precisely this second 'click' I want to avoid.

    People are funny ...
    one day are making all your processes on paper, with enormous redundancy in information.
    In one day after informatization, are fighting the most per unless clicks.

    The solution is make a new window? I would like maintain the incredible performance of EventWindow. It's possible with a completely javascript window?
  4. #4
    Agreed :)

    Well, I would override the Ext.calendar.form.EventWindow class.

    Please see the "CUSTOMIZATION" comment.

    It should help you to start.

    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 v2 Example</title>
    
        <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    
        <script type="text/javascript">
            Ext.calendar.form.EventWindow.override({
                constructor: function(config) {
                    var formPanelCfg = {
                        xtype: 'form',
                        fieldDefaults: {
                            msgTarget: 'side',
                            labelWidth: 65
                        },
                        frame: false,
                        bodyStyle: 'background:transparent;padding:5px 10px 10px;',
                        bodyBorder: false,
                        border: false,
                        items: [{
                            itemId: 'title',
                            name: Ext.calendar.data.EventMappings.Title.name,
                            fieldLabel: 'Title',
                            xtype: 'textfield',
                            anchor: '100%'
                        },
                        {
                            xtype: 'daterangefield',
                            itemId: 'date-range',
                            name: 'dates',
                            anchor: '100%',
                            fieldLabel: 'When'
                        }]
                    };
        
                    if (config.calendarStore) {
                        this.calendarStore = config.calendarStore;
                        delete config.calendarStore;
        
                        formPanelCfg.items.push({
                            xtype: 'calendarpicker',
                            itemId: 'calendar',
                            name: Ext.calendar.data.EventMappings.CalendarId.name,
                            anchor: '100%',
                            store: this.calendarStore
                        });
                    }
    
                    // CUSTOMIZATION
    
                    formPanelCfg.items.push({
                        itemId     : 'Location',
                        name       : Ext.calendar.data.EventMappings.Location.name,
                        fieldLabel : 'Location',
                        xtype      : 'textfield',
                        anchor     : '100%'
                    });
    
                    // END OF CUSTOMIZATION
        
                    this.callParent([Ext.apply({
                        titleTextAdd: 'Add Event',
                        titleTextEdit: 'Edit Event',
                        width: 600,
                        autocreate: true,
                        border: true,
                        closeAction: 'hide',
                        modal: false,
                        resizable: false,
                        buttonAlign: 'left',
                        savingMessage: 'Saving changes...',
                        deletingMessage: 'Deleting event...',
                        layout: 'fit',
        
                        fbar: [{
                            xtype: 'tbtext',
                            text: '<a href="#" id="tblink">Edit Details...</a>'
                        },
                        '->', {
                            text: 'Save',
                            disabled: false,
                            handler: this.onSave,
                            scope: this
                        },
                        {
                            itemId: 'delete-btn',
                            text: 'Delete',
                            disabled: false,
                            handler: this.onDelete,
                            scope: this,
                            hideMode: 'offsets'
                        },
                        {
                            text: 'Cancel',
                            disabled: false,
                            handler: this.onCancel,
                            scope: this
                        }],
                        items: formPanelCfg
                    },
                    config)]);
                }
            });
        </script>
    
        <script type="text/javascript">
            var CompanyX = {
                getCalendar : function () {
                   return CompanyX.CalendarPanel1;
                },
    
                getWindow : function() {
                    return CompanyX.EventWindow1;
                },
    
                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);
                    },
    
                    edit : function (win, rec) {
                        win.hide();
                        rec.commit();
                        CompanyX.getCalendar().showEditForm(rec);
                    }
                }
            };
        </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">
                            <Events>
                                <ext:EventModel
                                    Title="My event" 
                                    StartDate="2012/4/15" 
                                    EndDate="2012/4/15" 
                                    CalendarId="1"
                                    Location="Some Location" />
                            </Events>
                        </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" />
                                <ext:CalendarModel CalendarId="4" Title="Other" />
                            </Calendars>
                        </CalendarStore>
                        <Listeners>
                            <DayClick Fn="CompanyX.dayClick" Scope="CompanyX" />
                            <EventClick  Fn="CompanyX.record.show" Scope="CompanyX" />
                        </Listeners>
                    </ext:CalendarPanel>
                </Items>
            </ext:Viewport>
            <ext:EventWindow 
                ID="EventWindow1" 
                runat="server" 
                Hidden="true" 
                CalendarStoreID="CalendarStore1">
                <Listeners>
                    <EditDetails Fn="CompanyX.record.edit" Scope="CompanyX" />
                </Listeners>
            </ext:EventWindow>
        </form>
    </body>
    </html>
  5. #5
    Daniil!

    Works very Fine. It'll be fantastic ...

    Thanks a lot...
  6. #6

    Same for V1.5

    Hi Danill,
    Do you have any idea where i would find this override for Version 1.5.

    Thanks
    Fergus
  7. #7
    Quote Originally Posted by Fergus View Post
    Do you have any idea where i would find this override for Version 1.5.
    Hi Fergus,

    I would try this.

    Example
    <ext:EventEditWindow 
        ID="EventEditWindow1" 
        runat="server" 
        Hidden="true" 
        GroupStoreID="GroupStore1">
        <Listeners>
            <BeforeRender Fn="CompanyX.onEditWindowBeforeRender" />
        </Listeners>
    </ext:EventEditWindow>
    <script type="text/javascript">
        var CompanyX = {
            onEditWindowBeforeRender : function (win) {
                var formPanel = win.items.get(0);
    
                formPanel.add({
                    xtype : "textfield",
                    fieldLabel: 'Location',
                    name: Ext.calendar.EventMappings.Location.name,
                    anchor: '100%'
                });
            }
        };
    </script>
  8. #8
    Hi Daniil,
    Thanks for the example. i was able to add controls with this. But what i was hoping for was to override the whole edit event window like the V2 example above so i have control over the whole window like the button names etc.

    Thanks
  9. #9
    Then just copy this file:
    <Ext.Net sources root>\Ext.Net\Build\Ext.Net\ux\extensions\calendar\src\EventEditWindow.js
    to, for example, MyEventEditWindow.js and put into the page <head>:
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />
    <script type="text/javascript" src="MyEventEditWindow.js"></script>
    Now you can change anything you wish.

Similar Threads

  1. [CLOSED] ext:EventWindow: Localization
    By supera in forum 2.x Premium Help
    Replies: 9
    Last Post: Dec 02, 2014, 9:04 AM
  2. Replies: 6
    Last Post: Apr 18, 2012, 1:00 PM
  3. Replies: 2
    Last Post: Apr 16, 2012, 7:51 PM
  4. Replies: 4
    Last Post: Jun 30, 2011, 4:30 PM
  5. [CLOSED] Layout for fields
    By ppettigrew in forum 1.x Premium Help
    Replies: 1
    Last Post: Oct 13, 2010, 3:23 PM

Tags for this Thread

Posting Permissions