PDA

View Full Version : [CLOSED] Calendar Panel - Customise Event Window to disable End Date and All Day Check box



Arohan
Jun 12, 2014, 7:23 AM
Is it possible to disable To Date and All Day Check Box in EventWindow shown below ? If yes, can you please provide me the sample code

http://forums.ext.net/attachment.php?attachmentid=12601&stc=1

Here, I would like to mention that I have used following code to override the eventwindow.


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,
forceSelection: true,
minChars: 1,
tpl: new Ext.XTemplate("<tpl for='.'><tpl if='[xindex] == 1'><table class='cbStates-list'><tr><th>Code</th><th>Name</th></tr></tpl><tr class='x-boundlist-item'><td>{Code}</td><td>{Name}</td></tr><tpl if='[xcount-xindex]==0'></table></tpl></tpl>")
// listConfig: {
// getInnerTpl: function() {
// return '<div data-qtip="{Name}">{Code} ({Name})</div>';
// }
// }
});

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,
forceSelection: true,
minChars: 1,
tpl: new Ext.XTemplate("<tpl for='.'><tpl if='[xindex] == 1'><table class='cbStates-list'><tr><th>Code</th><th>Name</th></tr></tpl><tr class='x-boundlist-item'><td>{Code}</td><td>{Name}</td></tr><tpl if='[xcount-xindex]==0'></table></tpl></tpl>"),
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,
minChars: 4,
tpl: new Ext.XTemplate("<tpl for='.'><tpl if='[xindex] == 1'><table class='cbStates-list'><tr><th>Code</th><th>Name</th></tr></tpl><tr class='x-boundlist-item'><td>{Code}</td><td>{Name}</td></tr><tpl if='[xcount-xindex]==0'></table></tpl></tpl>"),
// listConfig: {
// getInnerTpl: function() {
// return '<div data-qtip="{Name}">{Code} ({Name})</div>';
// }
// },
forceSelection: true
//pageSize: 10
//minChars: 1,
//matchFieldWidth: false
//disabled: true
},
{
xtype: 'button',
//text: 'Help',
disabled: false,
handler: CompanyX.showSectionHelp,
scope: CompanyX,
iconCls: 'icon-help'
}]
});

formPanelCfg.items.push({
xtype: 'fieldcontainer',
layout: 'column',
items: [
{ itemId: 'SubSectionId',
name: Ext.calendar.data.EventMappings.SubSectionId.name,
fieldLabel: 'Sub-Section',
xtype: 'combobox',
dataIndex: 'SubSectionId',
valueField: 'SubSectionId',
displayField: 'Name',
store: 'subsectionStore',
columnWidth: .5,
anchor: '100%',
selectOnFocus: true,
typeAhead: true,
forceSelection: true,
minChars: 1,
tpl: new Ext.XTemplate("<tpl for='.'><tpl if='[xindex] == 1'><table class='cbStates-list'><tr><th>Code</th><th>Name</th></tr></tpl><tr class='x-boundlist-item'><td>{Code}</td><td>{Name}</td></tr><tpl if='[xcount-xindex]==0'></table></tpl></tpl>")
},
{ itemId: 'StageId',
name: Ext.calendar.data.EventMappings.StageId.name,
fieldLabel: 'Stage',
xtype: 'combobox',
dataIndex: 'StageId',
valueField: 'StageId',
displayField: 'Name',
store: 'stageStore',
columnWidth: .5,
anchor: '100%',
selectOnFocus: true,
typeAhead: true,
forceSelection: true,
minChars: 1,
tpl: new Ext.XTemplate("<tpl for='.'><tpl if='[xindex] == 1'><table class='cbStates-list'><tr><th>Code</th><th>Name</th></tr></tpl><tr class='x-boundlist-item'><td>{Code}</td><td>{Name}</td></tr><tpl if='[xcount-xindex]==0'></table></tpl></tpl>")
}]
});

// 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)]);
}
});

Thanks & BR,
PRASAD

Daniil
Jun 12, 2014, 2:36 PM
Hi @Arohan,

Those fields are inside a DateRangeField. You should override it to exclude those fields.

Arohan
Jun 13, 2014, 12:27 PM
I have added following code to override the DateRange in Calendar. It works great.



Ext.calendar.form.field.DateRange.override({
getStartTimeConfig: function() {
return {
xtype: 'timefield',
itemId: this.id + '-start-time',
hidden: this.showTimes === false,
labelWidth: 0,
hideLabel: true,
width: 90,
format: this.timeFormat,
//format: "G:i", //added
minValue: "9:00", //added
maxValue: "18:00", //added
listeners: {
'select': {
fn: function() {
this.onFieldChange('time', 'start');
},
scope: this
}
}
};
}
});


I have one more query though. I want to set minValue and maxValue for the timefield from database settings. How can I achieve this ?

Daniil
Jun 13, 2014, 2:43 PM
You can render those setting to a client, for example, as an EventWindow's CustomConfig. Then apply it to the respective fields in your JavaScript overrides.

Arohan
Jun 14, 2014, 6:08 AM
Can you please given an example?

Daniil
Jun 14, 2014, 9:04 AM
Unfortunately, we don't have such an example.