The buttons aren't configurable actually. But the whole EventEditor class is only about 200 lines of JS code, so it'd be very easy for you to use it as a base for an editor of your own. What kind of buttons are you looking for?
I'm using the eval version and so have not been able to look at the Editor code. I wanted to add an extra button below the image place holder (see attch). Could I build a more advanced form in the fieldsPanel config?
Yes definitely, there are no limits to what you can create in your eventEditor. The image actually isn't a placeholder, it's just a css background. Are you trying to have an input field selecting the user photo?
Hmm, would you select a photo from a list or should the user be able to upload their picture? This is all doable but would require a little extra work I think.
What is the name of the handler for the Cancel button that comes as part of the Editor implementation - e.g. you can specify a save handler, but when you click Cancel it has the same affect as Save right now...I tried to guess and added something called cancelHandler but it doesn't work
That's not supported. If you'd like to modify the editor, I'd suggest you create a new class that behaves the way you want it. Here is the full source of the editor class, it should be super easy for you to create your own using it as your base
Ext.ns('Sch.plugins');
/**
* @class Sch.plugins.EventEditor
* @extends Ext.FormPanel
* A FormPanel used to edit scheduled events
* @constructor
* Create a new instance of this plugin
* @param {Object} config The configuration options
*/
Sch.plugins.EventEditor = Ext.extend(Ext.FormPanel, {
/**
* @cfg {String} saveText The text to show on the save button
*/
saveText : 'Save',
/**
* @cfg {String} cancelText The text to show on the cancel button
*/
cancelText : 'Cancel',
/**
* @cfg {String} hoursText The text to show after the hour spinner field
*/
hoursText : 'hrs',
/**
* @cfg {Object} hideOnBlur True to hide this panel if a click is detected outside the panel
*/
hideOnBlur : true,
/**
* @cfg {Object} timeConfig Config for the TimeField constructor.
*/
timeConfig : {
allowBlank:false,
editable : false,
forceSelection : true
},
/**
* @cfg {String} fieldsPanel Panel representing your data that is associated with a scheduler event
*
* Example:
*
* <pre><code>
fieldsPanel : {
layout : 'form',
style:'background:#fff',
border : false,
cls : 'editorpanel',
labelAlign : 'top',
defaults : {
width : 135
},
items : [
titleField = new Ext.form.TextField({
name : 'Title',
fieldLabel : 'Task'
}),
locationField = new Ext.form.TextField({
name : 'Location',
fieldLabel : 'Location'
})
]
}
* </pre></code>
*
*/
fieldsPanel : null,
/**
* @cfg {String} dateFormat This config parameter is passed to the TimeField constructor.
*/
dateFormat:'Y-m-d',
/**
* @cfg {String} timeFormat This config parameter is passed to the TimeField constructor.
*/
timeFormat:'H:i',
/*
* Expands the editor
* @param {Record} eventRecord The record to show in the editor panel
*/
show : function(eventRecord) {
this.eventRecord = eventRecord;
// Manually set the duration field value
var duration = Date.getDurationInHours(eventRecord.get('StartDate'), eventRecord.get('EndDate'));
this.durationField.setValue(duration);
// Load form panel fields
this.getForm().loadRecord(eventRecord);
var eventEl = this.grid.getElementFromEventRecord(eventRecord);
this.el.anchorTo(eventEl, 'bl', this.getConstrainOffsets(eventEl));
this.expand();
},
// TODO implement support for constraining the editor panel to the viewport
getConstrainOffsets : function(eventEl) {
return [0, 0];
},
cls : 'sch-eventeditor',
layout : 'border',
border : false,
initComponent : function() {
if (!this.fieldsPanelConfig) throw 'Must define a fieldsPanelConfig property';
if (this.hideOnBlur) {
// Hide when clicking outside panel
this.mon(Ext.getBody(), 'click', function(e){
if (!this.collapsed && !e.within(this.getEl()) && !Ext.fly(e.getTarget()).is('.x-combo-list-item')) {
this.collapse(false);
}
}, this);
}
// Collapse after render, otherwise rendering is messed up
this.on('render', this.collapse, this);
this.fieldsPanelConfig.region = 'center';
Ext.apply(this, {
buttons : [
{
text : this.saveText,
scope : this,
handler : function() {
if (this.getForm().isValid()) {
var start = this.startDateField.getValue(),
hours = this.durationField.getValue();
if (start && hours) {
end = start.add(Date.MINUTE, hours * 60);
}
this.saveHandler.call(this.saveHandlerScope || this, this, start, end, this.eventRecord);
}
}
},
{
text : this.cancelText,
scope : this,
handler : this.collapse
}
],
items : [{
region : 'north',
layout : 'absolute',
height :35,
border : false,
cls : 'sch-eventeditor-timefields',
items : [
this.startDateField = new Ext.ux.form.DateTime({
name : 'StartDate',
x:10,
y:7,
width:160,
timeFormat:this.timeFormat,
timeWidth : 60,
timeConfig: this.timeConfig,
dateFormat:this.dateFormat,
dateConfig: {
allowBlank:false
}
}),
this.durationField = new Ext.ux.form.SpinnerField({
x:180,
y:7,
width:55,
allowBlank:false
}),
new Ext.form.Label({
y:7,
x:240,
xtype : 'label',
text : this.hoursText
})
]
},
this.fieldsPanelConfig]
});
Sch.plugins.EventEditor.superclass.initComponent.call(this);
},
init : function(grid) {
grid.on('eventdblclick', this.onEventDblClick, this);
grid.on('render', this.onGridRender, this);
grid.on('beforedestroy', function() {
grid.un('eventdblclick', this.onEventDblClick, this);
});
this.grid = grid;
},
onEventDblClick : function(g, evtRecord) {
this.show(evtRecord);
},
onGridRender : function() {
this.render(Ext.getBody());
}
});