Hello Mats,
I am facing tow challenges with scheduler event editor example.
1.When creating a event(using drag event) for the first time the task form opens. But when I try to modify the existing event by dragging across the timeline it wont show the task form. How do i enable the form even on editing the event?
2. When I add first event the form fields are blank. But when I try to add second event it populates the values of first event by default. How do I avoid it?
Support Forum
Last edited by praveen.shastri on Sun Nov 07, 2010 7:44 am, edited 1 time in total.
Ah, you want the editor to automatically popup after an event has been moved? Just listen to the 'drop' event and show the editor:
1.
2. That I cannot reproduce, can you post your complete code and I'll have a look
1.
initGridEvents : function() {
var g = this.grid;
g.on('eventcontextmenu', this.onEventContextMenu, this);
g.on('beforetooltipshow', this.beforeTooltipShow, this);
g.on('drop', function(g, rs) {
this.editor.show(rs[0]);
}, this);
},
Mats, Thanks a ton for quick reply. I am a newbie to ext-scheduler and ext-js. Started working on this from last week itself. So please forgive me if I ask many questions.
To reproduce second issue,
I have modified the editor form. I have added couple of more fields I dont know if the issue is because of that. The code pasted below also does a round trip to MS SQL database using struts technology.
Below is my code,
To reproduce second issue,
I have modified the editor form. I have added couple of more fields I dont know if the issue is because of that. The code pasted below also does a round trip to MS SQL database using struts technology.
Below is my code,
Ext.ns('App');
var resourceStore;
Ext.onReady(function() {
Ext.QuickTips.init();
if (typeof console === 'undefined') {
console = {
log : Ext.log,
error : Ext.log
};
}
App.Scheduler.init();
});
var eventStore;
App.Scheduler = {
// Bootstrap function
init : function() {
this.grid = this.createGrid();
this.initGridEvents();
this.initStoreEvents();
this.grid.render(Ext.getBody());
},
onEventContextMenu : function(g, rec, e) {
e.stopEvent();
if (!g.gCtx) {
g.gCtx = new Ext.menu.Menu({
items : [
{
id : 'context-delete',
text : 'Delete event',
iconCls : 'icon-delete'
}
]
});
g.gCtx.on('itemclick', function(item, e) {
alert("g.gCtx.rec id ---"+g.gCtx.rec.get("Id"));
switch (item.id) {
case 'context-delete':
Ext.Ajax.request
({
url:"deleteSchedule.do",
params:
{
id:g.gCtx.rec.get("Id")
},
success: function(objServerResponse)
{
}
});
g.eventStore.remove(g.gCtx.rec);
break;
default:
throw item.id + ' is not a valid menu action';
break;
}
}, this);
}
g.gCtx.rec = rec;
g.gCtx.showAt(e.getXY());
},
// Don't show tooltip if editor is visible
beforeTooltipShow : function(g, r) {
return this.editor.collapsed;
},
initStoreEvents : function() {
var g = this.grid;
g.eventStore.on('update', function (store, bookingRecord, operation) {
if (operation !== Ext.data.Record.EDIT) return;
// Simulate server delay 1.5 seconds
bookingRecord.commit.defer(1500, bookingRecord);
});
},
initGridEvents : function() {
var g = this.grid;
g.on('eventcontextmenu', this.onEventContextMenu, this);
g.on('beforetooltipshow', this.beforeTooltipShow, this);
g.on('drop', function(g, rs) {
this.editor.show(rs[0]);
}, this);
},
renderer : function (item, resourceRec, row, col, ds) {
var bookingStart = item.get('StartDate');
return {
headerText : bookingStart.format("G:i"),
footerText : item.get('Title') || ' '
};
},
createGrid : function() {
// Store holding all the resources
resourceStore = new Ext.data.JsonStore({
root : 'row',
sortInfo:{field: 'Id', direction: "ASC"},
idProperty : 'Id',
totalProperty : 'total',
proxy : new Ext.data.HttpProxy({
url : "LoadResourceData.do"
}),
fields : [
'Id',
'Name',
'Emp Id',
'Email',
'Designation',
'Sector',
'Skills',
'Education',
'Experience',
'Gender'
]
});
resourceStore.load(
{
params :
{
searchAll : "yes"
}
}
);
//paging for resource store
var _resourcePagingBar = new Ext.PagingToolbar(
{
pageSize : 10,
border :false,
id: '_resourceStorePagingBar',
store : resourceStore,
displayInfo : true,
displayMsg : 'Displaying Employee {0} - {1} of {2}',
emptyMsg : "Records not found"
});
// Store holding all the events
eventStore = new Ext.data.JsonStore({
sortInfo:{field: 'ResourceId', direction: "ASC"},
idProperty : 'Id',
proxy : new Ext.data.HttpProxy({
url : "LoadScheduleData.do"
}),
fields : [
{name: 'Id', type:'string'},
{name: 'ResourceId'},
{name: 'Title'},
{name: 'StartDate', type : 'date', dateFormat : 'Y-m-d'},
{name: 'EndDate', type : 'date', dateFormat : 'Y-m-d'},
'Location',
'Engagemnet',
'Description'
]
});
eventStore.load();
var start = new Date(2010, 4, 22, 6);
var g = new Sch.EditorSchedulerPanel({
width : 1000,
height:400,
clicksToEdit : 1,
columns : [
{header : 'Name', sortable:true, width:130, dataIndex : 'Name'},
{header : 'Emp Id', sortable:true, width:50, dataIndex : 'Emp Id'},
{header : 'Email', sortable:true,hidden:true,width:130, dataIndex : 'Email'},
{header : 'Designation', sortable:true, width:130, dataIndex : 'Designation'},
{header : 'Sector', sortable:true, width:130, dataIndex : 'Sector'},
{header : 'Skills', sortable:true,hidden:true, width:130, dataIndex : 'Skills'},
{header : 'Education', sortable:true,hidden:true, width:130, dataIndex : 'Education'},
{header : 'Exp', sortable:true, width:30, dataIndex : 'Experience'},
{header : 'Gender', sortable:true,hidden:true, width:130, dataIndex : 'Gender'}
],
// Setup view configuration
viewModel : {
start : start,
end : start.add(Date.HOUR, 12),
columnType : 'hourAndDay',
viewBehaviour : Sch.ViewBehaviour.HourView,
renderer : this.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,
tbar : [
_resourcePagingBar,
' ',
{
text: 'Search',
handler: onSearch,
scope : this
},
'-',
'->',
{
iconCls : 'icon-prev',
scale : 'medium',
handler : function() {
var start = g.getStart(), end=g.getEnd();
if (Ext.getCmp('span3').pressed) {
start = start.add(Date.WEEK, -6);
end = end.add(Date.WEEK, -6);
} else {
var days = Math.max(Date.getDurationInDays(start, end), 1);
start = start.add(Date.DAY, -days);
end = end.add(Date.DAY, -days);
}
g.setView(start, end);
}
},
{
id : 'span1',
pressed: true,
text: '1 Day',
enableToggle : true,
toggleGroup: 'span',
inputValue: 'red',
handler : function() {
var start = g.getStart();
start.clearTime();
start.setHours(6);
g.setView(start, start.add(Date.HOUR, 12), 'hourAndDay', Sch.ViewBehaviour.HourView, this.renderer);
}
},
{
id : 'span2',
enableToggle : true,
text: '1 week',
toggleGroup: 'span',
handler : function() {
g.setView(g.getStart(), g.getStart().add(Date.DAY, 7), 'dayAndWeeks', Sch.ViewBehaviour.DayView, this.renderer);
}
},
' ',
{
id : 'span3',
enableToggle : true,
text: '6 weeks',
toggleGroup: 'span',
handler : function() {
g.setView(g.getStart(), g.getStart().add(Date.DAY, 42), 'weekAndMonths', Sch.ViewBehaviour.MonthView, this.renderer);
}
},
{
xtype: 'tbspacer',
width:100
}
,
{
iconCls : 'icon-cleardatabase',
tooltip: 'Clear database',
scale : 'medium',
handler : function() {
g.eventStore.removeAll();
}
},
{
iconCls : 'icon-next',
scale : 'medium',
handler : function() {
var start = g.getStart(), end=g.getEnd();
if (Ext.getCmp('span3').pressed) {
start = start.add(Date.WEEK, 6);
end = end.add(Date.WEEK, 6);
} else {
var days = Math.max(Date.getDurationInDays(start, end), 1);
start = start.add(Date.DAY, days);
end = end.add(Date.DAY, days);
}
g.setView(start,end);
}
}
],
tooltipTpl : new Ext.XTemplate(
'<dl class="eventTip">',
'<dt class="icon-clock">Time</dt><dd>{[values.StartDate.format("Y-m-d")]}</dd>',
'<dt class="icon-task">Task</dt><dd>{Title}</dd>',
'<dt class="icon-earth">Location</dt><dd>{Location} </dd>',
'</dl>').compile(),
plugins : [
this.editor = new Sch.plugins.EventEditor({
height : 260,
width : 350,
buttonAlign : 'left',
saveHandler : this.onSave,
saveHandlerScope : this,
fieldsPanelConfig : {
layout : 'form',
style:'background:#fff',
border : false,
cls : 'editorpanel',
labelAlign : 'left',
defaults : {
width : 135
},
items : [
titleField = new Ext.form.TextField({
name : 'Title',
id:'title',
fieldLabel : 'Task',
allowBlank:false
}),
engagemnetField = new Ext.form.TextField({
name : 'Engagemnet',
fieldLabel : 'Engagemnet',
allowBlank:false
}),
descriptionField = new Ext.form.TextArea({
name : 'Description',
fieldLabel : 'Description'
}),
locationField = new Ext.form.TextField({
name : 'Location',
fieldLabel : 'Location'
})
]
},
listeners : {
expand : function() {
titleField.focus(true);
}
}
})
],
listeners : {
dragcreateend : {
fn : function(p, data, e) {
var newRec = new this.grid.eventStore.recordType({
// 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
}
},
trackMouseOver : false
});
return g;
},
onSave : function(formPanel, newStart, newEnd, record)
{
record.beginEdit();
formPanel.getForm().updateRecord(record);
record.set('StartDate', newStart);
record.set('EndDate', newEnd);
record.endEdit();
formPanel.collapse();
// Ext.Ajax.on("requestcomplete", RequestComplete);
// formPanel.getForm().submit
// ({
Ext.Ajax.request
({
url:"schedule.do",
params:
{
id:record.get("Id"),
resourceId:record.get("ResourceId"),
title:record.get("Title"),
location:record.get("Location"),
engagementType:record.get("Engagement"),
startDate:newStart,
description:record.get("Description"),
endDate:newEnd
},
success: function(objServerResponse)
{
eval("var resultSet = " +objServerResponse.responseText);
alert("server response cu---"+resultSet.id); // outputs whatever was returned from the server in an alert window
record.beginEdit();
formPanel.getForm().updateRecord(record);
record.set('Id',resultSet.id);
record.endEdit();
}
});
// });
}
};
var designationStore = new Ext.data.JsonStore({
root : 'params',
totalProperty : 'total',
proxy : new Ext.data.HttpProxy({
url : "getSearchParams.do?searchParamType="+FLD_DESIGNATION
}),
fields : ['id','name'],
autoLoad: true
});
var employeeCodeStore = new Ext.data.JsonStore({
root : 'params',
totalProperty : 'total',
proxy : new Ext.data.HttpProxy({
url : "getSearchParams.do?searchParamType="+FLD_EMPID
}),
fields : ['id','name'],
autoLoad: true
});
var sectorStore = new Ext.data.JsonStore({
root : 'params',
totalProperty : 'total',
proxy : new Ext.data.HttpProxy({
url : "getSearchParams.do?searchParamType="+FLD_SECTOR
}),
fields : ['id','name'],
autoLoad: true
});
getSearchForm = Ext.extend(Ext.form.FormPanel, {
constructor : function(_config)
{
_config = (_config == null) ? {} : _config;
Ext.apply(this, _config);
getSearchForm.superclass.constructor.call(this,
{
id : 'searchForm',
autoHeight: true,
labelWidth : 110,
bodyStyle:'padding:5px 5px 0',
id:'movieForm',
errorReader : new Ext.data.XmlReader({record : ""}, []),
items:
[{
xtype:'textfield',
fieldLabel : 'Employee Name',
name : "name",
id:'empName',
width: 350
},
{
xtype : 'combo',
fieldLabel : 'Employee Id',
id : 'empId',
typeAhead : true,
editable : false,
mode: 'remote',
triggerAction: 'all' ,
selectOnFocus : true,
emptyText :'Select Employee Code',
store: employeeCodeStore,
valueField :'id',
hiddenName : 'empId',
displayField :'name',
width: 350
},
{
xtype: 'multiselect',
fieldLabel: 'Designation',
id:'designation',
name: 'multiselect',
border:true,
width: 350,
height :50,
mode: 'remote',
store: designationStore,
valueField :'id',
displayField :'name',
name : "designation"
},
{
xtype : 'textarea',
id:'education',
fieldLabel : 'Education',
height: 60,
name : "eductaion",
width: 350
},
{
xtype : 'textarea',
id:'skillSet',
fieldLabel : 'Skill Set',
height: 60,
name : "skillSet",
width: 350
},
{
layout:'column',
border :false,
items:
[{
columnWidth:.23,
layout: 'form',
border :false,
items:
[{
xtype : 'label',
fieldLabel : 'Experience',
anchor:'100%'
}]
},
{
columnWidth:.35,
layout: 'form',
border :false,
items:
[{
xtype : 'textfield',
id : 'startExp',
width:40,
labelWidth:0,
fieldLabel : 'Start',
anchor:'96%',
name:"startExp"
}]
},
{
columnWidth:.35,
layout: 'form',
border :false,
items:
[{
xtype : 'textfield',
id:'endExp',
width:40,
fieldLabel : 'End' ,
anchor:'96%',
name : "endExp"
}]
}]
},
{
xtype: 'multiselect',
fieldLabel: 'Sector',
id : 'sector',
border:true,
width: 350,
height :80,
store: sectorStore,
valueField :'id',
hiddenName : 'id',
displayField :'name',
name :"sector"
},
{
xtype : 'combo',
fieldLabel : 'Gender',
id:'gender',
typeAhead : true,
editable : false,
mode: 'local',
triggerAction: 'all' ,
selectOnFocus : true,
listWidth : 385,
emptyText :'Select Gender',
store: genderTypeStore,
valueField :'dataFieldName',
hiddenName : 'gender',
displayField :'displayFieldName',
width: 350
},
{
xtype:'textfield',
fieldLabel : 'Location',
id : 'location',
width: 350,
name :"location"
},
{
xtype : 'datefield',
fieldLabel : 'Schedule Start',
id:'scheduleStartDate',
width: 350,
name : "scheduleStartDate"
},
{
xtype : 'datefield',
fieldLabel : 'Schedule End',
id:'scheduleEndDate',
width: 350,
name : "scheduleEndDate"
},
{
xtype: 'radiogroup',
fieldLabel: 'Schedule',
id :'schedule',
itemCls: 'x-check-group-alt',
columns: 3,
items:
[{boxLabel: 'Occupied', name: 'schedule',inputValue:'yes'},
{boxLabel: 'Not Occupied', name: 'schedule',inputValue:'no'},
{boxLabel: 'Both', name: 'schedule',inputValue:'all'}]
}]
})
}
});
onSearch = function()
{
var _form = new getSearchForm();
var _window = new Ext.Window({
title : 'Search',
width : 550,
resizable : true,
plain : true,
modal : true,
bodyStyle : 'padding:5px;',
buttonAlign : 'right',
layout:'fit',
items : _form,
buttons :
[{
text : 'Submit',
handler : function()
{
_window.setVisible(false);
/*if (_form.getForm().isValid())
{
//Ext.Ajax.on("requestcomplete", RequestCompleteWin, _window);
_window.setVisible(false);
}
_form.getForm().submit(
);*/
/* _window.setVisible(false);
//resourceStore.removeAll();
resourceStore.load(
{
params :
{
searchAll : "no"
empId : Ext.getCmp("empId").getValue(),
empName :Ext.getCmp("empName").getValue(),
designation : Ext.getCmp("designation").getValue(),
education: Ext.getCmp("education").getValue(),
skillSet: Ext.getCmp("skillSet").getValue(),
startExp: Ext.getCmp("startExp").getValue(),
endExp: Ext.getCmp("endExp").getValue(),
sector: Ext.getCmp("sector").getValue(),
gender: Ext.getCmp("gender").getValue(),
empLocation: Ext.getCmp("location").getValue(),
scheduleStartDate: Ext.getCmp("scheduleStartDate").getValue(),
scheduleEndDate: Ext.getCmp("scheduleEndDate").getValue(),
schedule: Ext.getCmp("schedule").getValue()
}
})*/
}
},
{
text : 'Reset',
handler : function()
{
_form.getForm().reset();
}
},
{
text : 'Cancel',
handler : function()
{
_window.close();
}
}]
});
_window.show();
}
Try setting some default values prior to showing the editor:
dragcreateend : {
fn : function(p, data, e) {
var newRec = new this.grid.eventStore.recordType({
Location : '',
Engagemnet : '',
Description : '',
ResourceId : data.record.get('Id'),
StartDate : data.startDate,
EndDate : data.endDate
});
this.grid.eventStore.add(newRec);
// Enter edit mode right away
this.editor.show(newRec);
},
scope : this
}
},