MessageDialog
Widget

Singleton

A singleton class which shows common dialogs, similar to the native browser APIs (though these methods do not block the UI thread):

confirm shows a confirmation dialog with Ok / Cancel buttons
alert shows a dialog with a message
prompt shows a dialog with a text input field

targetElement.classList.add('widgetRow'); new Button({ appendTo : targetElement, text : 'confirm()', onClick : async() => { const result = await MessageDialog.confirm({ title : 'The big question', message : 'Do one legged ducks swim in circles?', okButton : 'Yes', cancelButton : 'No', rootElement : targetElement // Not needed outside of docs }); Toast.show(`You answered ${result === MessageDialog.okButton ? 'Yes' : 'No'}`); } }); new Button({ appendTo : targetElement, text : 'prompt()', onClick : async() => { const result = await MessageDialog.prompt({ title : 'Information required!', message : 'Enter your name', rootElement : targetElement // Not needed outside of docs }); if (result.button === MessageDialog.okButton) { Toast.show(`You wrote ${result.text}`); } } }); new Button({ appendTo : targetElement, text : 'alert()', onClick : () => { MessageDialog.alert({ title : 'Upgrade required!', message : 'Internet Explorer is not supported!', rootElement : targetElement // Not needed outside of docs }); } });

Note: Class is a singleton and all members listed below can be accessed as static ones.

No results

Properties

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

isDelayable : Booleantrue

READONLY

static

ADVANCED
Delayable

Identifies an object as an instance of Delayable class, or subclass thereof.
isEvents : Booleantrue

READONLY

static

ADVANCED
Events

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

READONLY

static

ADVANCED
KeyMap

Identifies an object as an instance of KeyMap class, or subclass thereof.
isLocalizable : Booleantrue

READONLY

static

ADVANCED
Localizable

Identifies an object as an instance of Localizable class, or subclass thereof.
isRTL : Booleantrue

READONLY

static

ADVANCED
RTL

Identifies an object as an instance of RTL class, or subclass thereof.
isResizable : Booleantrue

READONLY

static

ADVANCED
Resizable

Identifies an object as an instance of Resizable class, or subclass thereof.
isState : Booleantrue

READONLY

static

ADVANCED
State

Identifies an object as an instance of State class, or subclass thereof.
isToolable : Booleantrue

READONLY

static

ADVANCED
Toolable

Identifies an object as an instance of Toolable class, or subclass thereof.
configurable : Object

internal

static
Container
A class property getter for the configuration properties of the class, which can be overridden by configurations passed at construction time.

Unlike a normal static property, this property is only ever used for the class that defines it (as in, hasOwnProperty). It is retrieved for all classes in a class hierarchy, to gather their configs individually and then combine them with those of derived classes.

For example, a Label might declare a text config like so:
```
 class Label extends Base {
     static configurable = {
         text : null
     };
 }
```
The text config is automatically inherited by classes derived from Label. By implementing get configurable(), derived classes can change the default value of inherited configs, or define new configs, or both.

When a config property is declared in this way, the class author can also implement either of two special methods that will be called when the config property is assigned a new value:
- changeText()
- updateText()
In the example above, the Label class could implement a changeText() method, an updateText() method, or both. The generated property setter ensures these methods will be called when the text property is assigned.

The generated setter (for text in this example) performs the following steps:
- If the class defines a changeText() method, call it passing the new value and the current value: changeText(newText, oldText).
  Then:
  - If changeText() exits without returning a value (i.e., undefined), exit and do nothing further. The assumption is that the changer method has done all that is required.
  - Otherwise, the return value of changeText() replaces the incoming value passed to the setter.
- If the new value (or the value returned by changeText()) is !== to the current value:
  - Update the stored config value in this._text.
  - If the class defines an updateText() method, call it passing the new value and the previous value. updateText(newText, oldText)
Resolving a value from an owner

By specifying a value starting with 'up.' for a config, the config system will resolve that value by examining the ownership hierarchy. It will walk up the hierarchy looking for a property matching the name (or dot separated path) after 'up.'. If one is found, the value will be read and used as the initial value.
```
class Parent extends Base {
    static get configurable() {
        return [
          'importantValue'
        ]
    }
}

class Child extends Base {
    static get configurable() {
        return [
          'value'
        ]
    }
}

const parent = new Parent({
    importantValue : 123
});

const child = new Child({
    owner : parent,
    // Will be resolved from the owner
    value : 'up.importantValue'
});

console.log(child.value); // logs 123
```
Please note that this is for now a one way one time binding, the value will only be read initially and not kept up to date on later changes.

Value Merging

When a config property value is an object, the value declared by the base class is merged with values declared by derived classes and the value passed to the constructor.
```
 class Example extends Base {
     static configurable = {
         config : {
             foo : 1,
             bar : 2
         }
     };
 }

 class Example2 extends Example {
     static configurable = {
         config : {
             bar : 42,
             zip : 'abc'
         }
     };
 }

 let ex = new Example2({
     config : {
         zip : 'xyz'
     }
 });
```
The result of the merge would set config to:
```
 ex.foo = {
     foo : 1,    // from Example
     bar : 42,   // from Example2
     zip : 'xyz' // from constructor
 }
```
Config Options

Some config properties require additional options such as declarative information about the config that may be useful to automate some operation. Consider a Button. It could declare that its text config affects the rendered HTML by applying a render property to the config definition. Its base class could then examine the config definition to find this property.

To support this, config options ca be declared like so:
```
 class Button extends Widget {
     static configurable = {
         text : {
             value   : null,
             $config : {
                 render : true
             }
         }
     };
 }
```
The $config property can alternatively be just the names of the options that should be enabled (set to true).

For example, the following is equivalent to the above:
```
 class Button extends Widget {
     static configurable = {
         text : {
             value   : null,
             $config : 'render'
         }
     };
```
Default Value

It is common to set a config to a null value to take advantage of internal optimizations for null values. In most cases the fact that this produces undefined as the actual initial value of the config is acceptable. When this is not acceptable, a config can be declared like so:
```
 class Widget {
     static configurable = {
         disabled : {
             $config : null,
             value   : null,
             default : false
         }
     };
```
The default property above determines the value of the config while still gaining the benefits of minimal processing due to the null value of the value property.
declarable : String[]

internal

static
Container
A class property getter to add additional, special class properties.

For example, a class adds a declarable class property like so:
```
 class Something extends Base {
     static get declarable() {
         return ['extra'];
     }

     static setupExtra(cls, meta) {
         // use cls.extra
     }
 }
```
A derived class can then specify this property like so:
```
 class Derived extends Something {
     static get extra() {
         // return extra information
     }
 }
```
When the Derived class is initialized, the setupExtra() method is called and Derived is passed as the argument. It is also the this pointer, but the parameter is minifiable. The second argument passed is the $meta object for the class.

Classes are initialized at the first occurrence of the following:
- An instance is created
- The class $meta property is accessed
defaultConfig : Object

internal

static
Container
A legacy class property getter for the default configuration of the class, which can be overridden by configurations passed at construction time. We recommend using configurable instead.

Unlike a normal static property, this property is only ever used for the class that defines it (as in, hasOwnProperty). It is retrieved for all classes in a class hierarchy, to gather their configs individually and then combine them with those of derived classes.

For example, a Store might declare its url config like so:
```
 class Store extends Base {
     static get defaultConfig() {
         return {
             url : null
         };
     }
 }
```
The url config is automatically inherited by classes derived from Store. By implementing get defaultConfig(), derived classes can change the default value of inherited configs, or define new configs, or both. When defining new configs, however, configurable is preferred.

Config properties introduced to a class by this declaration do not participate in value merging and do not get a generated setter. Config properties introduced by a base class using configurable can be set to a different value using defaultConfig and in doing so, the values will be merged as appropriate for configurable.
properties : Object

internal

static
Container

A class property getter for the default values of internal properties for this class.

renderConfigs : Object/String[]

internal

static

Container

This property declares the set of config properties that affect a Widget's rendering, i.e., the configs used by the compose method.

For example:

 class Button extends Widget {
     static renderConfigs = [ 'cls', 'iconCls', 'text' ];
 }

Alternatively this can be an object:

 class Button extends Widget {
     static renderConfigs = {
         cls     : true,
         iconCls : true,
         text    : true
     };
 }

delayable : Object.

internal

static
Delayable
This class property returns an object that specifies methods to wrap with configurable timer behaviors.

It is used like so:
```
 class Foo extends Base.mixin(Delayable) {
     static get delayable() {
         return {
             expensiveMethod : 500
         };
     }

     expensiveMethod() {
         this.things();
         this.moreThings();
         this.evenMoreThings();
     }
 }
```
With the above in place, consider:
```
 let instance = new Foo();

 instance.expensiveMethod();
```
Instead of the above code immediately calling the expensiveMethod(), it will start a timer that will invoke the method 500ms later. Because expensiveMethod() is an instance method, each instance of Foo will have its own timer.

NOTE: Only instance methods are currently supported (i.e., only non-static methods).

Options

The value of each key configures how the method will be scheduled. If the value is a number, it is promoted to a config object of type='buffer' as in the following:
```
 class Foo extends Base.mixin(Delayable) {
     static get delayable() {
         return {
             expensiveMethod : {
                 type  : 'buffer',
                 delay : 500
             }
         };
     }
 }
```
The type property of the config object must be one of three values. Other options can be provided depending on the type:
- buffer
  Other options:
  - delay (Number) : The number of milliseconds to wait before calling the underlying method. A value of 0 is equivalent to setting immediate: true.
  - immediate (Boolean) : Set to true to call immediately (effectively disabling the buffer).
- raf (short for "request animation frame")
- idle (short for "request idle callback") Not available on Safari
  Other options:
  - cancelOutstanding (Boolean) : Set to true to cancel any pending animation frame requests and schedule a new one on each call.
  - immediate (Boolean) : Set to true to call immediately.
- throttle
  Other options:
  - delay (Number) : The number of milliseconds to wait after each execution before another execution takes place. A value of 0 is equivalent to setting immediate: true.
  - immediate (Boolean) : Set to true to call immediately (effectively disabling the throttle).
While immediate: true can be specified at the class level, it is more typical to set it on the instance's method as described below.

Delayable Method API

Delayable methods have a consistent API to manage their scheduling. This API is added to the methods themselves.

For example:
```
 let instance = new Foo();

 instance.expensiveMethod();         // schedule a call in 500ms
 instance.expensiveMethod.isPending; // true
 instance.expensiveMethod.cancel();
 instance.expensiveMethod.flush();
 instance.expensiveMethod.now();

 instance.expensiveMethod.delay = 10;
 instance.expensiveMethod();         // schedule a call in 10ms
```
isPending (Boolean, readonly)

This boolean property will be true if a call has been scheduled, and false otherwise.

cancel()

Cancels a pending call if one has been scheduled. Otherwise this method does nothing.

flush()

Cancels the timer and causes the pending call to execute immediately. If there is no pending call, this method does nothing.

now()

Cancels the timer (if one is pending) and executes the method immediately. If there is no pending call, this method will still call the underlying method.
$meta : Object

internal

READONLY

static
Container
An object owned by this class that does not share properties with its super class. This object may contain other properties which are added as needed and are not documented here.
- class : Function
  
  The class constructor that owns the meta object
- super : Object
  
  The $meta object for the super class. This is null for Base
- config : Object
  
  The object holding the default configuration values for this class
- configs : Object
  
  An object keyed by config name that holds the defined configs for the class The value of each property is a Config instance
- forkConfigs : Boolean
  
  This will be true if the default configuration values for this class (in the config property of the meta object) must be forked to avoid object sharing, or if the object can be passed to Object.create() for efficiency
- hierarchy : Function[]
  
  The array of classes in the ancestry of this class. This will start with Base at index 0 and ends with this class
- properties : Function[]
  
  The array of classes that define a "static get properties()" getter
$name : String

static

ADVANCED
Container
Class name getter. Used when original ES6 class name is minified or mangled during production build. Should be overridden in each class which extends Widget or it descendants.
```
class MyNewClass extends Widget {
    static $name = 'MyNewClass';
}
```
all : Widget[]

internal

READONLY

static
Container

Returns an array containing all existing Widgets. The returned array is generated by this call and is not an internal structure.
convertPinchToMousewheel : Boolean

static
Container
By default, on touch devices, a two finger pinch gesture where both touch points are within a Bryntum widget is converted to a CTRL/wheel event injected at the mid-point between the two initial touches.

This is so that Scheduler and Calendar views which are configured to zoomOnMouseWheel will zoom on pinch on touch devices.

That disables the platform's native pinch-zooming. Set this static flag to false to disable the conversion:
```
    Widget.convertPinchToMousewheel = false;
```
focusVisible : Boolean

internal

READONLY

static
Container

This property yields true if the currently focused element has been reached through other means than mouse click. If the activeElement matches :focus-visible.
recomposeAsync : Boolean

internal

static
Container

Get/set the recomposeAsync config for all widgets. Setting this value will set the config for all existing widgets and will be the default value for newly created widgets. Set this value to null to disable the default setting for new widgets while leaving existing widgets unaffected.
tooltip : Tooltip

READONLY

static
Container

The shared Tooltip instance which handles tooltips which are not configured with newInstance : true.

type : String

static

Container

Widget name alias which you can use in the items of a Container widget.

class MyWidget extends Widget {
    static get type() {
       return 'mywidget';
    }
}

const panel = new Panel({
   title : 'Cool widgets',
   items : {
      customWidget : { type : 'mywidget', html : 'Lorem ipsum dolor sit amet...' }
   }
});

cancelButton : Number

READONLY

The enum value for the Cancel button
okButton : Number

READONLY

The enum value for the OK button
keyMap : Object<String, KeyMapConfig>
KeyMap
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
     }
 }
```
emptyArray : Array

internal

READONLY
Container

An empty array that can be used as a default value.
emptyObject : Object

internal

READONLY
Container

An empty object that can be used as a default value.
cls : String/Object
Container
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
 }
```
isContainer : Booleantrue

READONLY

ADVANCED
Container

Identifies an object as an instance of Container class, or subclass thereof.
isPanel : Booleantrue

READONLY

ADVANCED
Panel

Identifies an object as an instance of Panel class, or subclass thereof.
isPopup : Booleantrue

READONLY

ADVANCED
Popup

Identifies an object as an instance of Popup class, or subclass thereof.
isWidget : Booleantrue

READONLY

ADVANCED
Container

Identifies an object as an instance of Widget class, or subclass thereof.
firstItem : Widget

READONLY
Container

Returns the first widget in this Container.
gridColumns : Number

internal
Container

Number of columns to use in a grid layout. Applied as grid-template-columns: repeat(n, auto). Also applies the b-columns CSS class to the container.
hasChanges : Boolean

READONLY
Container

Returns true if any of the fields in this container have been changed since the container was loaded with a record.

Note that this value does not update during typing. The field's change event which is triggered when the field is blurred causes this to be updated.

For example when processing a "close" button click, this value will be in its correct state.
initialItems : Boolean

internal

READONLY
Container

This property is true until the container's initial items config has been processed. This property is set to false by the updateItems method.
inputFieldAlign : 'start'/'end'
Container

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'.

new SlideToggle({ insertFirst : targetElement, label : 'Align input elements to the right side', style : 'margin-bottom: 3em', checked : true, onChange({ value }) { container.inputFieldAlign = value ? 'end' : 'start'; } }); const container = new Container({ appendTo : targetElement, labelPosition : 'align-before', inputFieldAlign : 'end', style : 'grid-template-columns: 1fr 1fr;', items : { name : { type : 'text', value : 'Clark Kent', label : 'Name' }, score : { type : 'number', label : 'Score', value : 100 }, canFly : { type : 'slidetoggle', label : 'Can fly', value : true }, ownsBlueSuit : { type : 'slidetoggle', label : 'Owns a blue suit', value : true }, kryptonite : { type : 'slidetoggle', label : 'Kryptonite allergy', value : true } } });
isSettingValues : Boolean

READONLY
Container

Returns true if currently setting values. Allow fields to change highlighting to distinguishing between initially setting values and later on changing values.
isValid : Boolean

READONLY
Container

Returns true if all contained fields are valid, otherwise false
items : (WidgetConfig|MenuItemConfig|Widget)/Object<String, WidgetConfig | MenuItemConfig>
Container
A property, which, when read, returns an array of the child items of this container in rendered order.

This property may also be set to change the child items of the container. Just as in the initial items configuration, the new value may either be an array of Widgets/Widget configs or an object.

If specified as an Object, the property names are used as the child Widget's ref name, and the value is the child Widget/Widget config.

When setting this, any items which are only in the outgoing child items which were created by this container from raw config objects are destroyed.

Usage patterns:
```
myContainer.items = {
    name : {
        type  : 'textfield',
        label : 'User name'
    },
    age : {
        type  : 'numberfield',
        label : 'User age'
    }
};
```
or
```
myContainer.items = [{
    ref   : 'name',
    type  : 'textfield',
    label : 'User name'
},
    ref   : 'age',
    type  : 'numberfield',
    label : 'User age'
}];
```
labelPosition : 'before'/'above'/'align-before'/'auto'/null
Container

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.
lastItem : Widget

READONLY
Container

Returns the last widget in this Container.

rendition : String/Object<String, String>/null

Container

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

values : Object<String, Object>

Container

Retrieves or sets all values from/to contained widgets.

The property set or read from a contained widget is its defaultBindProperty.

This defaults to the value for fields.

You may add child widgets which may accept and yield a value to/from another property, such as a Button having its href set.

Accepts and returns a map, using name, ref or id (in that order) as keys.

const container = new Container({
    appendTo : document.body,
    items    : {
        firstName : {
            type : 'textfield
        },
        surName : {
            type : 'textfield
        }
        saveButton : {
            type                : 'button',
            text                : 'Save',
            defaultBindProperty : 'href'
            href                : '#'
        }
    }
});

container.values = {
    firstName  : 'Clark',
    surname    : 'Kent',
    saveButton : '#save-route'
};

bbar : Toolbar

READONLY
Panel

Get toolbar Toolbar docked to the bottom of the panel
labelWidth : Number/null
Container
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 });
```
If your goal is simply to have labels be same width to have fields to align nicely in a form like layout, consider using the labelPosition config with the value 'align-before' instead, which will use CSS Grid to align all labels in one column and all fields in another, without the need to specify a fixed width.
tbar : Toolbar

READONLY
Panel

Get toolbar Toolbar docked to the top of the panel
tools : Object<String, Tool | ToolConfig>
Toolable

The tools as specified by the tools configuration. Each is a Tool instance which may be hidden, shown and observed and styled just like any other widget.
The : String[]

internal

READONLY
Container

Used by the Widget class internally to create CSS classes based on this Widget's inheritance chain to allow styling from each level to apply.

For example Combo would yield "["b-widget", "b-field", "b-text-field", "b-picker-field", "b-combo"]"

May be implemented in subclasses to add or remove classes from the super.widgetClassList
appendTo : HTMLElement/String
Container

Element (or the id of an element) to append this widget's element to. Can be configured, or set once at runtime. To access the element of a rendered widget, see element.
content : String

ADVANCED
Container

Set HTML content safely, without disturbing sibling elements which may have been added to the contentElement by plugins and features. When specifying html, this widget's element will also have the htmlCls added to its classList, to allow targeted styling.
contentElement : HTMLElement

READONLY

ADVANCED
Container

The child element into which content should be placed. This means where html should be put, or, for Containers, where child items should be rendered.
dataset : Object
Container

Get widgets elements dataset or assign to it
element : HTMLElement

READONLY
Container

Get this widget's encapsulating HTMLElement, which is created along with the widget but added to DOM at render time.
focusElement : HTMLElement

READONLY

ADVANCED
Container

Get this widget's primary focus holding element if this widget is itself focusable, or contains focusable widgets.
focusability : Focusability

internal

READONLY
Container

Returns an object describing the focus and keyboard navigation aspects of this widget's focusElement.
focusableElement : HTMLElement

READONLY

ADVANCED
Container

Returns this widget's focusElement if that element can currently be given focus (e.g., this widget is not disabled, or hidden).
hasPainted : Boolean

internal

READONLY
Container

This property is set to true after processing the initial paint for the widget. It remains false during the initial paint. The intended use for this flag is to avoid processing that will be handled by the first paint (similar to not firing events during the widget's initial configuration). If this field is true, the initial paint has already taken place, otherwise, it has yet to run. This field differs from isPainted which checks that the widget's element is attached to the DOM.
html : String/Function/DomConfig/DomConfig[]/VueConfig+ 1 more
Container

The HTML to display initially or a function returning the markup (called at widget construction time).

This may be specified as the name of a function which can be resolved in the component ownership hierarchy, such as 'up.getHTML' which will be found on an ancestor Widget.
id : String
Container

Get/set widgets id
insertBefore : HTMLElement/String
Container

Element (or element id) to insert this widget before. If provided, appendTo config is ignored.
insertFirst : HTMLElement/String
Container

Element (or element id) to append this widget element to, as a first child. If provided, appendTo config is ignored.
overflowElement : HTMLElement

READONLY

ADVANCED
Container

The child element which scrolls if any. This means the element used by the scrollable.
staticClassList : DomClassList

internal

READONLY
Container

Returns the DomClassList for this widget's class. This object should not be mutated.
style : CSSStyleDeclaration/String/Object
Container

Get/set widgets elements style. The setter accepts a cssText string or a style config object, the getter always returns a CSSStyleDeclaration

uiClassList : DomClassList

internal

READONLY

Container

Returns the cross-product of the classes staticClassList with each ui as a DomClassList instance.

For example, a Combo with a ui: 'foo bar' would produce:

     new DomClassList({
         'b-field-ui-foo'       : 1,
         'b-text-field-ui-foo'   : 1,
         'b-picker-field-ui-foo' : 1,
         'b-combo-ui-foo'       : 1,

         'b-field-ui-bar'       : 1,
         'b-text-field-ui-bar'   : 1,
         'b-picker-field-ui-bar' : 1,
         'b-combo-ui-bar'       : 1
     });

A Panel with a ui: 'foo bar' would produce:

     new DomClassList({
         'b-panel-ui-foo' : 1,
         'b-panel-ui-bar' : 1
     });

uiClasses : String[]

internal

READONLY

Container

Returns the cross-product of the classes staticClassList with each ui as an array of strings.

For example, a Combo with a ui: 'foo bar' would produce:

 [
     'b-widget-foo', 'b-field-foo', 'b-text-field-foo', 'b-picker-field-foo', 'b-combo-foo',
     'b-widget-bar', 'b-field-bar', 'b-text-field-bar', 'b-picker-field-bar', 'b-combo-bar'
 ]

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.
anchorSize : Number[]

READONLY
Container

Returns an [x, y] array containing the width and height of the anchor arrow used when aligning this Widget to another Widget or element.

The height is the height of the arrow when pointing upwards, the width is the width of the baseline.
maximizeOnMobile : Number/String
Container

Only valid if this Widget is floating.

When configured as true, this widget uses isMobile to maximize itself on mobile devices.
maximized : Boolean
Popup

Set to true to make this widget take all available space in the visible viewport.
x : Number
Container

Moves this Widget to the desired x position.

Only valid if this Widget is floating and not aligned or anchored to an element.
y : Number
Container

Moves this Widget to the desired y position.

Only valid if this Widget is floating and not aligned or anchored to an element.
keyMapElement : HTMLElement

private

READONLY
KeyMap

Override to attach the keyMap keydown event listener to something else than this.element
keyMapSubComponents : Object

private

READONLY
KeyMap

Override to make keyMap resolve subcomponent actions to something else than this.features.
alignSelf : String
Container

Get/set this widget's align-self flexbox setting. This may be set to modify how this widget is aligned within the cross axis of a flexbox layout container.
collapsed : Boolean
Panel

Controls whether the panel is collapsed (the body of the panel is hidden while only the header is visible). Only valid if the panel is collapsible.
collapsing : Boolean

READONLY
Panel

This property is true if the panel is currently collapsing.
collapsingExpanding : Boolean

internal

READONLY
Panel

This property is true if the panel is currently either collapsing or expanding.
expanding : Boolean

READONLY
Panel

This property is true if the panel is currently expanding.
flex : Number/String
Container
Get element's flex property. This may be configured as a single number or a format string:
```
 <flex-grow> <flex-shrink> <flex-basis>
```
Numeric-only values are interpreted as the flex-grow value.
height : Number/String
Container

Get element's offsetHeight or sets its style.height, or specified height if element no created yet.
layout : Layout
Container

The layout as an instance of Layout. This is a helper class which adds and removes child widgets to this Container's DOM and applies CSS classes based upon its requirements.

The card layout provides for showing one child widget at a time, and provides a switching API to change which child widget is currently active.
layoutStyle : Object
Container
The CSS style properties to apply to the contentElement.

By default, a Container's contentElement uses flexbox layout, so this config may contain the following properties:
- flexDirection default 'row'
- flexWrap
- flexFlow
- justifyContent
- alignItems
- alignContent
- placeContent
margin : Number/String
Container

Get element's margin property. This may be configured as a single number or a TRBL format string. numeric-only values are interpreted as pixels.
maxHeight : String/Number
Container

Get/set element's maxHeight. Getter returns max-height from elements style, which is always a string. Setter accepts either a String or a Number (which will have 'px' appended). Note that like height, reading the value will return the numeric value in pixels.
maxWidth : String/Number
Container

Get/set elements maxWidth. Getter returns max-width from elements style, which is always a string. Setter accepts either a String or a Number (which will have 'px' appended). Note that like width, reading the value will return the numeric value in pixels.
minHeight : String/Number
Container

Get/set element's minHeight. Getter returns min-height from elements style, which is always a string. Setter accepts either a String or a Number (which will have 'px' appended). Note that like height, reading the value will return the numeric value in pixels.
minWidth : String/Number
Container

Get/set elements minWidth. Getter returns min-width from elements style, which is always a string. Setter accepts either a String or a Number (which will have 'px' appended). Note that like width, reading the value will return the numeric value in pixels.
scrollable : Scroller
Container

Accessor to the Scroller which can be used to both set and read scroll information.
width : Number/String
Container

Get elements offsetWidth or sets its style.width, or specified width if element not created yet.
config : Object

READONLY

ADVANCED
Container

Returns a copy of the full configuration which was used to configure this object.
isConstructing : Boolean

READONLY

ADVANCED
Container

This property is set to true before the constructor returns.
isDestroyed : Boolean

READONLY
Container

This property is set to true by destroy after destruction.

It is also one of the few properties that remains on the object after returning from destroy(). This property is often checked in code paths that may encounter a destroyed object (like some event handlers) or in the destruction path during cleanup.
isDestroying : Boolean

READONLY

ADVANCED
Container

This property is set to true on entry to the destroy method. It remains on the objects after returning from destroy(). If isDestroyed is true, this property will also be true, so there is no need to test for both (for example, comp.isDestroying || comp.isDestroyed).
assignedId : String

private

READONLY
Container

Get id assigned by user (not generated id)

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

cellInfo : CellWidgetContext

READONLY

Container

An object providing the record and column for a widget embedded inside a WidgetColumn

columns : [
   {
       type   : 'widget',
       widgets: [{
           type     : 'button',
           icon     : 'fa fa-trash',
           onAction : ({ source : btn }) => btn.cellInfo.record.remove()
       }]
   }
]

disabled : Boolean/'inert'
Container

Get/set element's disabled state. Set to 'inert' to also set the inert DOM attribute.
hasGeneratedId : Boolean

private
Container

true if no id was set, will use generated id instead (widget1, ...). Toggle automatically on creation
innerItem : Boolean

internal
Container

This readonly property is true for normal widgets in the items of a container. It is false for special widgets such as a tbar.
localeHelper : LocaleHelper

READONLY

ADVANCED
Localizable

Get the global LocaleHelper
localeManager : LocaleManager

READONLY

ADVANCED
Localizable

Get the global LocaleManager
readOnly : Boolean
Container

Get/set element's readOnly state. This is only valid if the widget is an input field, or contains input fields at any depth. Updating this property will trigger a readOnly event.

All descendant input fields follow the widget's setting. If a descendant widget has a readOnly config, that is set.
ref : String

READONLY
Container

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.
tab : Tab

READONLY
Container

The tab created for this widget when it is placed in a TabPanel.
title : String
Panel

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.

The title is not HTML-encoded

The title is not HTML-encoded
modalMask : HTMLElement

internal

READONLY
Popup

Returns the modal mask element for this Popup correctly positioned just below this Popup.
rtl : Boolean
RTL

If a widget is rendered into an element which has computed style direction:rtl, this property will be set to true

Rendering a widget into an element which, either by a CSS rule, or by its inline style has an explicit direction will cause the widget to use that direction regardless of the owning document's direction.

In this way, an RTL widget may operate normally inside an LTR page and vice versa.
record : Model
Container

Record whose values will be used to populate fields in the container.

Any descendant widgets of this Container with a name property (or a ref if no name is configured) will have its value set to the value of that named property of the record.

If no record is passed, the widget has its value set to null.

To strictly match by the name property, configure strictRecordMapping as true.

When fields loaded from this record are changed by user input, the hasChanges property will be set.
strictRecordMapping : Booleanfalse
Container

Specify true to match fields by their name property only when assigning a record, without falling back to ref.
resizable : Boolean/Objectfalse
Resizable
Configure this property to allow the widget/component to be resized. Pressing Shift while resizing will constrain the aspect ratio.
- false (the default) disables resizing entirely.
- true enables resizing on all edges and corners.
- An Object allows fine-grained control, for example specifying which edges or corners have handles.
Example usage:
```
// Resizable with default handles (all edges/corners)
new SomePopup({
  resizable : true
});

// Resizable with only start and bottom edges active
new SomePopup({
  resizable : {
    handles : {
      top    : false,
      end    : false,
      bottom : true,
      start  : true,
      // corners also available: topStart, topEnd, bottomStart, bottomEnd
      // all omitted properties default to `true` if unspecified
    }
  }
});
```
- minWidth : Number50
  
  The minimum width of the element.
- maxWidth : Number
  
  The maximum width of the element.
- minHeight : Number50
  
  The minimum height of the element.
- maxHeight : Number
  
  The maximum height of the element
- handles : Object
  
  An object controlling which edges/corners are resizable.
- topStart : Booleantrue
  
  Resizable from top-start corner
- top : Booleantrue
  
  Resizable from top edge
- topEnd : Booleantrue
  
  Resizable from top-end corner
- end : Booleantrue
  
  Resizable from end edge
- bottomEnd : Booleantrue
  
  Resizable from bottom-end corner
- bottom : Booleantrue
  
  Resizable from bottom edge
- bottomStart : Booleantrue
  
  Resizable from bottom-start corner
- start : Booleantrue
  
  Resizable from start edge
isStateful : Boolean

READONLY

ADVANCED
State

Returns true if this instance implements the State interface.
isStatefulActive : Boolean

internal

READONLY
State

Returns true if this instance is ready to participate in state activities.
state : Object
State

Gets or sets a component's state
statefulId : String

internal
State

Returns the state key to use for this instance. This will be either the stateId or the id (if explicitly specified and stateful is not false).
statefulness : Object

private

READONLY
State

Returns an object whose truthy keys are the config properties to include in this object's state.
hidden : Boolean
Container

Get/set the widget hidden state.

Note: hidden : false does not mean that this widget is definitely visible. To ascertain visibility, use the isVisible property.
isVisible : Boolean

READONLY
Container

Determines visibility by checking if the Widget is hidden, or any ancestor is hidden and that it has an element which is visible in the DOM
column : Number
Container

Programmatic control over which column to start in when used in a grid layout.
hideMode : 'clip'/'display'/'opacity''display'

internal
Container
Determines how a widget will prevent itself from being seen when hidden is set to true or the hide method is called.

The allowed values are as follows:
- 'display' (the default) to hide the widget using display: none style
- 'clip' to hide the widget using CSS clip style (only valid if position: absolute)
- 'opacity' to hide the widget using opacity : 0 style (and pointer-events : none)
isComposable : Boolean

internal

READONLY
Container

Returns true if this class uses compose() to render itself.
overflowTwin : Widget

internal

READONLY
Container

This widget's twin that is placed in an overflow menu when this widget has been hidden by its owner, typically a Toolbar due to overflow. The overflowTwin is created lazily by ensureOverflowTwin.
span : Number
Container

Programmatic control over how many columns to span when used in a grid layout.
containsFocus : Boolean

READONLY
Container

This property is set to true when focus is within the ownership tree of this Widget.

This means that either the DOM of this widget contains focus, or, any widget DOM who's owner axis leads to this widget contains focus.

For example a DateField with its DatePicker open and being interacted with will still have containsFocus set.
nextSibling : Widget

READONLY
Container

Get this Widget's next sibling in the parent Container, or, if not in a Container, the next sibling widget in the same parentElement.
owner : Widget/Column

READONLY
Container

The owning Widget of this Widget. If this Widget is directly contained (i.e. it is one of the items of a Container), this property will be read-only, and will refer to the containing Widget.

If this property has not been set and this is a Popup with a forElement, this config will refer to that element's encapsulating Widget.

If this Widget is floating, this property should be set 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.

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.
parent : Widget
Container

Get this Widget's parent when used as a child in a Container,
previousSibling : Widget

READONLY
Container

Get this Widget's previous sibling in the parent Container, or, if not in a Container, the previous sibling widget in the same parentElement.
visibleChildCount : Number

READONLY
Container

The number of visible child items shown in this Container.
widgetMap : Object<String, Widget>

READONLY
Container

An object which contains a map of descendant widgets keyed by their ref. All descendant widgets will be available in the widgetMap.

Functions

Functions are methods available for calling on the class

hasConfigPath( object, path )
: Boolean

internal

static
Container

Determines if the specified config property exists in an instance of Base
mergeConfigs( baseConfig, ...configs )
: Object

internal

static
Container

Returns the merge of the baseConfig and config config objects based on the configs defined by this class.
new( ...configs )
: Base

private

static
Container

Factory version of the Base constructor. Merges all arguments to create a config object that is passed along to the constructor.
onClassMixedIn( )

internal

static
Container

This optional class method is called when a class is mixed in using the mixin() method.
applyDefaults( defaultsObj )

static

ADVANCED
Container
Merges the provided default configuration values with the existing defaults for this class (and its subclasses).

This method allows you to define additional or override existing default property values that apply to all instances of the class.
```
// All my input fields should be clearable
 Field.applyDefaults({
     clearable : true
});
```
getDefaultConfiguration( )
: Object

internal

static
Container

Gets the full defaultConfig block for this object's entire inheritance chain all the way up to but not including Base
setupConfigs( meta, configs, simple )

private

static
Container

This method is called as part of setupClass(). It will process the configurable() return object and the defaultConfig return object.
setupDelayableMethods( delayable, cls )

private

static
Delayable

This method initializes the delayable methods on this class.
create( config )
: Object

static
Container

Creates a new widget instance based on the passed config object. The config object is require to have a type property which determines what kind of widget to create.
destroy( ...args )

static

ADVANCED
Container
Destroys the provided objects by calling their destroy method. Skips empty values or objects that are already destroyed.
```
Base.destroy(myButton, toolbar1, helloWorldMessageBox);
```
initClass( )

static

ADVANCED
Container
Call once per class for custom widgets to have them register with the Widget class, allowing them to be created by type.

For example:
```
class MyWidget extends Widget {
  static get type() {
    return 'mywidget';
  }
}
MyWidget.initClass();
```

localize( text, templateData )

: String

internal

static

Localizable

Get localized string, returns null if no localized string found.

// Simple localization
const someText = SomeClass.localize('L{text}');

// With template data
const someText = SomeClass.localize('L{template}', { count : 5 }); // Number in object
const someText = SomeClass.localize('L{template}', { name : 'John' }); // String in object
const someText = SomeClass.localize('L{template}', 'John'); // Strings parameter

attachTooltip( element, configOrText )
: HTMLElement

static
Container
Attached a tooltip to the specified element.
```
Widget.attachTooltip(element, {
  text: 'Useful information goes here'
});
```
fromElement( element, type, limit )
: Widget/null

static
Container

Returns the Widget which owns the passed element (or event).

This is aliased on the global bryntum object as bryntum.fromElement.
fromSelector( selector )
: Widget/null

static
Container
Returns the Widget which owns the passed CSS selector.
```
const button = Widget.fromSelector('#my-button');
```
getById( id )
: Widget

static
Container

Returns the widget with the specified id.
isOfTypeName( type )
: Boolean

static

ADVANCED
Container

Checks if an obj is of type using object's $name property and doing string comparison of the property with the type parameter.
mixin( ...mixins )
: Function

static

ADVANCED
Container
Applies one or more mixins to this class and returns the produced class constructor.

For example, instead of writing this:
```
 class A extends Delayable(Events(Localizable(Base))) {
     // ...
 }
```
Using this method, one would write this:
```
 class A extends Base.mixin(Localizable, Events, Delayable) {
     // ...
 }
```
If one of the mixins specified has already been mixed into the class, it will be ignored and not mixed in a second time.
setupClass( meta )

internal

static
Container

This method is called only once for any class. This can occur when the first instance is created or when the $meta object is first requested.

constructor( ...args )

ADVANCED
Container

Base constructor, passes arguments to construct.
alert( options )
: Promise

ASYNC

Shows an alert popup with a message. The returned promise resolves when the button is clicked.
confirm( options )
: Promise

ASYNC

Shows a confirm dialog with "Ok" and "Cancel" buttons. The returned promise resolves passing the button identifier of the button that was pressed (okButton or cancelButton).
prompt( options )
: Promise

ASYNC

Shows a popup with a basic TextField along with a message. The returned promise resolves when the dialog is closed and yields an Object with a button (okButton or cancelButton) and a text property with the text the user provided
_thisIsAUsedExpression( expression )

internal
Container

This method is required to help unused getters to survive production build process. Some tools, like angular, will remove unused code in production build, making our side-effected getters behind, breaking code heavily.
bindConfigs( target, mapping, options )
: Function

internal
Container

Creates a binding between the specified config properties of this object and the specified target object. Changes to these config properties of this object will be reflected to the target object as they occur, and (optionally), vise-versa.

Returns a function to call to remove the binding.
delay( fn, delay, name )
: Number

private
Container

Delays the execution of the passed function by the passed time quantum, or if the time is omitted or not a number, delays until the next animation frame. Note that this will use setTimeout || requestAnimationFrame if this class mixes in Delayable, otherwise it uses the global methods. The function will be called using this object as its execution scope.
hasConfig( name )
: Boolean

internal
Container

Returns true if this instance has a non-null value for the specified config. This will not activate a lazy config.
peekConfig( name )
: *

internal
Container

Returns the value of an uningested config without ingesting the config or transforming it from its raw value using its changeXxxxx method.
trackDetacher( name, detacher )

private
Container

Tracks a detacher function for the specified listener name.
triggerConfig( name )
: Boolean

internal
Container

Ensures that the specified config is initialized if it is needed. If there is a config value specified, and it was initialized by this call, this method returns true. If there was a config value specified, and it was already initialized, this method returns false. If there was no value specified for the given config, this method returns null.

This is not the same as just reading the property, because some property getters exist that do not actually just read the config value back, but instead produce some result. Reading such properties to incidentally trigger a possible config initializer can lead to incorrect results. For example, the Combo items config.
triggerConfigs( group )
: String[]

internal
Container

This call will activate any pending lazy configs that were assigned a string value equal to the group parameter.
untrackDetachers( eventer )

private
Container

Removes all detacher functions for the specified Events object. This is called by the removeAllListeners method on that object which is typically called by its destroy invocation.
updateConfiguration( props )

internal
Container

This is intended to set a block of configs during configuration. It is not intended to be used outside of the configuration phase.

If any of the properties are not yet ingested from the configuration object, they will be set and ingested in the normal order.

Properties which are already ingested are set immediately.
classHierarchy( topClass )
: Function[]

private
Container

Used by the Widget and GridFeatureManager class internally. Returns the class hierarchy of this object starting from the topClass class (which defaults to Base).

For example classHierarchy(Widget) on a Combo would yield [Widget, Field, TextField, PickerField, Combo]
getConfig( name, ...names )
: *

internal
Container
Returns the value of the specified config property. This is a method to allow property getters to be explicitly called in a way that does not get optimized out.

The following triggers the getter call, but optimizers will remove it:
```
 inst.foo;   // also raises "expression has no side-effects" warning
```
Instead, do the following to trigger a getter:
```
 inst.getConfig('foo');
```
getProperties( )
: Object

private
Container

Gets the full properties block for this class's entire inheritance chain all the way up to but not including Base
onConfigChange( info )

internal
Container

This method is called when any config changes.
add( ...toAdd )
: Widget/Widget[]

Container

Appends the passed widget / widgets or config(s) describing widgets to this Container.

If the widgets specify a weight, they are inserted at the correct index compared to the existing items weights.
createWidget( widget )

internal
Container

This function converts a Widget config object into a Widget.
getAt( index )
: Widget

Container

Returns the widget at the specified index in this Container.
getPositionableLocation( position )
: HTMLElement[]

internal
Container

Returns a 2-element array of [parentElement, insertBefore] that specifies where in the DOM to insert a child item based on its positionable config value.
getWidgetById( id )
: Widget

Container

Returns a directly contained widget by id
includes( widgetOrId )
: Boolean

Container

Determines if the passed widget is an immediate child of this Container.
insert( toAdd, index )
: Widget

Container

Inserts the passed widget into this Container at the specified position.
onFieldChange( params )

internal
Container

A function called by descendant widgets after they trigger their 'change' event, in reaction to field changes. By default, implements the functionality for the autoUpdateRecord config.
processWidgetConfig( widgetConfig, addingTo )
: void/Boolean

Container

This function is called prior to creating widgets, override it in subclasses to allow containers to modify the configuration of each widget.

When adding a widget to a container hierarchy, each parent containers' processWidgetConfig will be called.

Returning false from the function prevents the widget from being added at all.
remove( ...toRemove )
: Widget/Widget[]

Container

Removes the passed child/children from this Container.
removeAll( )
: Widget[]

Container

Removes all children from this Container.
resetValues( values )
Container
Resets field values and dirty tracking.
- Calling with no arguments restores the values captured at the last clean setValues call (i.e. the baseline established when setValues(...) ran, typically via setting a record).
- Calling with an object applies those values and establishes a new clean baseline.
setValues( values, options )
Container

Sets values into descendant fields/widgets.

Accepts either a data Model instance or a plain object whose keys map to field names/refs/ids. The second parameter is passed through to child widgets so they can customize how they resolve and assign their value (mirrors previous internal usage).

Change tracking (dirty state) is now managed here.

When called, existing dirty state is cleared and a new baseline of initialValues is captured.
setupWidgetConfig( widgetConfig, type )
: WidgetConfig

internal
Container

This method combines container defaults
emptyCache( )

internal
Container

Clear caches, forces all calls to fromCache to requery dom. Called on render/rerender.
focus( options )
Container

Focuses this widget if it has a focusable element.
fromCache( query, childrenfalse, element )
: HTMLElement/HTMLElement[]/null

internal
Container

Gets dom elements in the view. Caches the results for faster future calls.
getStaticWidgetClasses( topMostBase, suffix )
: DomClassList

internal
Container

Returns a DomClassList computed from the topMostBase (e.g., Widget or Panel) with the given suffix appended to each widgetClass.
asap( fn, options )
: Function

internal
Delayable

Returns a function that when called will schedule a call to fn via queueMicrotask.
buffer( fn, options )
: Function

internal
Delayable

Wraps a function with another function that delays it specified amount of time, repeated calls to the wrapper resets delay.
cancelAnimationFrame( handle )

internal
Delayable

Relays to native cancelAnimationFrame and removes from tracking.
cancelIdleCallback( handle )

internal
Delayable

Relays to native cancelIdleCallback and removes from tracking.
cancelMicrotask( task )

internal
Delayable

Given the return value from a call to queueMicrotask, cancels the pending call. This method is provided for symmetry with other timer functions, such as setTimeout.
clearInterval( id )

internal
Delayable

clearInterval wrapper
clearTimeout( idOrName )

internal
Delayable

clearTimeout wrapper, either call with timeout id as normal clearTimeout or with timeout name (if you specified a name to setTimeout()) property to null.
createOnFrame( fn, args, thisObj, cancelOutstandingfalse )
: Function

Delayable

Creates a function which will execute once, on the next animation frame. However many time it is called in one event run, it will only be scheduled to run once.
decorateWrapFn( me, wrapFn, cancelFnclearTimeout )
: Function

private
Delayable

Decorates the supported wrapFn with additional methods and an isPending readonly property. These decorations are available to user code to help manage the scheduling behavior of the buffered function.
hasTimeout( name )

internal
Delayable

Check if a named timeout is active
makeInvoker( me, fn, wrapFn, options )
: Function

private
Delayable

Creates and returns a function that will call the user-supplied fn.
queueMicrotask( fn, args, options )
: Function

internal
Delayable

Equivalent to the native queueMicrotask, but will be cancelled automatically on destroy. When queueMicrotask is not available, the provided fn is called using Promise.resolve().then(fn), which behaves similarly.

Returns a function that when called will cancel the impending call. This function can also be viewed as a timer id that can be passed to cancelMicrotask
raf( fn, options )
: Function

internal
Delayable

Returns a function that when called will schedule a call to fn on the next animation frame.
requestAnimationFrame( fn, extraArgs, thisObj )
: Number

internal
Delayable

Relays to native requestAnimationFrame and adds to tracking to have call automatically canceled on destroy.
requestIdleCallback( fn, extraArgs, thisObj )
: Number

internal
Delayable

Relays to native requestIdleCallback and adds to tracking to have call automatically canceled on destroy.
setInterval( fn, delay, name )
: Number

internal
Delayable

Same as native setInterval, but will be cleared automatically on destroy
setTimeout( timeoutSpec )
: Number

internal
Delayable

Same as native setTimeout, but will be cleared automatically on destroy. If a propertyName is supplied it will be used to store the timeout id.
throttle( fn, options )

internal
Delayable

Create a "debounced" function which will call on the "leading edge" of a timer period. When first invoked will call immediately, but invocations after that inside its buffer period will be rejected, and one invocation will be made after the buffer period has expired.

This is useful for responding immediately to a first mousemove, but from then on, only calling the action function on a regular timer while the mouse continues to move.
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
detachListeners( name )

ADVANCED
Container

Removes all event listeners that were registered with the passed names.
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
alignTo( spec )
Container

If this Widget is floating or positioned, and visible, aligns the widget according to the passed specification. To stop aligning, call this method without arguments.
setXY( x, y )
Container

Moves this Widget to the x,y position. Both arguments can be omitted to just set one value.

For floating Widgets, this is a position in the browser viewport.For positioned Widgets, this is a position in the element it was rendered into.
showBy( align )
: Promise

ASYNC
Container

Show aligned to another target element or Widget or Rectangle
toFront( )
Container

Only valid for floating Widgets. Moves to the front of the visual stacking order.

addKeyBinding( key, action )

internal

KeyMap

Add a key binding to this widget's keyMap.

// Add a key binding to the widget to call its own onCtrlEnter method when Ctrl+Enter is pressed.
myWidget.addKeyBinding('Ctrl+Enter', 'onCtrlEnter');

matchKeyMapEntry( keyEvent, keyMapthis.keyMap )
: String

internal
KeyMap

Returns the keyMap property name which matches the passed KeyboardEvent if any.
mergeKeyMaps( target, source, subPrefix )

private
KeyMap

This function is used for merging two keyMaps with each other. It can be used for example by a Grid's feature to merge the fetature's keyMap into the Grid's with the use of a subPrefix.
performKeyMapAction( )
: Promise

private

ASYNC
KeyMap

Called on keyMapElement keyDown

removeKeyBinding( action )

internal

KeyMap

Remove a key binding to this widget's keyMap.

// Add a key binding to the widget to call its own onCtrlEnter method when Ctrl+Enter is pressed.
myWidget.removeKeyBinding('Ctrl+Enter', 'onCtrlEnter');

resolveKeyMapAction( )

private
KeyMap

Resolves correct this and handler function. If subComponent (action includes a dot) it will resolve in keyMapSubComponents (defaults to this.features).

For example, in feature configurable: keyMap: { ArrowUp: 'navigateUp' }

Will be translated (by InstancePlugin) to: `keyMap: { ArrowUp: 'featureName.navigateUp' }

And resolved to correct function path here.

Override to change action function mapping.
afterConfigure( )

internal
Container

Base implementation so that all subclasses and mixins may safely call super.afterConfigure. This is called by the Base class after the configure method has been called. At this point, all configs have been applied.

This method allows all classes in the hierarchy to inject functionality either before or after the super.afterConstruct();
afterConstruct( )

internal
Container

Base implementation so that all subclasses and mixins may safely call super.afterConstruct.

This is called by the Base class after the construct method has been called.

At this point, all configs have been applied.

This method allows all classes in the hierarchy to inject functionality either before or after the super.afterConstruct();
configure( config )

internal
Container

Called by the Base constructor to apply configs to this instance. This must not be called.
construct( ...args )

ADVANCED
Container

Base implementation applies configuration.

Subclasses need only implement this if they have to initialize instance specific properties required by the class. Often a construct method is unnecessary. All initialization of incoming configuration properties can be done in a set propName implementation.
destroyProperties( ...properties )

internal
Container
Destroys the named properties if they have been initialized, and if they have a destroy method. Deletes the property from this object. For example:
```
 this.destroyProperties('store', 'resourceStore', 'eventStore', 'dependencyStore', 'assignmentStore');
```
finalizeInit( )

internal
Container

Called by the Base constructor after all configs have been applied.
finishConfigure( )

internal
Container

Base implementation so that all subclasses and mixins may safely call super.finishConfigure.

This is called by the Base class before exiting the configure method.

At this point, all configs have been applied, but the isConfiguring property is still set.

This method allows all classes in the hierarchy to inject functionality into the config phase.
setConfig( config )

ADVANCED
Container

Sets configuration options this object with all the properties passed in the parameter object. Timing is taken care of. If the setter of one config is called first, and references the value of another config which has not yet been set, that config will be set just in time, and the new value will be used.
startConfigure( )

internal
Container

Base implementation so that all subclasses and mixins may safely call super.startConfigure.

This is called by the Base class before setting configuration properties, but after the active initial getters have been set, so all configurations are available.

This method allows all classes in the hierarchy to force some configs to be evaluated before others.

L( text, templateData )

: String

ADVANCED

Localizable

Localization function on the class instance that mixes Localizable.

// Simple localization
const someText = someClass.L('L{text}');

// With template data
const someText = someClass.L('L{template}', { count : 5 }); // Number in object
const someText = someClass.L('L{template}', { name : 'John' }); // String in object
const someText = someClass.L('L{template}', 'John'); // Strings parameter

animateProperty( propertyName, newValue, duration1000, easing'linear' )
Container

Changes the value of a numeric property of this object smoothly over the specified duration.
callback( fn, thisObject, args )

ADVANCED
Container

Provides a way of calling callbacks which may have been specified as the name of a function and optionally adds scope resolution.

For example, if the callback is specified as a string, then if it is prefixed with 'this.' then the function is resolved in this object. This is useful when configuring listeners at the class level.

If the callback name is prefixed with 'up.' then the ownership hierarchy is queried using the owner property until an object with the named function is present, then the named function is called upon that object.

If a named function is not found, an error is thrown. If the function should be only called when present, and may not be present, add a ? as a suffix.
downloadTestCase( )
Container

Experimental helper function, extracts the currently used configs and wraps them as an app, downloading the resulting JS file.

This function is intended to simplify creating test cases for issue reporting on Bryntum's support forum.

optionalL( text, templateData, preventThrowfalse )

: String

internal

Localizable

Localization function to get an optional translation. The difference compared to L() is that it won't throw an error when the translation is missing even if configured with throwOnMissingLocale.

button.text = grid.optionalL('L{text}');

// With template data
const someText = someClass.optionalL('L{template}', { count : 5 }); // Number in object
const someText = someClass.optionalL('L{template}', { name : 'John' }); // String in object
const someText = someClass.optionalL('L{template}', 'John'); // Strings parameter

resolveCallback( handler, thisObj, enforceCallabilitytrue )
: Object

ADVANCED
Container

Provides a way of locating callbacks which may have been specified as the name of a function and optionally adds scope resolution.

For example, if the callback is specified as a string, then if it is prefixed with 'this.' then the function is resolved in this object. This is useful when configuring listeners at the class level.

If the callback name is prefixed with 'up.' then the ownership hierarchy is queried using the owner property until an object with the named function is present, then the named function is called upon that object.
toggleCollapsed( collapse )
: Boolean

Panel

Toggles collapsed state of the panel.
updateLocalization( )

ADVANCED
Localizable

Method that is triggered when applying a locale to the instance (happens on the instance construction steps and when switching to another locale).

The method can be overridden to dynamically translate the instance when locale is switched. When overriding the method please make sure you call super.updateLocalization().
collapsePanel( )
: Promise

ASYNC
Panel

Collapse the panel.
expandPanel( )
: Promise

ASYNC
Panel

Expand the panel.
close( )
: Promise

ASYNC
Popup

Performs the configured closeAction upon this popup. By default, the popup hides. The closeAction may be configured as 'destroy'.

Triggers: beforeClose
applyState( state )

ADVANCED
State

Applies the given state to this instance.

This method is not called directly, but is called when the state property is assigned a value.

This method is implemented by derived classes that have complex state which exceeds the simple list of config properties provided by stateful. In these cases, the super method can be called to handle any config properties that are part of the complex state. The default implementation of this method will only assign those config properties listed in stateful from the provided state object.
getState( )
: Object

ADVANCED
State

Returns this object's state information.

This method is not called directly, but is called to return the value of the state property.

This method is implemented by derived classes that have complex state which exceeds the simple list of config properties provided by stateful. In these cases, the super method can be called to gather the config properties that are part of the complex state. The default implementation of this method will only copy those config properties listed in stateful to the returned state object.
loadState( stateId, reloadfalse )
State

Loads this object's state from its stateProvider and applies it to its state.

This method only acts upon its first invocation for a given instance (unless true is passed for the reload parameter). This allows for flexibility in the timing of that call during the early stages of the instances' lifecycle. To reload the state after this time, manually assign the desired value to the state property or call this method and pass reload as true.

This method is called automatically during construction when a stateId or (in some cases) an explicit id is provided.
pruneState( state )
: Object

private
State

Returns an object that copies the stateful config properties from the provided state object.
saveState( options )
State

Saves this object's state to its stateProvider.

When a stateId or (in some cases) an explicit id is provided, this method will be called automatically any time a config property listed in stateful changes or when a stateful event is fired.

Derived classes are responsible for calling this method whenever the persistent state of the object changes.
hide( animatetrue )
: Promise

ASYNC
Container

Hide widget
show( options )
: Promise

ASYNC
Container

Shows this widget
addRefAccessor( name, key )

private
Container

Defines an element reference accessor on the class prototype. This accessor is used to flush any pending DOM changes prior to accessing such elements.
afterRecompose( )

internal
Container

This method is called following an update to the widget's rendered DOM.
animationsFinished( element, subtreetrue )
: Promise

internal

ASYNC
Container

Returns a Promise which resolves when all finite animations on or within the element are finished.

Pass subtree as false to only consider animations directly on the element.
announceAriaLive( message )
Container

Announces a text message that can be parsed by assistive technologies using an aria-live element.
attachRef( name, el, domConfig )

internal
Container

This method is called by DomHelper.createElement and DomSync.sync as new reference elements are created.
captureFocus( )
: Function

internal
Container

Returns a function that will set the focus (document.activeElement) to the most consistent element possible based on the focus state at the time this method was called. Derived classes can implement captureFocusItem() to refine this process to include logical items (e.g., a grid cell) that would be more stable than DOM element references.

If this widget does not contain the focus, the returned function will do nothing.
captureFocusItem( activeElement )
: Function

internal
Container

This method is called by captureFocus() when this widget contains the focus and it returns a function that restores the focus to the correct internal element. The returned function is only called if the current document.activeElement is different from the passed activeElement.

This method can be replaced by derived classes to capture stable identifiers for the currently focused, logical item (for example, a cell of a grid).
compose( )
: DomConfig

ADVANCED
Container

Returns a createElement config object that defines this widget's DOM structure. This object should be determined using configurable properties to ensure this method is called again if these properties are modified.

For more information see class documentation.
configureOverflowTwin( overrides )
: Object

internal
Container

This method returns the config object to use for creating this widget's overflowTwin.
createOverflowTwin( overrides )
: Widget

internal
Container

This method creates the overflowTwin for this widget. It is called by ensureOverflowTwin if the overflowTwin does not yet exist.

The config for the overflowTwin is produced by configureOverflowTwin.
detachRef( name, el, domConfig )

internal
Container

This method is called by DomSync.sync as reference elements are removed from the DOM.
disable( )
Container

Disable the widget
doCompose( )
: Object

private
Container

This method iterates the class hierarchy from Widget down to the class of this instance and calls any compose methods implemented by derived classes.
domSyncCallback( info )

internal
Container

Template method called during DOM updates. See DomSync.sync().
enable( )
Container

Enable the widget
ensureOverflowTwin( overrides, onCreate )
: Widget

internal
Container

This method returns the existing overflowTwin or creates it, if it has not yet been created (see createOverflowTwin).
executeAndAwaitAnimations( element, fn, animationCls )
: Promise

internal

ASYNC
Container

Executes a function which initiates animations, and waits for any animations within the passed element to complete.

Takes a snapshot of animations running before and after the function executes and waits for any animations started due to that function to finish.
exitFullscreen( )
: Promise

ASYNC
Container

Exits fullscreen mode
fixRefOwnerId( el, id, oldId )

private
Container

This method fixes the element's $refOwnerId when this instance's id is changing.
getFocusRevertTarget( )

internal
Container

This method finds a close sibling (or parent, or parent's sibling etc. recursively) to which focus can be directed in the case of revertFocus not having a focusable element from our focusInEvent.

This can happen when the "from" component is destroyed or hidden. We should endeavour to prevent focus escaping to document.body for accessibility and ease of use, and keep focus close.
getRenderContext( source )
: HTMLElement[]

internal
Container

Interprets the appendTo, insertBefore and insertFirst configs to return an array containing [parentElement, insertBefore]
isCollapsified( options )
: Boolean

internal
Container

This method determines if this widget (typically a Tool) should be placed in the header of the calling Panel.
isolateFieldChange( field )

internal
Container

Returns true if the given field's value change should be isolated (kept hidden by this widget). By default, this method returns the value of isolateFields for all fields.
mask( msg )
: Mask

Container

Mask the widget, showing the specified message
onAlignTargetOutOfView( target )

internal
Container

This method is called when the alignTo target element loses intersection with the visible viewport. That means it has been scrolled out of view, or becomes zero size, or hidden or is removed from the DOM.

The base class implementation hides by default.
onDisabled( disabled )

private
Container

Called when disabled state is changed. Override in subclass that needs special handling when being disabled.
realign( )

internal
Container

Called when an element which affects the position of this Widget's align target scrolls so that this can realign.

If the target has scrolled out of view, then this Widget is hidden.
recompose( )
: Promise

ASYNC

ADVANCED
Container
Calling this delayable method marks this widget as dirty. The DOM will be updated on the next animation frame:
```
 widget.recompose();

 console.log(widget.recompose.isPending);
 > true
```
A pending update can be flushed by calling flush() (this does nothing if no update is pending):
```
 widget.recompose.flush();
```
This can be combined in one call to force a DOM update without first scheduling one:
```
 widget.recompose.now();
```
rectangle( which'border', relativeTo, ignorePageScrollfalse )
: Rectangle

internal
Container

Returns the specified bounding rectangle of this widget.
rectangleOf( element, which'border', relativeTo, ignorePageScrollfalse )
: Rectangle

internal
Container

Returns the specified bounding rectangle of the specified child element of this widget.
requestFullscreen( )
: Promise

ASYNC
Container

Requests fullscreen display for this widget
resumeVisibility( triggerPainttrue )

internal
Container

Resumes visibility. If the suspension counter is returned to zero by this, then the paint event is triggered, causing a cascade of paint events on all descendants. This can be prevented by passing false as the only parameter.
revertFocus( force )

ADVANCED
Container

If this Widget contains focus, focus is reverted to the source from which it entered if possible, or to a close relative if not.
suspendVisibility( )

internal
Container

Temporarily changes the isVisible to yield false regardless of this Widget's true visibility state. This can be useful for suspending operations which rely on the isVisible property.

This increments a counter which resumeVisibility decrements.
template( me )

internal
Container

A function which, when passed an instance of this Widget, produces a valid HTML string which is compiled to create the encapsulating element for this Widget, and its own internal DOM structure.

Note that this just creates the DOM structure that this Widget owns. If it contains child widgets (Such as for example a grid), this is not included. The template creates own structure.

Certain elements within the generated element can be identified as special elements with a reference="name" property. These will be extracted from the element upon creation and injected as the named property into the Widget. For example, a TextField will have an input property which is its <input> element.
triggerFieldChange( params, triggertrue )

internal
Container

Triggers a 'change' event with the supplied params. After triggering it also calls onFieldChange() on each ancestor the implements that function, supplying the same set of params.
unmask( )
Container

Unmask the widget
validateDragStartEvent( e )
: Boolean

internal
Container

Validates a dragstart event with respect to the target element. Dragging is not normally initiated when the target is interactive such as an input field or its label, or a button. This may be overridden to provide custom drag start validation.
closest( selector, deep, limit )
: Widget/null

Container

Starts with this Widget, then Looks up the owner axis to find an ancestor, which matches the passed selector. The selector may be a widget type identifier, such as 'grid', or a function, which will return true when passed the desired ancestor.
contains( elementOrWidget, strict )
: Boolean

Container

Returns true if this widget is or contains the specified element or widget.
eachAncestor( fn )
: Boolean

Container

Iterate over all ancestors of this widget.

Note: Due to this method aborting when the function returns false, beware of using short form arrow functions. If the expression executed evaluates to false, iteration will terminate.
eachWidget( fn, deeptrue )
: Boolean

Container

Iterate over all widgets owned by this widget and any descendants.

Note: Due to this method aborting when the function returns false, beware of using short form arrow functions. If the expression executed evaluates to false, iteration will terminate.

Note: for Button class: Due to the menu config being a lazy config and only being converted to be a Menu instance just before it's shown, the menu will not be part of the iteration before it has been shown once.

Note: for PickerField class: Due to the picker config being a lazy config and only being converted to be a List instance just before it's shown, the picker will not be part of the iteration before it has been shown once.
getWidgetByRef( ref )
: Widget

internal
Container

Get a widget by ref, starts on self and traverses up the owner hierarchy checking widgetMap at each level. Not checking the top level widgetMap right away to have some acceptance for duplicate refs.
owns( target )
Container

Returns true if this Widget owns the passed Element, Event or Widget. This is based on the widget hierarchy, not DOM containment. So an element in a Combo's dropdown list will be owned by the Combo.
query( filter )
: Widget

Container

Returns the first descendant widgets, which the passed filter function returns true for.
queryAll( filter )
: Widget[]

Container

Returns an array of all descendant widgets which the passed filter function returns true for.
up( selector, deep, limit )
: Widget/*

Container

Looks up the owner axis to find an ancestor which matches the passed selector. The selector may be a widget type identifier, such as 'grid', or a function which will return true when passed the desired ancestor.

Events

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

beforeClose

ASYNC

PREVENTABLE
Popup

Fired when the close method is called and the popup is not hidden. May be vetoed by returning false from a handler.
beforeDestroy
Events

Fires before an object is destroyed.
beforeHide

PREVENTABLE
Container

Triggered before a widget is hidden. Return false to prevent the action.
beforeSetRecord
Container

Fired before this container will load record values into its child fields. This is useful if you want to modify the UI before data is loaded (e.g. set some input field to be readonly)
beforeShow

ASYNC

PREVENTABLE
Container

Triggered before a widget is shown. Return false to prevent the action.
beforeStateApply

PREVENTABLE
State

Fired before state is applied to the source. Allows editing the state object or preventing the operation.
beforeStateSave

PREVENTABLE
State

Fired before state is saved by the StateProvider. Allows editing the state object or preventing the operation.
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.
collapse
Panel

Fires when a Panel is collapsed using the collapsible setting.
destroy
Events

Fires when an object is destroyed.
dirtyStateChange
Container

Fires when a field is mutated and the state of the hasChanges property changes
elementCreated
Container

Triggered when a widget's element is available.
expand
Panel

Fires when a Panel is expanded using the collapsible setting.
focusIn
Container

Fired when focus enters this Widget.
focusOut
Container

Fired when focus exits this Widget's ownership tree. This is different from a blur event. focus moving from within this Widget's ownership tree, even if there are floating widgets will not trigger this event. This is when focus exits this widget completely.
hide
Container

Triggered after a widget was hidden
paint
Container

Triggered when a widget which had been in a non-visible state for any reason achieves visibility.

A non-visible state might mean the widget is hidden and has just been shown.

But this event will also fire on widgets when a non-visible (unrendered, or hidden) ancestor achieves visibility, for example a Popup being shown.

TLDR: This event can fire multiple times
readOnly
Container

Fired when a Widget's read only state is toggled
recompose

ADVANCED
Container

This event is fired after a widget's elements have been synchronized due to a direct or indirect call to recompose, if this results in some change to the widget's rendered DOM elements.
resize
Container

Fired when the encapsulating element of a Widget resizes only when monitorResize is true.
show
Container

Triggered after a widget is shown.
toolClick
Panel

A header tool has been clicked.

Event handlers

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

onBeforeClose

ASYNC

PREVENTABLE
Popup

Called when the close method is called and the popup is not hidden. May be vetoed by returning false from a handler.
onBeforeDestroy
Events

Called before an object is destroyed.
onBeforeHide

PREVENTABLE
Container

Called before a widget is hidden. Return false to prevent the action.
onBeforeSetRecord
Container

Called before this container will load record values into its child fields. This is useful if you want to modify the UI before data is loaded (e.g. set some input field to be readonly)
onBeforeShow

ASYNC

PREVENTABLE
Container

Called before a widget is shown. Return false to prevent the action.
onBeforeStateApply

PREVENTABLE
State

Called before state is applied to the source. Allows editing the state object or preventing the operation.
onBeforeStateSave

PREVENTABLE
State

Called before state is saved by the StateProvider. Allows editing the state object or preventing the operation.
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.
onCollapse
Panel

Called when a Panel is collapsed using the collapsible setting.
onDestroy
Events

Called when an object is destroyed.
onDirtyStateChange
Container

Called when a field is mutated and the state of the hasChanges property changes
onElementCreated
Container

Called when a widget's element is available.
onExpand
Panel

Called when a Panel is expanded using the collapsible setting.
onFocusIn
Container

Called when focus enters this Widget.
onFocusOut
Container

Called when focus exits this Widget's ownership tree. This is different from a blur event. focus moving from within this Widget's ownership tree, even if there are floating widgets will not trigger this event. This is when focus exits this widget completely.
onHide
Container

Called after a widget was hidden
onPaint
Container

Called when a widget which had been in a non-visible state for any reason achieves visibility.

A non-visible state might mean the widget is hidden and has just been shown.

But this event will also fire on widgets when a non-visible (unrendered, or hidden) ancestor achieves visibility, for example a Popup being shown.

TLDR: This event can fire multiple times
onReadOnly
Container

Called when a Widget's read only state is toggled
onRecompose

ADVANCED
Container

This event is called after a widget's elements have been synchronized due to a direct or indirect call to recompose, if this results in some change to the widget's rendered DOM elements.
onResize
Container

Called when the encapsulating element of a Widget resizes only when monitorResize is true.
onShow
Container

Called after a widget is shown.
onToolClick
Panel

A header tool has been clicked.

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-message-dialog-button-min-width	MessageDialog button min-width
--b-message-dialog-min-width	MessageDialog min-width

Source path

Core/widget/MessageDialog.js

MessageDialog
Widget

Singleton

Properties

Resolving a value from an owner

Value Merging

Config Options

Default Value

Options

Delayable Method API

`isPending` (Boolean, readonly)

`cancel()`

`flush()`

`now()`

Target element filtering

Delegation

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree6

Mixins8

Contents

MessageDialog Widget Singleton

Properties

Resolving a value from an owner

Value Merging

Config Options

Default Value

Options

Delayable Method API

isPending (Boolean, readonly)

cancel()

flush()

now()

Target element filtering

Delegation

Functions

Events

Event handlers

CSS variables

Source path

Inheritance tree6

Mixins8

Contents

MessageDialog
Widget

Singleton

`isPending` (Boolean, readonly)

`cancel()`

`flush()`

`now()`