ResourceUtilization

Widget

Accepts column definitions for the grid during initialization. They will be used to create Column instances that are added to a ColumnStore.

At runtime it returns the ColumnStore.

Initialization using column config objects:

new Grid({
  columns : [
    { text : 'Alias', field : 'alias' },
    { text : 'Superpower', field : 'power' }
  ]
});

Also accepts a store config object:

new Grid({
  columns : {
    data : [
      { text : 'Alias', field : 'alias' },
      { text : 'Superpower', field : 'power' }
    ],
    listeners : {
      update() {
        // Some update happened
      }
    }
  }
});

Access the ColumnStore at runtime to manipulate columns:

grid.columns.add({ field : 'column', text : 'New column' });

Replacing the columns fully at runtime:

grid.columns = [{ field : 'column', text : 'New column' }];

Has a corresponding runtime columns property.

Text or HTML, or a EmptyTextDomConfig block to display when there is no data to display in the grid. When using multiple Grid regions, provide the region property to decide where the text is shown. By default, it is shown in the first region.

new Grid({
    emptyText : {
        region : 'locked',
        text   : 'No data available'
    }
})

Has a corresponding runtime emptyText property.

The end date of the timeline (if not configure with infiniteScroll).

If omitted, it will be calculated based on the startDate setting and the 'defaultSpan' property of the current viewPreset.

If a string is supplied, it will be parsed using DateHelper.defaultFormat.

Note: If you need to set start and end date at the same time, use the setTimeSpan method.

Has a corresponding runtime endDate property.

Specify which features to use on the grid. Most features accepts a boolean, some also accepts a config object. Please note that if you are not using the bundles you might need to import the features you want to use.

const grid = new Grid({
    features : {
        stripe : true,   // Enable stripe feature
        sort   : 'name', // Configure sort feature
        group  : false   // Disable group feature
    }
}

Has a corresponding runtime features property.

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
    }
});

An array of ViewPreset config objects which describes the available timeline layouts for this scheduler.

By default, a predefined set is loaded from the PresetManager.

A ViewPreset describes the granularity of the timeline view and the layout and subdivisions of the timeline header.

Has a corresponding runtime presets property.

Row height in pixels. This allows the default height for rows to be controlled. Note that it may be overridden by specifying a rowHeight on a per record basis, or from a column renderer.

When initially configured as null, an empty row will be measured and its height will be used as default row height, enabling it to be controlled using CSS

Has a corresponding runtime rowHeight property.

The start date of the timeline (if not configure with infiniteScroll).

If omitted, and a TimeAxis has been set, the start date of the provided TimeAxis will be used. If no TimeAxis has been configured, it'll use the start/end dates of the loaded event dataset. If no date information exists in the event data set, it defaults to the current date and time.

If a string is supplied, it will be parsed using DateHelper.defaultFormat.

When using infiniteScroll, use visibleDate to control initially visible date instead.

Note: If you need to set start and end date at the same time, use the setTimeSpan method.

Has a corresponding runtime startDate property.

A string key used to look up a predefined ViewPreset (e.g. 'weekAndDay', 'hourAndDay'), managed by PresetManager. See PresetManager for more information. Or a config object for a viewPreset.

Options:

• 'secondAndMinute'
• 'minuteAndHour'
• 'hourAndDay'
• 'dayAndWeek'
• 'dayAndMonth'
• 'weekAndDay'
• 'weekAndMonth',
• 'monthAndYear'
• 'year'
• 'manyYears'
• 'weekAndDayLetter'
• 'weekDateAndMonth'
• 'day'
• 'week'

If passed as a config object, the settings from the viewPreset with the provided base property will be used along with any overridden values in your object.

To override:

viewPreset : {
  base    : 'hourAndDay',
  id      : 'myHourAndDayPreset',
  headers : [
      {
          unit      : "hour",
          increment : 12,
          renderer  : (startDate, endDate, headerConfig, cellIdx) => {
              return "";
          }
      }
  ]
}

or set a new valid preset config if the preset is not registered in the PresetManager.

Has a corresponding runtime viewPreset property.

A date to bring into view initially on the scrollable timeline.

This may be configured as either a Date or a scrolling options object describing the scroll action, including a date option which references a Date.

See scrollToDate for details about scrolling options.

Note that if a naked Date is passed, it will be stored internally as a scrolling options object using the following defaults:

{
    date  : <The Date object>,
    block : 'nearest'
}

This moves the date into view by the shortest scroll, so that it just appears at an edge.

To bring your date of interest to the center of the viewport, configure your Scheduler thus:

    visibleDate : {
        date  : new Date(2023, 5, 17, 12),
        block : 'center'
    }

Has a corresponding runtime visibleDate property.

A Function which returns the tooltip text to display when hovering a bar. The following parameters are passed:

A Function which returns a CSS class name to add to a rectangle element. The following parameters are passed:

A Function which if provided returns DOM configuration object for a bar (a RECT element representing a single "bar"-type value). The function accepts default prepared DOM configuration in an argument which then can be processed and returned.

new ResourceUtilization({
    // Let's add left & right margins to bars
    getBarDOMConfig(series, domConfig) {
        // margin size is 10% of the bar width
        const xMargin = 0.1 * domConfig.width;

        // adjust the bar x-coordinate
        domConfig.x += xMargin;
        // reduce the bar width respectively
        domConfig.width -= 2 * xMargin;

        // return the edited domConfig
        return domConfig;
    },
    ...
})

new ResourceUtilization({
    getBarText(datum) {
        // "this" in the method refers core Histogram instance
        // get the view instance
        const resourceUtilization = this.owner;

        .....
    },
    ...
})

The following parameters are passed:

A Function which returns the text to render inside a bar.

Here for example the provided function displays resources time left instead of allocated time

new ResourceUtilization({
    getBarText(datum) {
        const resourceUtilization = this.owner;

        // get default bar text
        let result = view.getBarTextDefault();

        // For resource records we will display the time left for allocation
        if (result && datum.resource) {

            const unit = resourceUtilization.getBarTextEffortUnit();

            // display the resource available time
            result = resourceUtilization.getEffortText(datum.maxEffort - datum.effort, unit);
        }

        return result;
    },
})

Please note that the function will be injected into the underlying Histogram component that is used under the hood to render actual charts. So this in the function will refer to the Histogram instance. To access the ResourceUtilization instance please use this.owner in the function body:

new ResourceUtilization({
    getBarText(datum) {
        // "this" in the method refers core Histogram instance
        // get the view instance
        const view = this.owner;

        .....
    },
})

