Support Forum
Not quite, still having trouble - can you please post the editor example without all the functions. I just can't seem to add the extra bits, since everything is encapsulated in the bootstrap function and other sub-function calls it's not clear where everything goes/or how to set certain values.
Thanks!
Thanks!
Here it is:
Ext.ns('App');
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'https://extjs.cachefly.net/ext-3.1.0/resources/images/default/s.gif';
Ext.QuickTips.init();
// Store holding all the resources
var resourceStore = new Ext.data.JsonStore({
sortInfo:{field: 'Id', direction: "ASC"},
idProperty : 'Id',
fields : [
'Id',
'Name',
'Type'
]
});
// Store holding all the events
var eventStore = new Ext.data.JsonStore({
sortInfo:{field: 'ResourceId', direction: "ASC"},
fields : [
{name: 'ResourceId'},
{name: 'Title'},
{name: 'StartDate', type : 'date'},
{name: 'EndDate', type : 'date'},
'Location'
]
});
var titleField = new Ext.form.TextField({
name : 'Title',
fieldLabel : 'Task'
}),
locationField = new Ext.form.TextField({
name : 'Location',
fieldLabel : 'Location'
}),
editor = new Sch.plugins.EventEditor({
height : 180,
width : 270,
buttonAlign : 'left',
saveHandler : onSave,
saveHandlerScope : this,
fieldsPanelConfig : {
layout : 'form',
style:'background:#fff',
border : false,
cls : 'editorpanel',
labelAlign : 'top',
defaults : {
width : 135
},
items : [
titleField,
locationField
]
},
listeners : {
expand : function() {
titleField.focus(true);
}
}
});
resourceStore.loadData([
{
Id : 'a',
Name : 'Rob',
Type : 'Sales'
},
{
Id : 'b',
Name : 'Mike',
Type : 'Sales'
},
{
Id : 'c',
Name : 'Kate',
Type : 'Product manager'
},
{
Id : 'd',
Name : 'Lisa',
Type : 'Developer'
},
{
Id : 'e',
Name : 'Dave',
Type : 'Developer'
},
{
Id : 'f',
Name : 'Arnold',
Type : 'Developer'
},
{
Id : 'g',
Name : 'Lee',
Type : 'Marketing'
},
{
Id : 'h',
Name : 'Jong',
Type : 'Marketing'
}
]);
function onSave (formPanel, newStart, newEnd, record) {
record.beginEdit();
formPanel.getForm().updateRecord(record);
record.set('StartDate', newStart);
record.set('EndDate', newEnd);
record.endEdit();
record.commit();
formPanel.collapse();
}
function renderer(item, resourceRec, row, col, ds) {
var bookingStart = item.get('StartDate');
return {
headerText : bookingStart.format("G:i"),
footerText : item.get('Title') || ' '
};
}
var start = new Date();
start.clearTime();
start.setHours(6);
var g = new Sch.EditorSchedulerPanel({
width : 1000,
height:400,
renderTo : Ext.getBody(),
clicksToEdit : 1,
columns : [
{header : 'Staff', sortable:true, width:130, dataIndex : 'Name', editor : new Ext.form.TextField()},
{header : 'Type', sortable:true, width:140, dataIndex : 'Type', editor : new Ext.form.ComboBox({
store: ['Sales', 'Developer', 'Marketing', 'Product manager'],
typeAhead: true,
forceSelection: true,
triggerAction: 'all',
selectOnFocus:true
})}
],
// Setup view configuration
viewModel : {
start : start,
end : start.add(Date.HOUR, 12),
columnType : 'hourAndDay',
viewBehaviour : Sch.ViewBehaviour.HourView,
renderer : renderer
},
// Specialized template with header and footer
eventTemplate : new Ext.Template(
'<div id="{id}" style="width:{width}px;left:{leftOffset}px" class="sch-event {cls}">' +
'<div class="sch-event-inner">' +
'<span class="sch-event-header">{headerText}</span>' +
'<div class="sch-event-footer">{footerText}</div>' +
'</div>' +
String.format(Sch.SchedulerPanel.prototype.resizeHandleHtml, 'east'),
'</div>').compile(),
viewConfig: {
forceFit:true
},
store : resourceStore,
eventStore : eventStore,
border : true,
plugins : [ editor ],
listeners : {
dragcreateend : {
fn : function(p, data, e) {
var newRec = new eventStore.recordType({
Title: 'New task',
ResourceId : data.record.get('Id'),
Location : 'Local office',
StartDate : data.startDate,
EndDate : data.endDate
});
eventStore.add(newRec);
// Enter edit mode right away
editor.show(newRec);
},
scope : this
}
},
trackMouseOver : false
});
});