Although it's easy to add new fields to the fieldsPanel config, Buttons seem to be pre-configured - how do I add/remove buttons?
Is it a case of just doing something like?
Ext.apply(Sch.plugins.EventEditor, {
buttons:
...
Ext.apply(Sch.plugins.EventEditor, {
buttons:
...
fieldsPanelConfig : {
border : false,
layout : 'border',
items : [
{
layout : 'form',
region:'center',
style:'background:#fff',
border : false,
labelAlign : 'top',
defaults : {
width : 135
},
items : [
titleField = new Ext.form.TextField({
name : 'Title',
fieldLabel : 'Task'
}),
locationField = new Ext.form.TextField({
name : 'Location',
fieldLabel : 'Location'
})
]
},
{
border : false,
region : 'west',
width : 100,
layout: 'absolute',
buttonAlign : 'center',
items : [
{
xtype : 'box',
autoEl: {
tag: 'img',
src: 'images/unknown.gif'
},
x : 30,
y : 10
}
],
buttons : [
new Ext.Button({
text : 'Your button',
width: 50
})
]
}
]
}
editor = new Sch.plugins.EventEditor({
height : 200,
width : 270,
buttonAlign : 'left',
saveHandler : onSave,
saveHandlerScope : this,
cancelHandler : onCancel,
cancelHandlerScope : this,
...
});
function onCancel (formPanel, newStart, newEnd, record)
{
console.log('onCancel called');
eventStore.remove(record);
formPanel.collapse();
}
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());
}
});