The following parameters are passed:

A Function which returns a DOM configuration object for text elements.

new ResourceUtilization({
    getBarTextDOMConfig(domConfig, datum, index) {
        // change text vertical location
        domConfig.y = '10%';

        return domConfig;
    },
    ...
})

new ResourceUtilization({
    getBarTextDOMConfig(domConfig) {
        // "this" in the method refers core Histogram instance
        // get the view instance
        const resourceUtilization = this.owner;

        .....

        return domConfig;
    },
    ...
})

The following parameters are passed:

A ProjectModel instance (or a config object) to display resource allocation of.

Note: This config is mandatory.

Has a corresponding runtime project property.

A localizable string (May contain 'L{}' tokens which resolve in the locale file) to inject into an element which will be linked using the aria-describedby attribute.

The purpose of the aria-describedby attribute is to provide additional descriptive information for assistive technologies to provide more detailed information about the widget's purpose and state.

This extra description is announced by screen readers after the ariaLabel, providing users with a more comprehensive understanding of the widget's functionality and context. It can be used to convey additional instructions, state information, or any other relevant details that may assist users in effectively interacting with the widget.

This widget is passed as the templateData so that functions in the locale file can interrogate the widget's state.

A localizable string (May contain 'L{}' tokens which resolve in the locale file) to inject as the aria-label attribute.

The purpose of the aria-label attribute is to provide an accessible name for assistive technologies. This is analogous to a <label> element for form fields and is especially important for interactive widgets such as buttons, form fields, etc. that may not have visible text content that can be used as a label - for example an icon-only button.

By providing an aria-label, this ensures that assistive technologies can identify the widget and operate it by this identifier. Voice activation uses this label to allow users to interact with the widget using voice commands. Screen readers also use this label to announce the widget to users with visual impairments, providing them with the necessary information to understand the purpose of the widget and how to interact with it.

This widget is passed as the templateData so that functions in the locale file can interrogate the widget's state.

An object whose keys are the key name and optional modifier prefixes: 'Ctrl+', 'Alt+', 'Meta+', and 'Shift+' (case-insensitive). The values are the name of the instance method to call when the keystroke is received.

For example:

 keyMap : {
     'Ctrl+A': 'onSelectAll',
     'Ctrl+Z': 'onUndo',
     't'     : 'gotoNow',
     [/\d/]  : 'onDigit'
 }

If a key is a visible character (as above), and not modified by any modifier keys, and emanates from an editable element (such as an <input> or <textarea>), the keystroke is ignored. This is to allow the browser to handle typing in editable elements.

Target element filtering

By default, the keyMap will process keystrokes from any element within the widget.

This can be filtered by providing a targetSelector property in the keyMap. If provided, only keystrokes originating from elements matching the targetSelector (or their descendants) will be processed by the keyMap.

For example:

// Only accept keys from elements with class 'my-class' or their descendants.
keyMap : {
   targetSelector : '.my-class',
  'Enter'         : 'actionToPerformOnEnter'
}

This can be done on a more granular level for each keyMap entry by providing a targetSelector property in the action config object:

keyMap : {
    'Enter' : {
        handler        : 'actionToPerformOnEnter',
        targetSelector : '.my-class'
    }
}

Delegation

In addition to key names, the special key 'delegate' can be included to specify additional objects that have their own keyMap. If a keystroke is not handled by this keyMap, the delegates are processed until one has a matching entry in its keyMap. The value of the delegate key can be a single string, an array of strings or an object whose truthy keys are dot paths identifying the delegate(s) related to this instance.

For example:

 keyMap : {
     delegate : ['widgetMap.foo', 'widgetMap.bar', 'tbar']
 }

An widget with the above keyMap will delegate to the child widgets named foo and bar via the widget's widgetMap. In addition, the tbar property of the widget will also be considered as a delegate.

The following is equivalent to the above delegate but using an object. This form can be used to allow removal of entries by derived classes or an overriding instance config.

 keyMap : {
     delegate : {
         'widgetMap.foo' : true,
         'widgetMap.bar' : true,
         tbar            : true
     }
 }

Has a corresponding runtime keyMap property.

The ARIA role to apply to this widget's element. By default, this is set to 'presentation' to avoid accidentally applying a role which may interfere with screen readers.

Bryntum widgets usually set their own appropriate default role, so it is not usually necessary to set this config directly.

However, when creating custom widgets, or when a widget does not set an appropriate default role, this config should be set to the appropriate ARIA role for the widget.

Custom CSS classes to add to the panel's body element.

May be specified as a space separated string, or as an object in which property names with truthy values are used as the class names:

 bodyCls : {
     'b-my-class'     : 1,
     [this.extraCls]  : 1,
     [this.activeCls] : this.isActive
 }

Custom CSS classes to add to element. May be specified as a space separated string, or as an object in which property names with truthy values are used as the class names:

 cls : {
     'b-my-class'     : 1,
     [this.extraCls]  : 1,
     [this.activeCls] : this.isActive
 }

Has a corresponding runtime cls property.

Applies the specified color to the widget, by setting the --b-primary CSS variable in the widgets style block.

If the supplied color starts with b-, a named color from the current theme will be used (red -> b-color-red etc.). Applied as <tag>, for example:

<tag>

When the supplied color does not start with b-, it is assumed to be a valid CSS color specification and is used as is. Applied as <tag>, for example:

<tag>

Custom CSS classes to add to the contentElement. May be specified as a space separated string, or as an object in which property names with truthy values are used as the class names:

 cls : {
     'b-my-class'     : 1,
     [this.extraCls]  : 1,
     [this.activeCls] : this.isActive
 }

Custom CSS class name suffixes to apply to the elements rendered by this widget. This may be specified as a space separated string, an array of strings, or as an object in which property names with truthy values are used as the class names.

The panel supports a few special UIs, such as plain rendition where toolbars and header have no background/borders, and toolbar.

For example, consider a Panel with a ui config like so:

 new Panel({
     text : 'OK',
     ui   : 'light'
 });

This will apply the CSS class 'b-panel-ui-light' to the main element of the panel as well as its many child elements. This allows simpler CSS selectors to match the child elements of this particular panel UI:

 .b-panel-content.b-panel-ui-light {
     background-color : #eee;
 }

Using the cls config would make matching the content element more complex, and in the presence of docked items and nested panels, impossible to target accurately.

Convenience setting to align input fields of child widgets. By default, the Field input element is placed immediately following the label. If you prefer to have all input fields aligned to the right, set this config to 'end'.

Has a corresponding runtime inputFieldAlign property.

