/* * Ext Scheduler v1.5 beta * Copyright(c) 2009-2010 Mats Bryntse Consulting * mats@ext-scheduler.com * http://www.ext-scheduler.com/license.html * */ Ext.ns('Sch'); /** * @class Sch.EditorSchedulerPanel * @extends Ext.grid.EditorGridPanel *

This class represents the primary interface of a component based grid control to represent events * in a timeline format of rows and columns. Additionally this component can have editable cells, just like a normal EditorGridPanel. * The EditorSchedulerPanel is composed of the following:

*
*

Example usage:

* 

        // Store holding event categories
        var eventCategoryStore = new Ext.data.JsonStore({
            proxy: new Ext.data.ScriptTagProxy({
                callbackParam : 'callback',
                url: 'http://upcoming.yahooapis.com/services/rest/'
            })
            sortInfo:{field: 'Name', direction: "ASC"},
            root : 'yourRoot',
            idProperty : 'Id',
            fields : [
                {name: 'Id', mapping: 'id'},    // Mandatory field
                {name: 'Description', mapping: 'description'},
                {name: 'Name', mapping: 'name'}
            ]
        });
        
        // Store holding all the events
        var eventStore = new Ext.data.JsonStore({
             proxy: new Ext.data.ScriptTagProxy({
                callbackParam : 'callback',
                url: 'http://upcoming.yahooapis.com/services/rest/'
            }),
            sortInfo:{field: 'ResourceId', direction: "ASC"},
            idProperty : 'Id',
            root : 'yourRoot',
            fields : [
                {name: 'Id', type:'string', mapping: 'id'},     // Mandatory field
                {name: 'ResourceId', mapping: 'category_id'},   // Mandatory field
                {name: 'StartDate', type : 'date'},             // Mandatory field
                {name: 'EndDate', type : 'date'}                // Mandatory field
                
                {name: 'Title', mapping: 'name'},   
                {name: 'Description', mapping: 'description'}
            ]
        });
        
        var g = new Sch.EditorSchedulerPanel({
            height:600,
            autoWidth:true,
            renderTo : 'grid-upcoming',
            startParamName : 'min_date',
            endParamName : 'max_date',
            trackMouseOver : false,
            region : 'center',
            stripeRows : true,
            
            // Setup static columns
            columns : [
               {header : 'Category', sortable:true, width:170, dataIndex : 'Name', editor : new Ext.form.TextField()},
               {header : 'Description', sortable:true, width:170, dataIndex : 'Description'}
            ],
            
            viewConfig : {
                forceFit:true
            },
            
            store : eventCategoryStore,     // Mandatory property
            eventStore : eventStore,        // Mandatory property
            
             // Setup your view configuration
            autoViews : [
                {
                    // Timespan <= 1 week show day columns
                    timeSpan : 7, 
                    columnType : 'day',
                    renderer : this.renderer
                }
            ]
        });
 *
*

Notes:

*
* *

The columnType property defines the column interval and also controls what is being rendered into the column headers. The string value maps to a constructor function used to create the actual grid columns (defined in Sch.ColumnFactory) and headers. Possible values:

* *
* @constructor * @param {Object} config The config object * @xtype scheduler */ // This component reuses all methods defined on the SchedulerPanel while inheriting from the EditorGridPanel (function() { var schedulerPrototype = Sch.SchedulerPanel.prototype; Sch.EditorSchedulerPanel = Ext.extend(Ext.grid.EditorGridPanel, { /* * @cfg {Ext.Template) Template used to render a tooltip over a grid event * null by default (meaning no tooltip) */ tooltipTpl : schedulerPrototype.tooltipTpl, /* * @cfg {String) 'none', 'left', 'right', 'both' */ resizeHandles : schedulerPrototype.resizeHandles, /* * @cfg {Boolean) true to enable drag and drop of events */ enableEventDragDrop : schedulerPrototype.enableEventDragDrop, /* * @cfg {Boolean) true to enable creating new events by click and drag */ enableDragCreation : schedulerPrototype.enableDragCreation, /* * @cfg {String} startParamName Name of the start date parameter used to load the event store */ startParamName : schedulerPrototype.startParamName, /* * @cfg {String} endParamName Name of the end date parameter used to load the event store */ endParamName : schedulerPrototype.endParamName, /** * @cfg {Ext.data.Store} eventStore The {@link Ext.data.Store} holding the events to be rendered into the scheduler (required). */ /** * @cfg {Ext.Template} eventTemplate The template used to renderer your events in the scheduler. See {@link Ext.Template Ext.Template} for more information. */ /** * @cfg {Object} timeColumnDefaults * The default properties to be assigned to the time columns. See {@link Ext.grid.ColumnModel#defaults} for more information. */ timeColumnDefaults : schedulerPrototype.timeColumnDefaults, /** * An empty function by default, but provided so that you can perform custom validation on * the item being dragged. This function is called during the drag and drop process and also after the drop is made * @param {Array} dragRecords an array containing the records for the events being dragged * @param {Ext.data.Record} targetResourceRecord the target resource of the the event * @param {Date} date The date corresponding to the current mouse position * @param {Int} duration The duration of the item being dragged * @param {Event} e The event object * @return {Boolean} true if the drop position is valid, else false to prevent a drop */ dndValidatorFn : schedulerPrototype.dndValidatorFn, /** * An empty function by default, but provided so that you can perform custom validation on * the item being resized. * @param {Ext.data.Record} resourceRecord the resource of the row in which the event is located * @param {Ext.data.Record} eventRecord the event being resized * @param {Date} startDate * @param {Date} endDate * @param {Event} e The event object * @return {Boolean} isValid True if the creation event is valid, else false to cancel */ resizeValidatorFn : schedulerPrototype.resizeValidatorFn, /** * An empty function by default, but provided so that you can perform custom validation on the item being created * @param {Ext.data.Record} resourceRecord the resource of the row in which the event is being created * @param {Date} startDate * @param {Date} endDate * @param {Event} e The event object * @return {Boolean} isValid True if the creation event is valid, else false to cancel */ createValidatorFn : schedulerPrototype.createValidatorFn, /** * @cfg {Object} validatorFnScope * The scope for the validatorFn */ validatorFnScope : null, // The width of the left + right border of your event, needed to calculate the correct start/end positions eventBorderWidth : 2, columnLines : true, /** * @cfg {Array} autoViews * Using this property puts the grid in 'auto' mode. The grid will react on store load and reconfigure itself based on the start/end dates passed as parameters in the load call. * The grid will then look in this array to find the appropriate view to choose based on the duration of the timespan to load. * The array should contain object with the following 4 properties: * 

        *
        *       {
        *           timeSpan : 7,                              // The maximum number of days this timespan is to used for
        *           columnType : 'day',                        // The column type, maps to the constructors found in the Sch.ColumnFactory
        *           viewBehaviour : Sch.ViewBehaviour.DayView, // An object where view specific behaviour is implemented, see the files named Sch.viewbehaviour.xxx for reference
        *           renderer : this.renderer                   // The renderer to use for this view
        *       }
        *
