[CLOSED] Calendar Panel - Does not show Customised Event window on some machines

  1. #1

    [CLOSED] Calendar Panel - Does not show Customised Event window on some machines

    I have Ext.Net 4.2 Version.

    I have customised Calendar Panel Event window. This works fine on most of the clients. But displays original Event window on some client PC's with IE9.

    Here, I would like to mention that, some clients with same version of IE9 it works great! We have compared all browser related options on working and non working clients.

    Following is the code to customise the EventWindow

    <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'//,
                            //hidden: true
    }]
                        };
    
                        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,
                                hidden: true
                            });
                        }
    
                        // CUSTOMIZATION
    
                        // 1. Adds one more standard field.
                        formPanelCfg.items.push({
                            itemId: 'Location',
                            name: Ext.calendar.data.EventMappings.Location.name,
                            fieldLabel: 'Location',
                            xtype: 'textfield',
                            anchor: '100%',
                            hidden: true
                        });
    
                        // 2. Add Customised fields
                        formPanelCfg.items.push({
                            itemId: 'EmployeeId',
                            name: Ext.calendar.data.EventMappings.EmployeeId.name,
                            fieldLabel: 'Employee',
                            xtype: 'textfield',
                            anchor: '100%',
                            hidden: true
                        });
    
                        formPanelCfg.items.push({
                            itemId: 'ProjectId',
                            name: Ext.calendar.data.EventMappings.ProjectId.name,
                            fieldLabel: 'Project',
                            xtype: 'combobox',
                            anchor: '100%',
                            dataIndex: 'ProjectId',
                            valueField: 'ProjectId',
                            displayField: 'Code',
                            store: 'projectStore',
                            columnWidth: .5,
                            anchor: '100%',
                            selectOnFocus: true,
                            typeAhead: true
                        });
    
                        formPanelCfg.items.push({
                            xtype: 'fieldcontainer',
                            layout: 'column',
                            items: [
                            { itemId: 'DepartmentId',
                                name: Ext.calendar.data.EventMappings.DepartmentId.name,
                                fieldLabel: 'Department',
                                xtype: 'combobox',
                                dataIndex: 'DepartmentId',
                                valueField: 'DepartmentId',
                                displayField: 'Name',
                                store: 'departmentStore',
                                columnWidth: .5,
                                anchor: '100%',
                                selectOnFocus: true,
                                typeAhead: true,
                                listeners: {
                                    scope: CompanyX,
                                    'select': CompanyX.selectDepartment
                                }
                            },
                            {
                                itemId: 'SectionId',
                                name: Ext.calendar.data.EventMappings.SectionId.name,
                                fieldLabel: 'Section',
                                xtype: 'combobox',
                                columnWidth: .49,
                                dataIndex: 'SectionId',
                                valueField: 'SectionId',
                                displayField: 'Code',
                                store: 'sectionStore',
                                columnWidth: .49,
                                anchor: '100%',
                                selectOnFocus: true,
                                typeAhead: true
                                //forceSelection: true,
                                //pageSize: 10,
                                //minChars: 1,
                                //matchFieldWidth: false
                                //disabled: true
                            },
                            {
                                xtype: 'button',
                                //text: 'Help',
                                disabled: false,
                                handler: CompanyX.showSectionHelp,
                                scope: CompanyX,
                                iconCls: 'icon-help'
    }]
                            });
    
    
    
                            // 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>',
                                    hidden: true
                                },
                        '->', {
                            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>
    Screen shot that is generated on some non-working machines is as follows


    Screen shot on working machines
    Attached Thumbnails Click image for larger version. 

Name:	CalendarError.jpg 
Views:	136 
Size:	91.0 KB 
ID:	11351   Click image for larger version. 

Name:	Calendar.jpg 
Views:	131 
Size:	91.7 KB 
ID:	11361  
    Last edited by Daniil; May 23, 2014 at 5:15 AM. Reason: [CLOSED]
  2. #2
    Hi @Arohan,

    Please put an alert call here:
    Ext.calendar.form.EventWindow.override({
        constructor: function(config) {
            alert("Ext.calendar.form.EventWindow constructor");
            ...
    Does an alert box appear on a machine where it doesn't work?

    By the way, please ensure the compatibility mode is switched off.
  3. #3
    Issue is resolved by setting compatibility mode off. Please mark this thread as closed.

    Thanks for your timely help.
  4. #4
    Here is a related thread.
    http://forums.ext.net/showthread.php?38261

Similar Threads

  1. [CLOSED] Customizing Edit Event Details Window of Calendar.
    By Suntico in forum 2.x Legacy Premium Help
    Replies: 5
    Last Post: Apr 19, 2013, 5:34 AM
  2. [CLOSED] Calendar: Is it possible to set 2 weeks view to show the event?
    By csssi_coolite in forum 2.x Legacy Premium Help
    Replies: 3
    Last Post: May 14, 2012, 7:54 AM
  3. [CLOSED] [1.0] Calendar - hide/disable buttons in event edit window
    By ljankowski in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Oct 08, 2010, 12:21 PM
  4. [CLOSED] Problems with Customised Grid Panel (0.8.3) Headers
    By vedagopal2004 in forum 1.x Legacy Premium Help
    Replies: 9
    Last Post: Aug 30, 2010, 1:06 PM
  5. Replies: 12
    Last Post: Feb 26, 2010, 4:51 AM

Posting Permissions