Convenience setting to use same label placement on all child widgets.

Set it to 'auto' to let the theme decide on label placement.

Specifying 'align-before' will position labels before the field and also apply a two column layout (in combination with display: contents on the fields) to align all labels in the first column and the fields in the second.

Has a corresponding runtime labelPosition property.

Either a default rendition to apply to all child widgets, or a map of renditions keyed by child widget type.

// Mixed types, use object form:
new Container({
  rendition : {
    text   : 'outlined',
    button : 'raised'
  },
  items : [
    { type : 'text', label : 'Name' },
    { type : 'button', text : 'Save' }
  ]
});

// Single type, can use string form:
new Container({
  rendition : 'outlined',
  items : [
    { type : 'button', text : 'Save' },
    { type : 'button', text : 'Cancel' }
  ]
});

Has a corresponding runtime rendition property.

A Config object representing the configuration of a Toolbar, or array of config objects representing the child items of a Toolbar. Another way to add a bbar is to use strips.

// Text only
bbar : [`Total number of students: ${totalStds}`, '->', `Passed Students: ${passedStds}`],

// Buttons
bbar : [
   {
      type     : 'button',
      ref      : 'addButton',
      text     : 'Add column',
      icon     : 'fa fa-plus',
      tooltip  : 'Add new column',
      onAction : ({ source }) => addColumn(source.element) // add new column
  },
  {
      type     : 'button',
      ref      : 'removeButton',
      text     : 'Remove last',
      icon     : 'fa fa-minus',
      tooltip  : 'Remove last column',
      onAction : () => grid.columns.count > 1 && grid.columns.last.remove() // remove last column
  }
]

// ToolbarConfig
bbar : {
    height : '4em',
    items  : {
        button1 : { text : 'A button', icon : 'fa fa-plus' },
        button2 : { text : 'Right button 1', icon : 'fa fa-trash', style : 'margin-inline-start:auto' },
        button3 : { icon : 'fa fa-gear' }
    }
}

This creates a toolbar docked to the bottom of the panel immediately above the footer.

Has a corresponding runtime bbar property.

Config object of a footer. May contain a dock, html and a cls property. A footer is not a widget, but rather plain HTML that follows the last element of the panel's body and strips.

The dock property may be top, right, bottom, left, start or end

A config object for the panel's header or a string in place of a title.

Configuring this as false explicitly removes the header bar, overriding any tools or title configs.

Sets labelWidth´ for all children of this Container, that does not define their own labelWidth`.

new Container({
   labelWidth : 100,
   items : {
     name : { type : 'textfield', label : 'Name' },
     score : { type : 'numberfield', label : 'Score' }
   }
});

Replaces the old approach of specifying this in the defaults config, with the added advantage of being able to set the default value to have this affect all containers:

// Use labelWidth 100 for all containers in the app
Container.applyDefaults({ labelWidth : 100 });

Has a corresponding runtime labelWidth property.

An object containing widgets keyed by name. By default (when no type is given), strips are toolbars. If you want to pass an array, you can use the toolbar's items.

The bbar and tbar configs are shortcuts for adding toolbars to the panel's strips.

Strips are arranged based on their dock and weight configs.

For widgets using a dock of 'top', 'bottom', 'left', 'right', 'start' or 'end'(an "edge strip"), the higher the weight assigned to a widget, the closer that widget will be to the panel body.

For widgets with 'header' or 'pre-header' for dock (a "header strip"), higher weight values cause the widget to be placed closer to the panel's title.

 new Panel({
     title : 'Test',
     html  : 'Panel strip test',
     strips : {
         left : {
             dock  : 'left'
             items : {
                 go : {
                     text : 'Go'
                 }
             }
         }
     }
 });

// Pass an array to tbar
strips : {
    tbar : {
        items: {
            addButton : {
                type : 'button',
                text : 'Add column',
                icon : 'fa fa-plus',
                onAction : ({ source }) => addColumn(source.element)
            },
            // consider 'getCurrentDate()` a custom function
            today : `Today is ${getCurrentDate()}`
        }
    }
}

A Config object representing the configuration of a Toolbar, or array of config objects representing the child items of a Toolbar. This creates a toolbar docked to the top of the panel immediately below the header.

To add toolbars not docked to the top, see bbar and strips.

// Text only
tbar : ['Project Timeline Overview', '->', 'Key Milestones & Deadlines'],

// Buttons
tbar : [
   {
      type     : 'button',
      ref      : 'addButton',
      text     : 'Add column',
      icon     : 'fa fa-plus',
      tooltip  : 'Add new column',
      onAction : ({ source }) => addColumn(source.element) // add new column
  },
  {
      type     : 'button',
      ref      : 'removeButton',
      text     : 'Remove last',
      icon     : 'fa fa-minus',
      tooltip  : 'Remove last column',
      onAction : () => grid.columns.count > 1 && grid.columns.last.remove() // remove last column
  }
]

// ToolbarConfig
tbar : {
    height : '4em',
    items  : {
        button1 : { text : 'A button', icon : 'fa fa-plus' },
        button2 : { text : 'Right button 1', icon : 'fa fa-trash', style : 'margin-inline-start:auto' },
        button3 : { icon : 'fa fa-gear' }
    }
}

Has a corresponding runtime tbar property.

Element (or element id) to adopt as this Widget's encapsulating element. The widget's content will be placed inside this element.

If this widget has not been configured with an id, it will adopt the id of the element in order to preserve CSS rules which may apply to the id.

Gets/sets the current time resolution object, which contains a unit identifier and an increment count { unit, increment }. This value means minimal task duration you can create using UI.

For example when you drag create a task or drag & drop a task, if increment is 5 and unit is 'minute' that means that you can create tasks in 5 minute increments, or move it in 5 minute steps.

This value is taken from viewPreset timeResolution config by default. When supplying a Number to the setter only the increment is changed and the unit value remains untouched.

timeResolution : {
  unit      : 'minute',  //Valid values are "millisecond", "second", "minute", "hour", "day", "week", "month", "quarter", "year".
  increment : 5
}

Has a corresponding runtime timeResolution property.

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.

An object which names formula prefixes which will be applied to all columns configured with formula : true.

