PDA

View Full Version : Simple editable calendar from EditorGridPanel



Fallen Zen
16 Jul 2010, 2:43 AM
I need a simple calendar based on EditorGridPanel. The problem is how to generate appropriate view with months divided by days? Anyone has made something similar? Any ideas how to extend the Grid?

The idea is that users would be entering in appropriate cells number of hours they've spent on a project. Here's how it looks like in an Excel type file.
21482

fay
16 Jul 2010, 2:53 AM
http://www.sencha.com/forum/showthread.php?101372-E2CS-Event-Calendar-on-3x-(0.0.16)&p=488212#post488212

Fallen Zen
16 Jul 2010, 4:10 AM
Any ideas? Can someone point me in the right direction?

fay
16 Jul 2010, 4:32 AM
I've replied, but it's in "moderation". Search for "calendar" and select the thread entitled: "E2CS Event Calendar on 3x (0.0.16)"

Fallen Zen
16 Jul 2010, 4:39 AM
I've seen it, guess will have to test drive it.

Fallen Zen
21 Jul 2010, 1:41 AM
I've managed to get the result I wanted with Ext Scheduler, nevertheless I'm still having problems with editing the grid (Sch.EditorSchedulerPanel is based on EditorGridPanel). It only works on one column (first clicked). How can I force "timeCellEditor" to work on whole grid? Full code below and the current view.

http://img256.imageshack.us/img256/5751/grafikt.jpg



MyDesktop.TasksViewer = Ext.extend(Ext.app.Module, {
id:'viewer',
init : function(){
this.launcher = {
text: 'Podgl?d tasków',
iconCls:'icon-viewer',
handler : this.createWindow,
scope: this
}
},

createWindow : function(){

var timeCellEditor = new Ext.form.NumberField({allowNegative: false});

var start = new Date();
start.setDate(1);
start.clearTime();

var desktop = this.app.getDesktop();
var win = desktop.getWindow('tasksViewer');
if(!win){
win = desktop.createWindow({
id: 'taskViewer',
title:'Podgl?d tasków',
iconCls: 'icon-viewer',
shim:false,
animCollapse: false,
constrainHeader: true,
width: 1000,
height: 400,
layout: 'fit',
items: [
viewerGrid = new Sch.EditorSchedulerPanel({
resizeHandles : 'none',
enableEventDragDrop : false,
enableDragCreation : false,
clicksToEdit : 1,
tbar: [
{
iconCls: 'icon-prev',
scale: 'medium',
handler: function() {
var start = viewerGrid.getStart(), end = viewerGrid.getEnd();
start = start.add(Date.MONTH, -1);
end = end.add(Date.MONTH, -1);
viewerGrid.setView(start, end);
}
},
{
text: 'Poprzedni miesi?c',
handler: function() {
var start = viewerGrid.getStart(), end = viewerGrid.getEnd();
start = start.add(Date.MONTH, -1);
end = end.add(Date.MONTH, -1);
viewerGrid.setView(start, end);
}
},
'-',
{
id: 'viewerPrevious',
text: 'Bie??cy miesi?c',
iconCls: 'calendar-button',
handler: function() {
var start = new Date();
start.setDate(1);
start.clearTime();
var end = start.add(Date.MONTH, 1);
viewerGrid.setView(start, end);
}
},
'-',
{
text: 'Nast?pny miesi?c',
handler : function() {
var start = viewerGrid.getStart(), end = viewerGrid.getEnd();
start = start.add(Date.MONTH, +1);
end = end.add(Date.MONTH, +1);
viewerGrid.setView(start, end);
}
},
{
iconCls : 'icon-next',
scale : 'medium',
handler : function() {
var start = viewerGrid.getStart(), end = viewerGrid.getEnd();
start = start.add(Date.MONTH, +1);
end = end.add(Date.MONTH, +1);
viewerGrid.setView(start, end);
}
}
],
columns : [
{header : 'Producent', sortable:true, width:130, menuDisabled: true, dataIndex : 'producer'},
{header : 'Projekt', sortable:true, width:200, menuDisabled: true, dataIndex : 'project'},
{header : 'Opis', sortable:true, width:80, menuDisabled: true, dataIndex : 'task'},
{header : 'Data rozpocz?cia', xtype: 'datecolumn', format: 'Y-m-d', sortable:true, width:100, menuDisabled: true, dataIndex : 'start'},
{header : '%', sortable:true, width:40, menuDisabled: true, dataIndex : 'busy'},
{header : 'Stan', sortable:true, width:40, menuDisabled: true, dataIndex : 'status', renderer: function (value, meta, record, rowIndex, columnIndex, e) {if (value == true) {return '<div><img src="resources/images/viewer/true.png" /></div>';} else {return '<div><img src="resources/images/viewer/false.png" /></div>';}}},
{header : 'Kwota sugerowana', sortable:true, width:110, menuDisabled: true, dataIndex : 'amount1'},
{header : 'Kwota umówiona', sortable:true, width:100, menuDisabled: true, dataIndex : 'amount2'},
{header : 'Ilo?? dni bookingu', sortable:true, width:50, menuDisabled: true, dataIndex : 'days'}
],
// Setup view configuration
viewModel : {
start : start,
end : start.add(Date.MONTH, 1),
columnType : 'dayAndMonths'
},

timeColumnDefaults : {
editor : timeCellEditor,
width: 25
},

viewConfig: {
//forceFit:true
},

internalRenderer : function(v, m, rec, row, col, ds, events, grid) {
var cellResult = 0,
viewStart = grid.getStart(),
viewEnd = grid.getEnd(),
colWidth = grid.getColumnModel().getColumnWidth(col),
c = this;

// Iterate events (belonging to current row) passed by the schedulerview
events.each(function(event) {
var start = event.get('StartDate'),
end = event.get('EndDate'),
startsInsideCell = start.betweenLesser(c.start, c.end);

// Determine if the event should be rendered or not
if (startsInsideCell) {
cellResult = event.get('Hours');
}
}, this);

m.css += ' sch-timetd';

return cellResult > 0 ? cellResult : '';
},

store : viewerStore,
eventStore : viewerEventStore,
border : true,
trackMouseOver : false
})
]
});
}
win.show();
}
});

