State

Configs

4
stateful: Boolean | Object | String[]

This value can be one of the following:

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

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

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

statefulEvents: Object | String[]= ""

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

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

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

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

stateId: String

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

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

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

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

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

Properties

4

Class hierarchy

isState: Boolean= truereadonly
Identifies an object as an instance of State class, or subclass thereof.
isState: Boolean= truereadonlystatic
Identifies an object as an instance of State class, or subclass thereof.

Other

isStateful: Booleanreadonly

Returns true if this instance implements the State interface.

State

state: Object

Gets or sets a component's state

Functions

4

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.

ParameterTypeDescription
stateObject

The state object to apply to this instance.

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.

Returns: Object

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.

ParameterTypeDescription
stateIdString

An overriding key to use instead of this object's stateId.

reloadBoolean

Pass true to load the state even if previously loaded.

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.

ParameterTypeDescription
optionsObject | String

Options that affect the state saving process or, if a string, the state id.

options.idString

The state id for the saved state (overrides stateId).

options.immediateBoolean

Pass true to save the data synchronously instead of on a delay.

Events

2

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

// Adding a listener using the "on" method
state.on('beforeStateApply', ({ state }) => {

});
ParameterTypeDescription
stateObject

State object config

Fired before state is saved by the StateProvider. Allows editing the state object or preventing the operation.

// Adding a listener using the "on" method
state.on('beforeStateSave', ({ state }) => {

});
ParameterTypeDescription
stateObject

State object config

Event handlers

2

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

new State({
    onBeforeStateApply({ state }) {

    }
});
ParameterTypeDescription
stateObject

State object config

Called before state is saved by the StateProvider. Allows editing the state object or preventing the operation.

new State({
    onBeforeStateSave({ state }) {

    }
});
ParameterTypeDescription
stateObject

State object config