Each entry is keyed by a formula prefix, and each value is how to instantiate and configure a FormulaProvider when that prefix is used in the typed vale, eg: =XXX(

If the configured value contains a type property, that is used to determine a registered formula provider subclass to instantiate.

fields : [{
    name             : 'review',
    formulaProviders : {
       AI : {
         type : 'remote',
         url  : 'https://my-ai-service.com'
       },
       SUM : {
          type : 'sum'
       }
    }
}]

Formula providers may be added to dynamically:

// Enable registered MYFormula class to be used as a formula provider in the Grid
grid.store.modelClass.fieldMap.review.formulaProviders.MY = { ... };

The properties of this settings object controls how grid is restored from state data.

To disable state restoration for unconfigured columns:

const grid = new Grid({
    stateSettings : {
        restoreUnconfiguredColumns : false
    }
});

Has a corresponding runtime stateSettings property.

This config defines the size of the start and end invisible parts of the timespan when infiniteScroll set to true.

It should be provided as a coefficient, which will be multiplied by the size of the scheduling area.

For example, if bufferCoef is 5 and the panel view width is 200px then the timespan will be calculated to have approximately 1000px (5 * 200) to the left and 1000px to the right of the visible area, resulting in 2200px of totally rendered content.

This config defines the scroll limit, which, when exceeded will cause a timespan shift. The limit is calculated as the panelWidth * bufferCoef * bufferThreshold. During scrolling, if the left or right side has less than that of the rendered content - a shift is triggered.

For example if bufferCoef is 5 and the panel view width is 200px and bufferThreshold is 0.2, then the timespan will be shifted when the left or right side has less than 200px (5 * 200 * 0.2) of content.

Set to true to automatically adjust the panel timespan during scrolling in the time dimension, when the scroller comes close to the start/end edges.

The actually rendered timespan in this mode (and thus the amount of HTML in the DOM) is calculated based on the bufferCoef option, and is thus not controlled by the startDate and endDate configs. The moment when the timespan shift happens is determined by the bufferThreshold value.

To specify initial point in time to view, supply the visibleDate config.

Has a corresponding runtime infiniteScroll property.

This config enables collapsibility for the panel. See collapsed.

For example:

     {
         type        : 'panel',
         collapsible : true
     }

This is managed by an instance of PanelCollapser which can be configured if an object is passed for this config property:

     {
         type        : 'panel',
         collapsible : {
             direction : 'left'
         }
     }

The config object form can contain a type property to specify the type of collapse the panel will use. This property can be one of the following:

• 'inline' (see PanelCollapser)
• 'overlay' (see PanelCollapserOverlay)

The default direction property is inferred from the position of the Panel in a flexbox layout.

If the Panel is the last child of a flexbox container, the direction is 'right' for a horizontal flexbox layout and 'down' for a vertical layout.

All other Panels in a flexbox container have the direction set to 'left' for a horizontal layout and 'up' for a vertical layout.

Controls the placement of this widget when it is added to a panel's strips collection. Typical values for this config are 'top', 'bottom', 'left', or 'right', which cause the widget to be placed on that side of the panel's body. Such widgets are called "edge strips".

Also accepts direction neutral horizontal values 'start' and 'end'.

If this config is set to 'header', the widget is placed in the panel's header, following the title. If this config is set to 'pre-header', the widget is placed before the title. Such widgets are called "header strips".

Use fixed row height. Setting this to true will configure the underlying RowManager to use fixed row height, which sacrifices the ability to use rows with variable height to gain a fraction better performance.

Using this setting also ignores the getRowHeight function, and thus any row height set in data. Only Grids configured rowHeight is used.

A function called for each row to determine its height. It is passed a record and expected to return the desired height of that records row. If the function returns a falsy value, Grids configured rowHeight is used.

The default implementation of this function returns the row height from the records rowHeight field.

Override this function to take control over how row heights are determined:

new Grid({
   getRowHeight(record) {
       if (record.low) {
           return 20;
       }
       else if (record.high) {
           return 60;
       }

       // Will use grids configured rowHeight
       return null;
   }
});

NOTE: Height set in a Column renderer takes precedence over the height returned by this function.

Grid's min-height. Defaults to 10em to be sure that the Grid always has a height wherever it is inserted.

Can be either a String or a Number (which will have 'px' appended).

Note that reading the value will return the numeric value in pixels.

Has a corresponding runtime minHeight property.

A Mask config object to adjust the maskDefaults when data is loading. The message and optional configuration from the loadMask config take priority over these options, just as they do for maskDefaults, respectively.

The final mask configuration for a load mask is as if the following were applied:

 Object.assign({},
     widget.maskDefaults,
     widget.loadMaskDefaults,
     widget.loadMask);

A Mask config object to adjust the maskDefaults when an error occurs loading data.

Set to false to disable showing data loading error mask.

The final mask configuration for an error mask is as if the following were applied:

 Object.assign({},
     widget.maskDefaults,
     widget.loadMaskDefaults,
     widget.loadMaskError,
     errorMessage);

A Mask config object, or a message to be shown when Crud Manager is persisting changes on the server. Set to null to disable default sync mask.

This config is similar to loadMask but designed for saving data.

To create a custom sync mask need to subscribe to the Crud Manager events and show Mask on beforeSend and hide it on requestDone and requestFail.

To create a custom sync mask, set this config to null and subscribe to the CrudManager's events to show or hide the mask as desired.

 widget.crudManager.on({
     loadStart() {
         widget.masked = {
             text : 'Data is loading...'
         };
     },
     load() {
         widget.masked = null;
     },
     loadCanceled() {
         widget.masked = null;
     },
     syncStart() {
         widget.masked = null;
     },
     sync() {
         widget.masked = null;
     },
     syncCanceled() {
         widget.masked = null;
     },
     requestFail({ response }) {
         widget.masked.error = response.message || 'Sync failed';
     }
 });

 store.load();

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
        }
    }
});

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.

Disable or enable the widget. It is similar to readOnly except a disabled widget cannot be focused, uses a different rendition (usually greyish) and does not allow selecting its value.

Set to 'inert' to also set the inert DOM attribute.

Has a corresponding runtime disabled property.

An object specifying attributes to assign to the root element of this widget. Set null value to attribute to remove it.

new Label({
    elementAttributes : {
       'data-role': 'primary', // Add data-role attribute with `"primary"` value
       inert : '',             // Add inert with no value
       title : null            // This will remove the title attribute from the element
    }
});

Refresh entire row when a record changes (true) or, if possible, only the cells affected (false).

When this is set to false, then if a column uses a renderer, cells in that column will still be updated because it is impossible to know whether the cells value will be affected.

If a standard, provided Column class is used with no custom renderer, its cells will only be updated if the column's field is changed.

By default the row hover effect is not visible in the Scheduler part of the grid.

Set this to false to show the hover effect in Scheduler rows.

Has a corresponding runtime hideRowHover property.

