TimeAxisViewModel

This class is an internal view model class, describing the visual representation of a TimeAxis. The config for the header rows is described in the headers. To calculate the size of each cell in the time axis, this class requires:

availableSpace - The total width or height available for the rendering
tickSize - The fixed width or height of each cell in the lowest header row. This value is normally read from the viewPreset but this can also be updated programmatically using the tickSize setter

Normally you should not interact with this class directly.

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

listeners : Object

Events

The listener set for this object.

An object whose property names are the names of events to handle, or options which modifiy how the handlers are called.

See addListener for details about the options.

Listeners can be specified in target class config and they will be merged with any listeners specified in the instantiation config. Class listeners will be fired first:

class MyStore extends Store({
    static configurable = {
        listeners : {
            myCustomEvent() {
            },
            load : {
                prio : 10000,
                fn() { // this load listener handles things first }
            }
        }
    };
});

let store = new MyStore({
  listeners: {
    load: () => { // This load listener runs after the class's },
    ...
  }
});

Handlers as function name

Object event handlers may be specified as a function name. If a string is specified, it is the name of the function in the thisObj object.

If the string begins with up., this object's ownership hierarchy (if present) is scanned for an object which implements that function name:

new Popup({
    tbar : {
        items : {
            myCombo : {
                type      : 'combo',
                editable  : false,
                label     : 'Type',
                listeners : {
                    // Look in owner chain for this function name
                    change : 'up.onFilterChange'
                },
                items     : [
                    'Event',
                    'Task',
                    'Appointment'
                ]
            }
        }
    },
    items : {
        ...
    },
    onFilterChange({ value }) {
        // Handle event type selection here
    }
});

availableSpace : Number

internal

The available width/height, this is normally not known by the consuming UI component using this model class until it has been fully rendered. The consumer of this model should set availableSpace when its width has changed.

Has a corresponding runtime availableSpace property.
forceFit : Booleanfalse

internal

true if cells in the bottom-most row should be fitted to the available space.

Has a corresponding runtime forceFit property.
snap : Booleanfalse

internal

true if there is a requirement to be able to snap events to a certain view resolution. This has implications of the tickSize that can be used, since all widths must be in even pixels.

Has a corresponding runtime snap property.
tickSize : Number100

internal

The "tick width" for horizontal mode or "tick height" for vertical mode, to use for the cells in the bottom most header row. This value is normally read from the viewPreset

Has a corresponding runtime tickSize property.
timeAxis : TimeAxis

internal

The time axis providing the underlying data to be visualized
catchEventHandlerExceptions : Booleanfalse

ADVANCED
Events

By default, if an event handler throws an exception, the error propagates up the stack and the application state is undefined. Code which follows the event handler will not be executed.

Set this to true to catch exceptions thrown by this object's event handlers and continue processing the event. The exception will be rethrown on a zero millisecond timeout, so it will not destroy the stack.

Has a corresponding runtime catchEventHandlerExceptions property.
internalListeners : Object

internal
Events

Internal listeners, that cannot be removed by the user.

bubbleEvents : Object

Events

An object where property names with a truthy value indicate which events should bubble up the ownership hierarchy when triggered.

const container = new Container({
    items : [
       { type : 'text', bubbleEvents : { change : true }}
    ],

    listeners : {
        change() {
            // Will catch change event from the text field
        }
    }
});

callOnFunctions : Booleanfalse
Events
Set to true to call onXXX method names (e.g. onShow, onClick), as an easy way to listen for events.
```
const container = new Container({
    callOnFunctions : true

    onHide() {
         // Do something when the 'hide' event is fired
    }
});
```
Has a corresponding runtime callOnFunctions property.

Properties

Properties are getters/setters or publicly accessible variables on this class

isTimeAxisViewModel : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of TimeAxisViewModel class, or subclass thereof.

availableSpace : Number

internal

Get/set the available space for the time axis representation. If size changes it will cause it to update its contents and fire the update event.

Has a corresponding availableSpace config.
columnConfig : Object[]

internal

Returns an array representing the headers of the current timeAxis. Each element is an array representing the cells for that level in the header.
forceFit : Boolean

internal

Gets/sets the forceFit value for the model. Setting it will cause it to update its contents and fire the update event.

Has a corresponding forceFit config.
isHorizontal : Boolean

internal

READONLY

Using horizontal mode?
isStretchingTicks : Boolean

internal

READONLY

Returns true if the ticks are currently being stretched to fit the available space.
isVertical : Boolean

internal

READONLY

Using vertical mode?
majorHeaderLevel : String

private

READONLY

This method is meant to return the level of the header which 2nd lowest. It is used for isMajorTick method
snap : Boolean

internal

Gets/sets the snap value for the model. Setting it will cause it to update its contents and fire the update event.

Has a corresponding snap config.
snapPixelAmount : Number

internal

READONLY

Returns the pixel increment for the current view resolution.
tickSize : Number

internal

Get/set the current time column size (the width or height of a cell in the bottom-most time axis header row, depending on mode)

Has a corresponding tickSize config.
totalSize : Number

internal

READONLY

Returns the total width/height of the time axis representation, depending on mode.
isEvents : Booleantrue

READONLY

ADVANCED
Events

Identifies an object as an instance of Events class, or subclass thereof.
isTimeAxisViewModel : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of TimeAxisViewModel class, or subclass thereof.
catchEventHandlerExceptions : Booleanfalse

ADVANCED
Events

By default, if an event handler throws an exception, the error propagates up the stack and the application state is undefined. Code which follows the event handler will not be executed.

Set this to true to catch exceptions thrown by this object's event handlers and continue processing the event. The exception will be rethrown on a zero millisecond timeout, so it will not destroy the stack.

Has a corresponding catchEventHandlerExceptions config.
callOnFunctions : Booleanfalse
Events
Set to true to call onXXX method names (e.g. onShow, onClick), as an easy way to listen for events.
```
const container = new Container({
    callOnFunctions : true

    onHide() {
         // Do something when the 'hide' event is fired
    }
});
```
Has a corresponding callOnFunctions config.

Functions

Functions are methods available for calling on the class

fitToAvailableSpace( suppressEvent )

internal

This function fits the time columns into the available space in the time axis column.
forEachInterval( position, iteratorFn, thisObj )

internal

Calls the supplied iterator function once per interval. The function will be called with three parameters, start date and end date and an index. Return false to break the iteration.
forEachMainInterval( iteratorFn, thisObj )

internal

Calls the supplied iterator function once per interval. The function will be called with three parameters, start date and end date and an index. Return false to break the iteration.
getDates( level, useLowestHeaderfalse, getEndfalse )
: Array

internal

Returns start dates for ticks at the specified level in format { date, isMajor }.
getSingleUnitInPixels( )
: Number

internal

Returns the amount of pixels for a single unit
isMajorTick( date )
: Boolean

private

For vertical view (and column lines plugin) we sometimes want to know if current tick starts along with the upper header level.
update( availableSpace, silentfalse, forceUpdatefalse )

internal

Updates the view model current timeAxis configuration and available space.
getDateFromPosition( position, roundingMethod, allowOutOfRangefalse )
: Date

Gets the date for a position on the time axis
getDistanceBetweenDates( start, end )
: Number

Returns the distance in pixels for a timespan with the given start and end date.
getDistanceForDuration( durationMS )
: Number

Returns the distance in pixels for a time span
getPositionFromDate( date )
: Number

Gets the position of a date on the projected time axis or -1 if the date is not in the timeAxis.
addListener( config, thisObj, oldThisObj )
: Function

Events
Adds an event listener. This method accepts parameters in the following format:
```
 myObject.addListener({
     thisObj    : this,          // The this reference for the handlers
     eventname2 : 'functionName' // Resolved at invocation time using the thisObj,
     otherevent : {
         fn      : 'handlerFnName',
         once    : true          // Just this handler is auto-removed on fire
     },
     yetanother  : {
         fn      : 'yetAnotherHandler',
         args    : [ currentState1, currentState2 ] // Capture info to be passed to handler
     },
     prio        : 100           // Higher prio listeners are called before lower
 });
```
When listeners have a thisObj option, they are linked to the lifecycle of that object. When it is destroyed, those listeners are removed.

The config parameter allows supplying options for the listener(s), for available options see BryntumListenerConfig.

A simpler signature may be used when only adding a listener for one event and no extra options (such as once or delay) are required:
```
myObject.addListener('click', myController.handleClicks, myController);
```
The args in this simple case are eventName, handler and thisObj

By default, if an event handler throws an exception, the error propagates up the stack and the application state is undefined. Code which follows the event handler will not be executed. Set the catchEventHandlerExceptions config to true to catch exceptions thrown by this object's event handlers and allow the event to continue processing. The exception will be rethrown on a zero millisecond timeout,
attachAutoDetacher( )

private
Events

Internal function used to hook destroy() calls when using thisObj
await( eventName, options )
: Promise

private

ASYNC
Events
detachAutoDetacher( )

private
Events

Internal function used restore hooked destroy() calls when using thisObj
doDestroy( )

internal
Events

Auto detaches listeners registered from start, if set as detachable
findListener( eventName, listenerToFind, defaultThisObj )

internal
Events

Finds the index of a particular listener to the named event. Returns -1 if the passed function/thisObj listener is not present.
hasListener( eventName )
: Boolean

ADVANCED
Events

Returns true if any listener is registered for the specified eventName, or if null, for any event.
ion( )

internal
Events

Internal convenience method for adding an internal listener, that cannot be removed by the user.

Alias for on({ $internal : true, ... }). Only supports single argument form.
numListeners( eventName )
: Number

internal
Events

Returns the number of attached listener for the specified eventName, or if null, for any event.

on( config, thisObj, oldThisObj )

: Function

Events

Alias for addListener. Adds an event listener. This method accepts parameters in the following format:

 myObject.on({
     thisObj    : this,          // The this reference for the handlers
     eventname2 : 'functionName' // Resolved at invocation time using the thisObj,
     otherevent : {
         fn      : 'handlerFnName',
         once    : true          // Just this handler is auto-removed on fire
     },
     yetanother  : {
         fn      : 'yetAnotherHandler',
         args    : [ currentState1, currentState2 ] // Capture info to be passed to handler
     },
     prio        : 100           // Higher prio listeners are called before lower
 });

When listeners have a thisObj option, they are linked to the lifecycle of that object. When it is destroyed, those listeners are removed.

The config parameter allows supplying options for the listener(s), for available options see BryntumListenerConfig.

A simpler signature may be used when only adding a listener for one event and no extra options (such as once or delay) are required:

myObject.on('click', myController.handleClicks, myController);

The args in this simple case are eventName, handler and thisObj

onListen( eventName )

internal
Events

This method is called when the first listener for an event is added.
onUnlisten( eventName )

internal
Events

This method is called when the last listener for an event is removed.
once( )

private
Events

Internal function used to run a callback function after an event is triggered

relayAll( through, prefix, transformCasetrue )

ADVANCED

Events

Relays all events through another object that also implements Events mixin. Adds a prefix to the event name before relaying, for example add -> storeAdd

// Relay all events from store through grid, will make it possible to listen for store events prefixed on grid:
'storeLoad', 'storeChange', 'storeRemoveAll' etc.
store.relayAll(grid, 'store');

grid.on('storeLoad', () => console.log('Store loaded');

removeAllListeners( )
Events

Removes all listeners registered to this object by the application.
removeListener( config, thisObj, oldThisObj )
: Boolean

Events

Removes an event listener. Same API signature as addListener
resumeEvents( )
: Boolean

ADVANCED
Events

Resume event triggering after a call to suspendEvents(). If any triggered events were queued they will be triggered.
suspendEvents( queuefalse )

ADVANCED
Events

Prevents events from being triggered until resumeEvents() is called. Optionally queues events that are triggered while suspended. Multiple calls stack to require matching calls to resumeEvents() before actually resuming.
trigger( eventName, param )
: Boolean/Promise

ASYNC

ADVANCED
Events

Triggers an event, calling all registered listeners with the supplied arguments. Returning false from any listener makes function return false.

By default, if an event handler throws an exception, the error propagates up the stack and the application state is undefined. Code which follows the event handler will not be executed. Set the catchEventHandlerExceptions config to true to catch exceptions thrown by this object's event handlers and allow the event to continue processing. The exception will be rethrown on a zero millisecond timeout,
un( config, thisObj, oldThisObj )
: Boolean

Events

Shorthand for removeListener

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

beforeDestroy
Events

Fires before an object is destroyed.
catchAll
Events

Fires when any other event is fired from the object.

Note: catchAll is fired for both public and private events. Please rely on the public events only.
destroy
Events

Fires when an object is destroyed.
reconfigure

Fires after the model has been reconfigured.
update

Fires after the model has been updated.

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onBeforeDestroy
Events

Called before an object is destroyed.
onCatchAll
Events

Called when any other event is called from the object.

Note: catchAll is called for both public and private events. Please rely on the public events only.
onDestroy
Events

Called when an object is destroyed.
onReconfigure

Called after the model has been reconfigured.
onUpdate

Called after the model has been updated.

Source path

Scheduler/view/model/TimeAxisViewModel.js

TimeAxisViewModel

Configs

Handlers as function name

Properties

Functions

Events

Event handlers

Source path

Inheritance tree2

Contents