PDA

View Full Version : [CLOSED] Calendar Panel - Does not show Customised Event window on some machines



Arohan
May 22, 2014, 7:48 AM
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
http://forums.ext.net/attachment.php?attachmentid=11351&stc=1

Screen shot on working machines
http://forums.ext.net/attachment.php?attachmentid=11361&stc=1

Daniil
May 22, 2014, 10:31 AM
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.

Arohan
May 23, 2014, 5:00 AM
Issue is resolved by setting compatibility mode off. Please mark this thread as closed.

Thanks for your timely help.

Daniil
Jun 26, 2014, 1:08 PM
Here is a related thread.
http://forums.ext.net/showthread.php?38261