Determines if the widgets read-only state should be controlled by its parent.

When set to true, setting a parent container to read-only will not affect the widget. When set to false, it will affect the widget.

The owning Widget of this Widget. If this Widget is directly contained (that is, it is one of the items of a Container), this config will be ignored. In this case the owner is always the encapsulating Container.

If this Widget is floating, this config should be specified by the developer.

Registering with an owner creates a lifecycle relationship with that owning Widget. When the owner is destroyed this widget will also be destroyed.

This also allows focus to be tracked in the ownership tree. If a widget owns another widget, then even if that other widget is in a different element, focusing that owned widget will not cause a focusOut event, and the containsFocus property remains set.

A widget can unregister from its owner and break this relationship at any time by setting the property to null. It is then the developer's responsibility to ensure that this Widget is destroyed.

Has a corresponding runtime owner property.

Set to true to make the grid read-only, by disabling any UIs for modifying data.

Note that checks MUST always also be applied at the server side.

Has a corresponding runtime readOnly property.

An identifier by which this widget will be registered in the widgetMap of all ancestor containers.

If omitted, this widget will be registered using its id. In most cases ref is preferable over id since id is required to be globally unique while ref is not.

The ref value is also added to the elements dataset, to allow targeting it using CSS etc.

Has a corresponding runtime ref property.

"Break points" for which responsive config to use for columns and css.

Each level can be specified as:

• A number representing the width threshold (e.g., 400)
• The string '*' to match all sizes above other thresholds
• A ResponsiveLevelConfig object with levelWidth and additional grid state properties

See the responsive guide for details and examples.

Configure as true to have the component display a translucent ripple when its focusElement, or element is tapped if the current theme supports ripples. Out of the box, only the Material theme supports ripples.

This may also be a config object containing the properties listed below.

E.g.

   columns  : [{}...],
   ripple   : {
       color : 'red',
       clip  : '.b-grid-row'
   },
   ...

Configure as true to have the grid show a red "changed" tag in cells whose field value has changed and not yet been committed.

Set showDirty.duringEdit to true to show the red tag while editing a cell

showDirty : {
    duringEdit : true
}

Set showDirty.newRecord to true to show the red tag for all the cells of the new record

showDirty : {
    newRecord : true
}

An object containing sub grid configuration objects keyed by a region property. By default, grid has a 'locked' region (if configured with locked columns) and a 'normal' region. The 'normal' region defaults to use flex: 1.

This config can be used to reconfigure the "built-in" sub grids or to define your own.

Redefining the default regions:

new Grid({
  subGridConfigs : {
    locked : { flex : 1 },
    normal : { width : 100 }
  }
});

const App = props => {
    const subGridConfigs = {
        locked : { flex : 1 },
        normal : { width : 100 }
    };

    return <bryntum-grid subGridConfigs={subGridConfigs} />
}

<bryntum-grid :sub-grid-configs="subGridConfigs" />

export default {
    setup() {
        return {
            subGridConfigs : [
                locked : { flex : 1 },
                normal : { width : 100 }
            ]
        };
    }
}

<bryntum-grid [subGridConfigs]="subGridConfigs"></bryntum-grid>

export class AppComponent {
     subGridConfigs = [
         locked : { flex : 1 },
         normal : { width : 100 }
     ]
 }

Defining your own multi region grid:

new Grid({
  subGridConfigs : {
    left   : { width : 100 },
    middle : { flex : 1 },
    right  : { width  : 100 }
  },

  columns : [
    { field : 'manufacturer', text: 'Manufacturer', region : 'left' },
    { field : 'model', text: 'Model', region : 'middle' },
    { field : 'year', text: 'Year', region : 'middle' },
    { field : 'sales', text: 'Sales', region : 'right' }
  ]
});

A configuration for the tab created for this widget when it is placed in a TabPanel. For example, this config can be used to control the icon of the tab for this widget:

 items : {
     panel : {
         type : 'panel',
         // other configs...

         tab : {
             icon : 'fa fa-wrench'
         }
     },
     ...
 }

Another use for this config is to set the tab's rotate value differently than the default managed by the TabPanel:

 items : {
     panel : {
         type : 'panel',
         // other configs...

         tab : {
             rotate : false   // don't rotate even if tabBar is docked left or right
         }
     },
     ...
 }

Set this to false to prevent the creation of a tab for this widget. In this case, this widget must be shown explicitly. The activeTab for the tab panel will be -1 in this situation.

 items : {
     panel : {
         type : 'panel',
         tab  : false,    // no tab for this item

         // other configs...
     },
     ...
 ]

Has a corresponding runtime tab property.

A title to display in the header or owning TabPanel. Causes creation and docking of a header to the top if no header is configured.

If a header has been disabled by configuring the headeras false, setting it will have no effect.

Has a corresponding runtime title property.

Make this Panel a docked drawer which slides out from one side of the browser viewport by default.

If this Panel is a child of another widget, the drawer will slide out from the side of the parent widget.

By default, it floats above the content of its host. If you want the drawer to be inline within the host, consuming content space in the host, set the drawer inline property to true.

A function used for aggregating child records histogram data entries to their parent entry.

It's called for each child entry and is meant to apply the child entry values to the target parent entry (provided in aggregated parameter). The function must return the resulting aggregated entry that will be passed as aggregated parameter to the next aggregating step.

Should be provided as a function, or name of a function in the ownership hierarchy which may be called.

Function that extracts a record histogram data entry for aggregating. By default it returns the entry as is. Override the function if you need a more complex way to retrieve the value for aggregating.

Should be provided as a function, or the name of a function in the ownership hierarchy which may be called.

A function that initializes a target group record entry.

Should be provided as a function, or name of a function in the ownership hierarchy which may be called.

This may be configured as true to make the widget's element use the direction:rtl style.

All descendant widgets, including any floating widgets will inherit this setting.

Has a corresponding runtime rtl property.

The confirmation dialog shown when a recurring event is edited.

The user is given the opportunity to either change just the occurrence being edited, or all occurrences from that point onwards.

The {Scheduler.view.recurrence.RecurrenceConfirmationPopup} may be reconfigured from its default configuration by specifying a config object here.

Has a corresponding runtime recurrenceConfirmationPopup property.

A function that if provided decides whether an assignment should be taken into account or not when collecting allocation.

The function is recommended to be a generator so it can attach to the Engine and track the involved field changes automatically. It accepts two arguments: assignment record and ResourceAllocationInfo class instance collecting allocation. The instance has a special readField method that should be yielded to read the needed field value. The method also subscribes to further changes of the field triggering automatic allocation recollecting once the field gets changed:

