State
Configs
4
Configs
4This value can be one of the following:
falseto not use an explicitly assigned id as the component's stateId (this is only necessary when there is a stateProvider).- An array of strings naming the config properties to save in the component's state object.
- An object whose truthy keys are the config properties to save in the component's state object.
These last two uses of the stateful config property do not apply to components that have a complex
state, as described in the State mixin documentation.
This config property is typically set by derived classes to a value including any config property that the user can affect via the user interface. For example, the collapsed config property is listed for a Panel since the user can toggle this config property using the collapse tool.
The events that, when fired by this component, should trigger it to save its state by calling saveState.
class MyStatefulComponent extends Base.mixin(State) {
static configurable = {
statefulEvents : [ 'change', 'resize' ]
};
}
In the above example, saveState will be called any time an instance of this class
fires the change or resize event.
This config is typically set by derived classes as a way to ensure saveState is called whenever their persistent state changes.
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
Properties
4Functions
4
Functions
4Applies 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.
| Parameter | Type | Description |
|---|---|---|
state | Object | 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.
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.
| Parameter | Type | Description |
|---|---|---|
stateId | String | An overriding key to use instead of this object's stateId. |
reload | Boolean | Pass |
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.
| Parameter | Type | Description |
|---|---|---|
options | Object | String | Options that affect the state saving process or, if a string, the state |
options.id | String | The state id for the saved state (overrides stateId). |
options.immediate | Boolean | Pass |
Events
2
Events
2Fired 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 }) => {
});| Parameter | Type | Description |
|---|---|---|
state | Object | 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 }) => {
});| Parameter | Type | Description |
|---|---|---|
state | Object | State object config |
Event handlers
2
Event handlers
2Called before state is applied to the source. Allows editing the state object or preventing the operation.
new State({
onBeforeStateApply({ state }) {
}
});| Parameter | Type | Description |
|---|---|---|
state | Object | State object config |
Called before state is saved by the StateProvider. Allows editing the state object or preventing the operation.
new State({
onBeforeStateSave({ state }) {
}
});| Parameter | Type | Description |
|---|---|---|
state | Object | State object config |