*/ /** * @cfg {Array} viewModel * The intial view model of the scheduler. (Don't use this together with autoViews) * A scheduler view model is composed by 5 properties: * 

        *
        *       {
        *           start: new Date(),
        *           end :  new Date.add(Date.DAY, 7),
        *           columnType : 'day',                        // The column type, maps to the constructors found in the Sch.ColumnFactory
        *           viewBehaviour : Sch.ViewBehaviour.DayView, // An object where view specific behaviour is implemented, see the files named sch.viewbehaviour.xxx for reference
        *           renderer :  function() {...}               // The renderer to use for this view
        *       }
        *
*/ overClass : 'sch-event-hover', // eventRenderer eventRenderer : Ext.emptyFn, timeCellRenderer : schedulerPrototype.timeCellRenderer, // private resizeHandleHtml : schedulerPrototype.resizeHandleHtml, /** *

Returns the event record for a DOM id

* @param (mixed) el The DOM node or Ext Element to lookup * @return {Record} The event record */ getEventRecordFromElement : schedulerPrototype.getEventRecordFromElement, /** *

Returns the event record for a DOM id

* @param (string) id The id of the DOM node * @return {Record} The event record */ getEventRecordFromDomId : schedulerPrototype.getEventRecordFromDomId, /** *

Returns the event record for a DOM id

* @param (string) id The id of the DOM node * @return {Record} The event record */ getEventIdFromDomNodeId : schedulerPrototype.getEventIdFromDomNodeId, /** *

Returns the Ext Element representing an event record

* @param (string) id The id of the event * @return {Ext.Element} The Ext Element representing the event record */ getElementFromEventId : schedulerPrototype.getElementFromEventId, /** *

Returns the Ext Element representing an event record

* @param (Ext.data.Record) record The record * @return {Ext.Element} The Ext Element representing the event record */ getElementFromEventRecord : schedulerPrototype.getElementFromEventRecord, /* * Gets an x-coordinate representing the date parameter * @param (Date) date, the date to get x coordinate for * @return {Number} x coordinate for date parameter, */ getXFromDate : schedulerPrototype.getXFromDate, /* * Gets the time for a DOM event such as 'mousemove' or 'click', calculated using the X coordinate of the DOM event * @param {EventObject} e, the EventObject instance * @param {String} floorOrRound (optional), 'floor' to floor the value or 'round' to round the value to nearest increment * @returns (Date) the Date corresponding to the EventObject x coordinate */ getTimeFromDomEvent : schedulerPrototype.getTimeFromDomEvent, /* * Gets the time for an X coordinate * @param {HTMLElement} timeCell, the timeCell inside which the coordinate is located * @param {Int} x, the X coordinate * @param {String} roundingMethod (Optional) floor or round to floor/round the value to nearest increment * @returns {Date} the Date corresponding to the x coordinate */ getTimeFromX : schedulerPrototype.getTimeFromX, getTimeFromX2 : schedulerPrototype.getTimeFromX2, // private roundDate : schedulerPrototype.roundDate, // private floorDate : schedulerPrototype.floorDate, /* * Call this to set a new event template * @param {Ext.Template} template the template to use for rendering event items */ setEventTemplate : schedulerPrototype.setEventTemplate, /** * Gets an array of the selected records * @return {Array} An array of {@link Ext.data.Record} objects (scheduler events) */ getSelectedRecords : schedulerPrototype.getSelectedRecords, /** * Method to get a formatted date, the grid uses the dateFormat assigned to the current view behaviour object to format the date * This way you can format your dates differently in each view type * @param {Date} date The date * @return {String} The formatted date */ getFormattedDate : schedulerPrototype.getFormattedDate, /** * Method to get a formatted end date * @param {Date} date The date * @return {String} The formatted date */ getFormattedEndDate : schedulerPrototype.getFormattedEndDate, /** * Tells the scheduler panel to reconfigure itself according to the data in the parameters * @param {Date} startDate The start date of the new view * @param {Date} endDate The end date of the new view * @param {String} columnType (Optional) The column type of the new view *