new ResourceHistogram({
    // custom filtering function
    * assignmentFilterFn(assignment, allocationInfo) {
        // get the assignment event
        const event = yield assignment.$.event;

        // include only allocation of events having "type" field set to "Meeting"
        if (event) {
            // get "type" field value and bind to its changes
            // to refresh the histogram automatically
            const type = yield* allocationInfo.readField(event, 'type');

            return type === 'Meeting';
        }
    }
    ...
});

Specifies a format to use for displaying cost values. Default value is:

costFormat : {
    style    : 'currency',
    currency : 'USD'
},

See NumberFormat docs for details on the supported config values. Please keep in mind that currency value will be automatically set to the loaded project currency.

Set to true to take task and assignment store filters into account when collecting allocation.

new ResourceHistogram({
    // skip filtered out events/assignments
    respectStoreFilters : true
    ...
});

Path to load resource images from. Used by the resource header in vertical mode and the ResourceInfoColumn in horizontal mode. Set this to display miniature images for each resource using their image or imageUrl fields.

• image represents image name inside the specified resourceImagePath,
• imageUrl represents fully qualified image URL.

If set and a resource has no imageUrl or image specified it will try show miniature using the resource's name with resourceImageExtension appended.

NOTE: The path should end with a /:

new Scheduler({
  resourceImagePath : 'images/resources/'
});

An object with configuration for the ScaleColumn.

Example:

new TimelineHistogram({
    scaleColumn : {
        width : 50
    },
    ...
});

Provide null to the config to get rid of the column completely:

new TimelineHistogram({
    // do not add scale column
    scaleColumn : null,
    ...
});

Has a corresponding runtime scaleColumn property.

Controls how much space to leave between stacked event bars in px.

Value will be constrained by half the row height in horizontal mode.

Has a corresponding runtime barMargin property.

Defines how dates will be formatted in tooltips etc. This config has priority over similar config on the view preset. For allowed values see format.

By default, this is ingested from ViewPreset upon change of ViewPreset (Such as when zooming in or out). But Setting this to your own value, overrides that behavior.

Has a corresponding runtime displayDateFormat property.

Specify true to force rendered events/tasks to fill entire ticks. This only affects rendering, start and end dates retain their value on the data level.

When enabling fillTicks, drag-drop interactions use the same granularity as the bottom time axis "ticks". This means if you are viewing a day schedule, and you move an event starting 8am from Monday to Tuesday, it will still always start at 8am. Enabling snap might also improve the UX.

Has a corresponding runtime fillTicks property.

When true, events are sized and positioned based on rowHeight, resourceMargin and barMargin settings. Set this to false if you want to control height and vertical position using CSS instead.

Note that events always get an absolute top position, but when this setting is enabled that position will match row's top. To offset within the row using CSS, use translate : 0 y.

Control how much space to leave between the first event/last event and the resources edge (top/bottom margin within the resource row in horizontal mode, left/right margin within the resource column in vertical mode), in px. Defaults to the value of barMargin.

Can be configured per resource by setting resource.resourceMargin.

It's also possible to set different values for top/left and bottom/right by assigning an object to resourceMargin with start (margin top in horizontal mode, margin left in vertical mode) and end (margin bottom / margin right) properties:

scheduler = new Scheduler({
    resourceMargin : {
        start : 15,
        end   : 1
    }
});

Has a corresponding runtime resourceMargin property.

Set to true to snap to the current time resolution increment while interacting with scheduled events.

The time resolution increment is either determined by the currently applied view preset, or it can be overridden using timeResolution.

If you also want to snap to resources while dragging events, set the snapToResource config of the EventDrag feature to true.

Has a corresponding runtime snap property.

Affects drag drop and resizing of events when snap is enabled.

If set to true, dates will be snapped relative to event start. e.g. for a zoom level with timeResolution = { unit: "s", increment: "20" }, an event that starts at 10:00:03 and is dragged would snap its start date to 10:00:23, 10:00:43 etc.

When set to false, dates will be snapped relative to the timeAxis startDate (tick start)

• 10:00:03 -> 10:00:20, 10:00:40 etc.

The width/height (depending on vertical / horizontal mode) of all the time columns.

There is a limit for the tick size value. Its minimal allowed value is calculated so ticks would fit the available space. Only applicable when forceFit is set to false. To set tickSize freely skipping that limitation please set suppressFit to true.

Has a corresponding runtime tickSize property.

Convenience config to set both resourceImagePath and resourceImageExtension.

new Scheduler({
  resourceImages : {
    path      : 'images/resources/',
    extension : '.png'
  }
});

Set to true to include startDate and endDate params indicating the currently viewed date range in EventStore load requests (when loading using AjaxStore or CrudManager functionality).

Dates are formatted using the same format as the startDate field on the EventModel (e.g. 2023-03-08T00:00:00+01:00).

Configures whether the grid is scrollable in the Y axis. This is used to configure a Scroller. See the scrollerClass config option.

By default the grid is scrollable in the Y axis. If your platform shows scrollbars, they will appear when the content of the grid overflows.

To always show a scrollbar - even an empty one when there is no overflow - configure this as:

   scrollable : {
       overflowY : 'scroll'
   }

Has a corresponding runtime scrollable property.

Selection configuration settings, change these properties to control how selection works and what can be selected.

When configuring (creating an instance), set this to an object containing only those properties you want to change.

new Grid({
    selectionMode : {
       // Enables cell selection
       cell       : true,
       // Enabled cell and record selection by dragging
       dragSelect : true,
       // Enables selection of a column's cells by clicking the column header
       column     : true,
       // Shows a row number column which, when clicked, selected the row/record
       rowNumber  : true
    }
});

After the configuring is done, these properties will be monitored for changes, making it possible to alter the selection configuration at any time.

// Adds a selection checkbox column and makes that the only way to select
grid.selectionMode.checkboxOnly = true;

// Deactivates the auto selection of rows and cells when keyboard navigating
grid.selectionMode.selectOnKeyboardNavigation = false;

Properties

• cell : Booleanfalse

  Set to true to enable cell selection. This takes precedence over row selection, but rows can still be selected programmatically or with checkbox or RowNumber selection. Required for column selection

• row : Booleanfalse

  Set to true to enable row selection. This takes precedence over row selection. Required for row selection

• multiSelect : Booleantrue

  Allow multiple selection with ctrl and [Shift + Click] or with checkbox selection. Required for dragSelect and column selection