var viewerData = [
[1, 'Producent 1', 'Projekt 1', 'Opis 1', '2011-01-31', 20, true, 1000, '20', '1'],
[2, 'Producent 2', 'Projekt 2', 'Opis 2', '2011-01-31', 60, false, 2000, '10', '2'],
[3, 'Producent 3', 'Projekt 3', 'Opis 3', '2011-01-31', 50, true, 3000, '50', '5'],
[4, 'Producent 4', 'Projekt 4', 'Opis 4', '2011-01-31', 40, false, 500, '5', '5']
];

var viewerStore = new Ext.data.Store({
sortInfo:{field: 'Id', direction: "ASC"},
reader: new Ext.data.ArrayReader({idProperty : 'Id'}, [
// Mandatory fields
{name: 'Id'},
{name: 'producer'},
{name: 'project'},
{name: 'task'},
{name: 'start', type : 'date', dateFormat: 'Y-m-d'},
{name: 'busy', type: 'float'},
{name: 'status', type: 'bool'},
{name: 'amount1', type: 'float'},
{name: 'amount2', type: 'float'},
{name: 'days', type: 'float'}
]
),
listeners: {
update: function(store, record, type){
store.commitChanges();
}
},
data: viewerData
});

var viewerEventStore = new Ext.data.JsonStore({
sortInfo:{field: 'ResourceId', direction: "ASC"},
fields : [
{name: 'ResourceId'},
{name: 'Hours'},
{name: 'StartDate', type : 'date'},
{name: 'EndDate', type : 'date'}
]
});

var viewerCurrentDate = new Date();
viewerCurrentDate.setDate(1);
viewerCurrentDate.clearTime();
viewerEventStore.loadData([
{Id : 'e1', ResourceId: 1, Hours: 1, StartDate: viewerCurrentDate, EndDate: viewerCurrentDate.add(Date.HOUR, 24)},
{Id : 'e2', ResourceId: 2, Hours: 5, StartDate: viewerCurrentDate.add(Date.HOUR, 24), EndDate: viewerCurrentDate.add(Date.HOUR, 48)},
{Id : 'e3', ResourceId: 1, Hours: 8, StartDate: viewerCurrentDate.add(Date.HOUR, 24), EndDate: viewerCurrentDate.add(Date.HOUR, 48)}
]);

viewerStore.on('exception', function() {
console.log('resourceStore load exception');
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
});

viewerEventStore.on('exception', function() {
console.log('eventStore load exception');
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
});

Fallen Zen
21 Jul 2010, 4:44 AM
How should I modify my code (or maybe EditorGridPanel config) so there would be only one editor for the whole grid? Or maybe I should define somehow every day column?

Fallen Zen
21 Jul 2010, 6:29 AM
Any clue guys?

mankz
24 Oct 2010, 12:23 AM
Did you manage to solve your problem?