The columnType property defines the column interval and also controls what is being rendered into the column headers. The string value maps to a constructor function used to create the actual grid columns (defined in Sch.ColumnFactory) and headers. Possible values:

* * @param {Function} viewBehaviour (Optional) The viewBehaviour constructor to use of the new view * @param {Function} renderer (Optional) The renderer to use in this view * * The renderer function is called with the following arguments * * * The renderer function shall return an object containing the properties which will be applied to your {@link #eventTemplate}. */ setView : schedulerPrototype.setView, // private eventSelector : schedulerPrototype.eventSelector, // private // returns the current view time resolution defined in the view behaviour object (in minutes) getViewResolution : schedulerPrototype.getViewResolution, //private helper getRowIndex : schedulerPrototype.getRowIndex, // private constructor : function(config) { this.addEvents( /** * @event eventclick * Fires when an event is clicked * @param {Sch.SchedulerPanel} grid The grid object * @param {Record} eventRecord The event record of the clicked event * @param {EventObject} e The event object */ 'eventclick', /** * @event eventdblclick * Fires when an event is double clicked * @param {Sch.SchedulerPanel} grid The grid object * @param {Record} eventRecord The event record of the clicked event * @param {EventObject} e The event object */ 'eventdblclick', /** * @event eventcontextmenu * Fires when contextmenu is activated on an event * @param {Sch.SchedulerPanel} grid The grid object * @param {Record} eventRecord The event record of the clicked event * @param {EventObject} e The event object */ 'eventcontextmenu', /** * @event beforetooltipshow * Fires before the event tooltip is shown, return false to suppress it. * @param {Record} eventRecord The event record of the clicked record */ 'beforetooltipshow', /** * @event beforeviewchange * Fires before the timespan of the current view has changed * @param {SchedulerPanel} grid this */ 'beforeviewchange', /** * @event timeheaderdblclick * Fires after a doubleclick happens on a time header cell * @param {SchedulerPanel} grid this * @param {Date} startDate The start date of the header cell * @param {Date} endDate The start date of the header cell * @param {EventObject} e The event object */ 'timeheaderdblclick', /** * @event viewchange * Fires after the timespan of the current view has changed * @param {SchedulerPanel} grid this */ 'viewchange', // Resizing events start -------------------------- /** * @event beforeresize * Fires before a resize starts, return false to stop the execution * @param {Sch.SchedulerPanel} scheduler The scheduler object * @param {Record} el The record corresponding to element corresponding about to be resized * @param {EventObject} e The event object */ 'beforeresize', /** * @event partialresize * Fires before a drag starts, return false to stop the execution * @param {Sch.SchedulerPanel} scheduler The scheduler object * @param {Record} plugin The plugin object * @param {Date} startDate The start date of the event * @param {Date} endDate The end date of the event * @param {Ext.Element} The element being resized * @param {EventObject} e The event object */ 'partialresize', /** * @event afterresize * Fires after a succesful resize operation * @param {Sch.SchedulerPanel} scheduler The scheduler object * @param {Record} record The updated record */ 'afterresize', // Resizing events end -------------------------- // Dnd events start -------------------------- /** * @event beforednd * Fires before a dnd operation is initiated, return false to cancel it * @param {Sch.SchedulerPanel} scheduler The scheduler object * @param {Ext.data.Record} record The record corresponding to the node that's about to be dragged * @param {EventObject} e The event object */ 'beforednd', /** * @event dndstart * Fires when a dnd operation starts * @param {Plugin} plugin the dragdrop plugin */ 'dndstart', /** * @event afterdnd * Fires after a succesful drag n drop operation * @param {Sch.SchedulerPanel} scheduler The scheduler object * @param {Array} records the affected records (if copies were made, they were not inserted into the store) * @param {Boolean} isCopy True if the records were copied instead of moved */ 'drop', /** * @event afterdnd * Fires when after a drag n drop operation, even when drop was performed on an invalid location * @param {SchedulerGrid} grid The grid object */ 'afterdnd', // Dnd events end -------------------------- // Drag create events start -------------------------- /** * @event beforedragcreate * Fires before a drag starts, return false to stop the execution * @param {Sch.SchedulerPanel} scheduler The scheduler object * @param {EventObject} e The event object */ 'beforedragcreate', /** * @event beforedragcreate * Fires before a drag starts, return false to stop the execution * @param {Sch.SchedulerPanel} scheduler The scheduler object */ 'dragcreatestart', /** * @event dragcreateend * Fires after a successful drag-create operation * @param {SchedulerGrid} scheduler The scheduler object * @param {Object} data An object containing three properties: record (meaning the resource record), startDate and endDate */ 'dragcreateend', /** * @event afterdragcreate * Always fires after a drag-create operation * @param {Sch.SchedulerPanel} scheduler The scheduler object */ 'afterdragcreate' // Drag create events end -------------------------- ); config = config || {}; Ext.applyIf(config, { plugins : [] }); Ext.apply(this, config); if (!config.eventTemplate) { config.eventTemplate = new Ext.Template( '
', // The html that makes up the left resize handle (this.resizeHandles === 'both' || this.resizeHandles === 'left') ? String.format(this.resizeHandleHtml, 'west') : '', '
{text}
', // The html that makes up the right resize handle (this.resizeHandles === 'both' || this.resizeHandles === 'right') ? String.format(this.resizeHandleHtml, 'east') : '', '
' ).compile(); } this.configureFunctionality(); Sch.EditorSchedulerPanel.superclass.constructor.call(this, config); }, getView : schedulerPrototype.getView, // private initComponent : function() { // Assign a default renderer to be used by all time column cells this.timeColumnDefaults.renderer = this.internalRenderer; // Required to be able to have multiple schedulers running at the same time, to not risk having multiple items in the DOM with the same id this.eventPrefix = Ext.id() + '-'; if (this.autoViews && this.autoViews.length > 0) { this.eventStore.on({ beforeload : this.onBeforeStoreLoad, scope : this }); // If the store has a proxy, intercept its request method if (this.eventStore.proxy.request) { // Setup new view after a store load operation is initiated this.eventStore.proxy.request = this.eventStore.proxy.request.createInterceptor(function(a, b, params) { this.reconfigureInternal(params); }, this); } else if (this.eventStore.proxy.load) { // Ext 2.x intercept load method instead this.eventStore.proxy.load = this.eventStore.proxy.load.createInterceptor(function(params) { this.reconfigureInternal(params); }, this); } } this.on({ resize : this.refreshView, render : this.onRender_, beforedestroy : this.onBeforeDestroy_, columnresize : this.refreshView, dndstart : this.onDragDropStart, afterdnd : this.onDragDropEnd, dragcreatestart : this.onDragCreateStart, afterdragcreate : this.onAfterDragCreate, headerdblclick : this.onHeaderDoubleClick, cellclick : function(g, r, c, e) { var t = e.getTarget(this.eventSelector); if (t) { this.fireEvent('eventclick', this, this.getEventRecordFromDomId(t.id), t, e); } }, celldblclick : function(g, r, c, e) { var t = e.getTarget(this.eventSelector); if (t) { this.fireEvent('eventdblclick', this, this.getEventRecordFromDomId(t.id), e); } }, cellcontextmenu : function(g, r, c, e) { var t = e.getTarget(this.eventSelector); if (t) { this.fireEvent('eventcontextmenu', this, this.getEventRecordFromDomId(t.id), e); } }, scope : this }); if(!this.selModel && !this.disableSelection){ this.selModel = new Sch.EventSelectionModel(); } Sch.EditorSchedulerPanel.superclass.initComponent.call(this); var cm = this.getColumnModel(); this.nbrStaticColumns = cm.getColumnCount(); cm.on('hiddenchange', this.refreshView, this); // Initialize the cm to handle multiple row headers Ext.applyIf(cm, { rows : [] }); this.on('render', function() { this.el.addClass('sch-schedulerpanel'); }, this); }, configureFunctionality : schedulerPrototype.configureFunctionality, // private reconfigureInternal : schedulerPrototype.reconfigureInternal, // private, clean up onBeforeDestroy_ : schedulerPrototype.onBeforeDestroy_, // private refreshView : schedulerPrototype.refreshView, // private onRender_ : schedulerPrototype.onRender_, // private setupTooltip : schedulerPrototype.setupTooltip, /** * Convenience method to load a date span * @param {Date} start The start date * @return {String} end The end date */ loadInterval : schedulerPrototype.loadInterval, // private onBeforeStoreLoad : schedulerPrototype.onBeforeStoreLoad, // private internalRenderer : schedulerPrototype.internalRenderer, /** * Method to get a the current start date of the scheduler view * @return {Date} The start date of the current view */ getStart : schedulerPrototype.getStart, /** * Method to get a the current end date of the scheduler view * @return {Date} The start date of the current view */ getEnd : schedulerPrototype.getEnd, getViewBehaviour : schedulerPrototype.getViewBehaviour, // private getColumnStart : schedulerPrototype.getColumnStart, // private getColumnEnd : schedulerPrototype.getColumnEnd, onMouseOver : schedulerPrototype.onMouseOver, onMouseOut : schedulerPrototype.onMouseOut, onDragDropStart : schedulerPrototype.onDragDropStart, onDragDropEnd : schedulerPrototype.onDragDropEnd, onDragCreateStart : schedulerPrototype.onDragCreateStart, onAfterDragCreate : schedulerPrototype.onAfterDragCreate, setViewInternal : schedulerPrototype.setViewInternal, getResourceByEventRecord : schedulerPrototype.getResourceByEventRecord, onHeaderDoubleClick : schedulerPrototype.onHeaderDoubleClick, getResourceRecordByElement : schedulerPrototype.getResourceRecordByElement, isDateRangeAvailable : schedulerPrototype.getResourceRecordByElement }); Ext.reg('editorscheduler', Sch.EditorSchedulerPanel); })();