• alwaysMultiSelect : Booleantrue

  Allow multiple selection by simply clicking a row/checkbox

• checkbox : Boolean/CheckColumnConfigfalse

  Set to true to add a checkbox selection column to the grid, or pass a config object for the CheckColumn. Note that the checkbox selection column should not be configured with a field, since it is linked to grid selection and not to record data

• checkboxIndex : Number/String

  Positions the checkbox column at the provided index or to the right of a provided column id. Defaults to 0 or to the right of an included RowNumberColumn

• checkboxOnly : Booleanfalse

  Select rows only when clicking in the checkbox column. Requires cell selection config to be false and checkbox to be set to true. This setting was previously named rowCheckboxSelection

• showCheckAll : Booleanfalse

  Set to true to add a checkbox to the selection column header to select/deselect all rows. Requires checkbox to also be set to true. Not supported when Store is configured with lazyLoad

• showCheckAllInGroupRows : Booleanfalse

  Set to true to add a checkbox to group rows to be able to check/uncheck all group members

• deselectFilteredOutRecords : Booleanfalse

  Set to true to deselect records when they are filtered out

• includeChildren : Boolean/Stringfalse

  Set to true to also select/deselect child nodes when a parent node is selected by toggling the checkbox. Set to 'always' to always select/deselect child nodes.

• includeParents : Boolean/'all'/'some'false

  Set to all or true to auto select parent if all its children gets selected. If one gets deselected, the parent will also be deselected. Set to 'some' to select parent if one of its children gets selected. The parent will be deselected if all children gets deselected.

• preserveSelectionOnPageChange : Booleanfalse

  In row selection mode, this flag controls whether the Grid should preserve its selection when loading a new page of a paged data store. Defaults to false.

• preserveSelectionOnDatasetChange : Booleantrue

  In row selection mode, this flag controls whether the Grid should preserve its selection of cells / rows when loading a new dataset (assuming the selected records are included in the newly loaded dataset)

• deselectOnClick : Booleanfalse

  Toggles whether the Grid should deselect a selected row or cell when clicking it

• dragSelect : Booleanfalse

  Set to true to enable multiple selection by dragging. Requires to also be set to true. Also requires the RowReorder feature to be set to gripOnly

• selectOnKeyboardNavigation : Booleantrue

  Set to false to disable auto-selection by keyboard navigation. This will activate the select keyboard shortcut

• column : Booleanfalse

  Set to true to be able to select whole columns of cells by clicking the header. Requires cell to be set to true. Not supported when Store is configured with lazyLoad

• rowNumber : Boolean/RowNumberColumnConfigfalse

  Set to true, or a config object to add a RowNumberColumn which, when clicked, selects the row

• selectRecordOnCell : Booleantrue

  Set to false not to include the record in the selectedRecords array when one of the record row's cells is selected

Has a corresponding runtime selectionMode property.

The key to use when saving this object's state in the stateProvider. If this config is not assigned, and stateful is not set to false, the id (if explicitly specified) will be used as the stateId.

If neither of these is given, the loadState and saveState methods will need to be called directly to make use of the stateProvider.

