I am working on the example 'grouping'.I import this to the center region of border layout and i also add a date picker.But am not able to set the function in handler of date picker to work with the scheduler.
var g = new Sch.SchedulerPanel({
height : 700,
stripeRows : true,
enabledHdMenu : false,
loadMask : { store : eventStore},
selModel : new Sch.EventSelectionModel({ multiSelect : true }),
startDate : new Date(2011, 4, 1),
endDate : new Date(2011, 5, 12),
viewPreset : 'weekAndMonth',
rowHeight : 26,
eventRenderer : this.renderer,
columns : [
{header : 'Rooms', sortable:true, width:140, dataIndex : 'Name'},
{header : 'Type', sortable:true, width:140, dataIndex : 'Type'},
{width:100, dataIndex : 'Category'}
],
view: new Sch.SchedulerGroupingView({
showSummaryInHeader : true,
showGroupName : false,
hideGroupedColumn : true,
barMargin : 3
}),
resourceStore : resourceStore,
eventStore : eventStore,
border : true,
................
eventStore.load();
new Ext.Viewport({
layout: 'border',
renderTo: 'calendar-ct',
items: [{
id: 'app-header',
region: 'north',
height: 35,
border: false
},{
id: 'app-center',
title: 'Event Scheduler',
region: 'center',
layout: 'border',
listeners: {
'afterrender': function(){
Ext.getCmp('app-center').header.addClass('app-center-header');
}
},
items: [{
id:'app-west',
region: 'west',
width: 190,
border: false,
items: [
{
xtype: 'datepicker',
id: 'app-nav-picker',
cls: 'ext-cal-nav-picker',
listeners: {
'select': {
fn: function(dp, dt){
/*App.shedulerPanel.setStartDate(dt);*/
},
scope: this
}
}
}]
},{
region: 'center',
items:[
g
]
}]
}]
});
},
// Default renderer, supplies data to be applied to the event template
renderer : function (event, r, tplData, row, col, ds) {
tplData.cls = r.get('Category');
// Add data to be applied to the event template
return event.get('StartDate').format('Y-m-d');
},
}}();