Hi struggling with the Sch.EditorSchedulerPanel component. The example that ships with the eval pack is far too complex and cannot just be dropped into my existing code. The example in the API docs does not work at all. Can you please supply a simple example, that isn't encapsulated in tons of functions, with local store data that could just be pasted into a page and works.
Thanks.
Support Forum
Docs have been updated, thanks for pointing out the error. Below is a very basic implementation of the EditorSchedulerPanel, let me know how it goes!
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'https://extjs.cachefly.net/ext-3.1.0/resources/images/default/s.gif';
Ext.QuickTips.init();
var today = new Date();
today.clearTime();
var staffStore = new Ext.data.JsonStore({
sortInfo:{field: 'Name', direction: "ASC"},
idProperty : 'Id',
fields : [
{name: 'Id'}, // Mandatory field
{name: 'Name'}
],
});
// Store holding all the events
var eventStore = new Ext.data.JsonStore({
fields : [
{name: 'ResourceId'}, // Mandatory field
{name: 'StartDate', type : 'date'}, // Mandatory field
{name: 'EndDate', type : 'date'}, // Mandatory field
{name: 'Title'}
]
});
staffStore.loadData([
{Id : 'r1', Name : 'Mike'},
{Id : 'r2', Name : 'Linda'},
{Id : 'r3', Name : 'Don'},
{Id : 'r4', Name : 'Karen'},
{Id : 'r5', Name : 'Doug'},
{Id : 'r6', Name : 'Peter'}
]);
eventStore.loadData([
{ResourceId: 'r1', Title : 'Assignment 1', StartDate : today.add(Date.WEEK, 1), EndDate : today.add(Date.WEEK, 3)},
{ResourceId: 'r2', Title : 'Assignment 1', StartDate : today.add(Date.WEEK, 1), EndDate : today.add(Date.WEEK, 2)},
{ResourceId: 'r3', Title : 'Assignment 2', StartDate : today.add(Date.WEEK, 3), EndDate : today.add(Date.WEEK, 4)},
{ResourceId: 'r4', Title : 'Assignment 2', StartDate : today.add(Date.WEEK, 1), EndDate : today.add(Date.WEEK, 5)},
{ResourceId: 'r5', Title : 'Assignment 3', StartDate : today.add(Date.WEEK, 4), EndDate : today.add(Date.WEEK, 8)},
{ResourceId: 'r6', Title : 'Assignment 3', StartDate : today.add(Date.WEEK, 4), EndDate : today.add(Date.WEEK, 8)}
]);
var g = new Sch.EditorSchedulerPanel({
height:200,
width: 400,
renderTo : Ext.getBody(),
// Setup static columns
columns : [
{header : 'Staff', sortable:true, width:120, dataIndex : 'Name', editor : new Ext.form.TextField()}
],
viewConfig : { forceFit:true },
store : staffStore, // Mandatory property
eventStore : eventStore, // Mandatory property
// Setup your view configuration
viewModel : {
start : today,
end : today.add(Date.MONTH, 3),
columnType : 'month'
}
});
});
When adding an Event Editor plugin everything breaks, I have a BorderLayout, with a CardLayout Panel in the Central region, the EditorSchedulePanel is an item of that Panel.
The only error in firebug is:
c is null
[Break on this error] var _0xd396=["\x43\x2E\x31\x49\x28\x27...396[3][_0xd396[2]](_0xd396[1]),0,{}));
The diagnostic tool says everything is okay. Here's some code:
Any ideas? There's not much detail in the documentation for the Plugin...
The only error in firebug is:
c is null
[Break on this error] var _0xd396=["\x43\x2E\x31\x49\x28\x27...396[3][_0xd396[2]](_0xd396[1]),0,{}));
The diagnostic tool says everything is okay. Here's some code:
Ext.QuickTips.init();
var today = new Date();
today.clearTime();
var staffStore = new Ext.data.JsonStore({
sortInfo:{field: 'Name', direction: "ASC"},
idProperty : 'Id',
fields : [
{name: 'Id'}, // Mandatory field
{name: 'Name'}
],
});
// Store holding all the events
var eventStore = new Ext.data.JsonStore({
fields : [
{name: 'ResourceId'}, // Mandatory field
{name: 'StartDate', type : 'date'}, // Mandatory field
{name: 'EndDate', type : 'date'}, // Mandatory field
{name: 'Title'}
]
});
staffStore.loadData([
{Id : 'r1', Name : 'Mike'},
{Id : 'r2', Name : 'Linda'},
{Id : 'r3', Name : 'Don'},
{Id : 'r4', Name : 'Karen'},
{Id : 'r5', Name : 'Doug'},
{Id : 'r6', Name : 'Peter'}
]);
eventStore.loadData([
{ResourceId: 'r1', Title : 'Assignment 1', StartDate : today.add(Date.WEEK, 1), EndDate : today.add(Date.WEEK, 3)},
{ResourceId: 'r2', Title : 'Assignment 1', StartDate : today.add(Date.WEEK, 1), EndDate : today.add(Date.WEEK, 2)},
{ResourceId: 'r3', Title : 'Assignment 2', StartDate : today.add(Date.WEEK, 3), EndDate : today.add(Date.WEEK, 4)},
{ResourceId: 'r4', Title : 'Assignment 2', StartDate : today.add(Date.WEEK, 1), EndDate : today.add(Date.WEEK, 5)},
{ResourceId: 'r5', Title : 'Assignment 3', StartDate : today.add(Date.WEEK, 4), EndDate : today.add(Date.WEEK, 8)},
{ResourceId: 'r6', Title : 'Assignment 3', StartDate : today.add(Date.WEEK, 4), EndDate : today.add(Date.WEEK, 8)}
]);
var x = new Sch.EditorSchedulerPanel({
height:200,
autoWidth:true,
//renderTo : Ext.getBody(),
// Setup static columns
columns : [
{header : 'Staff', sortable:true, width:120, dataIndex : 'Name', editor : new Ext.form.TextField()}
],
viewConfig : { forceFit:true },
store : staffStore, // Mandatory property
eventStore : eventStore, // Mandatory property
// Specialized template with header and footer
tooltipTpl : new Ext.XTemplate(
'<dl class="eventTip">',
'<dt class="icon-clock">Time</dt><dd>{[values.StartDate.format("Y-m-d G:i")]}</dd>',
'<dt class="icon-task">Task</dt><dd>{Title}</dd>',
'</dl>').compile(),
listeners : {
dragcreateend : {
fn : function(p, data, e) {
var newRec = new this.grid.eventStore.recordType({
Id : nextId(),
Title: 'New task',
ResourceId : data.record.get('Id'),
Location : 'Local office',
StartDate : data.startDate,
EndDate : data.endDate
});
this.grid.eventStore.add(newRec);
// Enter edit mode right away
this.editor.show(newRec);
},
scope : this
}
},
plugins : [
this.editor = new Sch.plugins.EventEditor({
height : 180,
width : 270,
buttonAlign : 'left',
//saveHandler : this.onSave,
//saveHandlerScope : this,
fieldsPanelConfig : {
layout : 'form',
style:'background:#fff',
border : false,
cls : 'editorpanel',
labelAlign : 'top',
defaults : {
width : 135
},
items : [
titleField = new Ext.form.TextField({
name : 'Title',
fieldLabel : 'Task'
}),
]
},
listeners : {
expand : function() {
titleField.focus(true);
}
}
})
],
// Setup your view configuration
viewModel : {
start : today,
end : today.add(Date.MONTH, 3),
columnType : 'month',
renderer : function (event, r, row, col, ds) {
// Add data to be applied to the event template
return {
text : event.get('Title'),
//cls : (event.get('EndDate') - event.get('StartDate')) === 0 ? 'sch-event-milestone-bottom' : 'normalEvent'
}
}
}
});
Hi, managed to find the culprit:
My app is far to large to paste here, but commenting out that line worked - the problem is there was a very good reason for that line of code as the position of the qtip is pretty important in some of my forms. Can you suggest a workaround?
Thanks!
Ext.form.Field.prototype.msgTarget="side";
Thanks!
Yes, if you remove the editor plugin everything works fine, apart from the fact that you can't edit a task! It breaks because all the layout of panels etc. is messed up and any subsequent scripts halt at the error. I couldn't find the implementation of your plugin on the API docs, but I am guessing it is dependent somehow on the position of qtip?