For single page applications (SPA's), or multi-page applications (MPA's) that have common, stateful components on multiple pages, the stateId should be unique across all stateful components (similar to DOM element id's). MPA's that want each page to be isolated can more easily achieve that isolation using the prefix.

The StateProvider to use to save and restore this object's state. By default, state will be saved using the default state provider.

This config is useful for multi-page applications that have a set of common components that want to share state across pages, as well as other components that want their state to be isolated. One of these groups of stateful components could be assigned an explicit stateProvider while the other group could use the default state provider.

This value can be one of the following:

• false to not use an explicitly assigned id as the component's stateId (this is only necessary when there is a stateProvider).
• An array of strings naming the config properties to save in the component's state object.
• An object whose truthy keys are the config properties to save in the component's state object.

These last two uses of the stateful config property do not apply to components that have a complex state, as described in the State mixin documentation.

This config property is typically set by derived classes to a value including any config property that the user can affect via the user interface. For example, the collapsed config property is listed for a Panel since the user can toggle this config property using the collapse tool.

The events that, when fired by this component, should trigger it to save its state by calling saveState.

 class MyStatefulComponent extends Base.mixin(State) {
     static configurable = {
         statefulEvents : [ 'change', 'resize' ]
     };
 }

In the above example, saveState will be called any time an instance of this class fires the change or resize event.

This config is typically set by derived classes as a way to ensure saveState is called whenever their persistent state changes.

Partners this Timeline panel with another Timeline in order to sync their region sizes (sub-grids like locked, normal will get the same width), start and end dates, view preset, zoom level and scrolling position. All these values will be synced with the timeline defined as the partner.

Can be specified as:

• A Timeline instance reference

• A string selector: widget type (e.g. 'gantt'), id selector (e.g. '#myGantt'), or attribute selector (e.g. '[ref=myGantt]')

• To add a new partner dynamically see addPartner method.

• To remove existing partner see removePartner method.

• To check if timelines are partners see isPartneredWith method.

Column widths and hide/show state are synced between partnered schedulers when the column set is identical.

An object with format { fromDay, toDay, fromHour, toHour } that describes the working days and hours. This object will be used to populate TimeAxis include property.

Using it results in a non-continuous time axis. Any ticks not covered by the working days and hours will be excluded. Events within larger ticks (for example if using week as the unit for ticks) will be stretched to fill the gap otherwise left by the non-working hours.

As with end dates, toDay and toHour are exclusive. Thus toDay : 6 means that day 6 (saturday) will not be included.

NOTE: When this feature is enabled Zooming feature is not supported. It's recommended to disable zooming controls:

new Scheduler({
    zoomOnMouseWheel          : false,
    zoomOnTimeAxisDoubleClick : false,
    ...
});

Has a corresponding runtime workingTime property.

An empty function by default, but provided so that you can override it. This function is called each time a resource time range is rendered into the schedule. It's called with resourceTimeRangeRecord, resourceRecord, and renderData params.

By default, the DOM markup of a resource time range bar includes placeholders for 'cls' and 'style'. The cls property is a DomClassList which will be added to the main element. The style property is an inline style declaration for the main element.

IMPORTANT: When returning content, be sure to consider how that content should be encoded to avoid XSS (Cross-Site Scripting) attacks. This is especially important when including user-controlled data such as the event's name. The function encodeHtml as well as xss can be helpful in these cases.

resourceTimeRangeRenderer({ resourceTimeRangeRecord, resourceRecord, renderData }) {
    renderData.style = 'color:white'; // You can use inline styles too.

    // Property names with truthy values are added to the resulting elements CSS class.
    renderData.cls.isModified = resourceTimeRangeRecord.isModified;

    // Or, you can treat it as a string, but this is less efficient, especially
    // if your renderer wants to *remove* classes that may be there.
    renderData.cls += ' extra-class';

    return StringHelper.xss`${DateHelper.format(resourceTimeRangeRecord.startDate, 'YYYY-MM-DD')}:
    ${resourceTimeRangeRecord.name}`;
}

Added by the ResourceTimeRanges feature, only available when that feature is enabled.

Record field from which the histogram data will be collected.

histogram = new TimelineHistogram({
    ...
    series : {
        s1 : {
            type : 'bar'
        }
    },
    dataModelField : 'foo',
    store : new Store({
        data : [
            {
                id   : 'r1',
                name : 'Record 1',
                foo  : [
                    { s1 : 200 },
                    { s1 : 150 },
                    { s1 : 175 },
                    { s1 : 175 }
                ]
            },
            {
                id   : 'r2',
                name : 'Record 2',
                foo  : [
                    { s1 : 100 },
                    { s1 : 150 },
                    { s1 : 175 },
                    { s1 : 175 }
                ]
            }
        ]
    })
});

Alternatively getRecordData function can be used to build a record's histogram data dynamically.

A Function which returns a CSS class name to add to a path element built for an outline type series. The following parameters are passed:

A Function which if provided should return a DOM configuration object for a path element built for an outline type series. The function accepts a default prepared DOM configuration in an argument which then can be processed and returned.

The following parameters are passed to the function:

A function, or name of a function which builds histogram data for the provided record.

See also dataModelField allowing to load histogram data from a record field.

Object enumerating data series for the histogram. The object keys are treated as the series identifiers and values are objects that must contain two properties:

• type A String, either 'bar' or 'outline'
• field A String, the name of the property to use from the data objects in the data option.

histogram = new TimelineHistogram({
    ...
    series : {
        s1 : {
            type  : 'bar',
            field : 's1'
        },
        s2 : {
            type  : 'outline',
            field : 's2'
        }
    },
    store : new Store({
        data : [
            {
                id            : 'r1',
                name          : 'Record 1',
                histogramData : [
                    { s1 : 200, s2 : 100 },
                    { s1 : 150, s2 : 50 },
                    { s1 : 175, s2 : 50 },
                    { s1 : 175, s2 : 75 }
                ]
            },
            {
                id            : 'r2',
                name          : 'Record 2',
                histogramData : [
                    { s1 : 100, s2 : 100 },
                    { s1 : 150, s2 : 125 },
                    { s1 : 175, s2 : 150 },
                    { s1 : 175, s2 : 75 }
                ]
            }
        ]
    })
});

Array of objects representing the scale column scale points. The config basically is a mapping to the column scalePoints config.

If the config value is not provided the column will try reading it from the displayed record field (scalePoints field is expected by default).

new TimelineHistogram({
    scalePoints : [
        { text : '8h', value : 8 },
        { text : '16h', value : 16 },
        { text : '24h', value : 24 }
    ]
})

Has a corresponding runtime scalePoints property.

Check for CSS compatibility and inclusion related issues and try to auto fix them. Performs the following checks:

• Detects usage of .b-fa class for icons. Since v7, FontAwesome is no longer built-in, the standard .fa class should be used instead.
• Detects missing FontAwesome font. With FontAwesome no longer built-in, this must be included separately by the app. If it is not included, it tries to autoload it from CDN.
• Checks for presence of a Bryntum CSS. Theme and structural CSS was separated in v7, both structural CSS and a theme must be included. If they are not, it tries to autoload them from CDN.

Defaults to true in Grid, Scheduler, Scheduler Pro, Gantt, Calendar and TaskBoard.

The maximum zoom level to which zoomIn will work.

When using smooth zoom:

This config accepts a number which indicates the maximum smooth zoom level allowed. Since smooth zoom levels are generated based on the provided presets, it is often instead easier to pass a preset name. Passing hourAndDay would prevent zooming further in than that, so for example the minuteAndHour preset would not be reachable.

const scheduler = new Scheduler({
  smoothZoom   : true,
  maxZoomLevel : 'hourAndDay'
});

When using legacy zoom:

Defaults to the number of ViewPresets available, see presets for information. Unless you have modified the collection of available presets, the max zoom level is milliseconds.

Has a corresponding runtime maxZoomLevel property.

The minimum zoom level to which zoomOut will work.

When using smooth zoom:

This config accepts a number which indicates the minimum smooth zoom level allowed. Since smooth zoom levels are generated based on the provided presets, it is often instead easier to pass a preset name. Passing weekAndDayLetter would prevent zooming further out than that, so for example the weekDateAndMonth preset would not be reachable.

const scheduler = new Scheduler({
  smoothZoom   : true,
  minZoomLevel : 'weekAndDayLetter'
});

When using legacy zoom:

Defaults to 0 (year ticks).

Has a corresponding runtime minZoomLevel property.

When true, all zoom operations (zoomIn, zoomOut, zoomInFull, zoomOutFull) will use the smooth zoom system instead of jumping between discrete preset levels. This provides finer-grained control over zoom levels by interpolating tick sizes between presets.

When enabled:

• zoomIn() and zoomOut() step through smooth zoom levels proportionally
• zoomInFull() and zoomOutFull() can animate to min/max smooth zoom levels
• Mouse wheel zooming uses smooth incremental steps
• The animate option is supported for smooth animated zooming

Factor multiplied with wheel delta to calculate smooth zoom level changes when zooming with mouse wheel or trackpad pinch gestures. A higher value means faster zooming.

The default value of 2 means that a wheel delta of -1 would zoom in 2 smooth zoom levels.

Has a corresponding runtime zoomFactor property.

When this container is used as a tab in a TabPanel, these items are added to the TabBar when this container is the active tab.

new TabPanel({
    appendTo : targetElement,
    height   : '25em',
    items: {
        firstTab : {
            title: 'First',
            items: {
                name : { type: 'textfield', label: 'Name' }
            },
            tabBarItems : [{
                type    : 'button',
                text    : 'Add tab',
                onClick : 'up.onAddTabClick'
            }]
        }
    },

    onAddTabClick({ value }) {
        this.add({
            type  : 'container',
            title : 'New tab',
            items : {
                button : {
                    type : 'button',
                    text : 'Click me',
                    onClick() {
                        Toast.show('Awesome!');
                    }
                }
            }
        });
    }
});