Jun 12, 2014, 6:23 AM
[CLOSED] Calendar Panel - Customise Event Window to disable End Date and All Day Check box
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
Here, I would like to mention that I have used following code to override the eventwindow.
PRASAD
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
Last edited by Daniil; Jun 20, 2014 at 4:37 AM.
Reason: [CLOSED]