close

Filter

loading table of contents...

Studio Developer Manual / Version 2207

Table Of Contents

9.16.6 Component States

CoreMedia Studio uses state mixins to support different component states, such as validation, read-only, highlighting, overflow behavior or text alignment. To apply a state to a component, simply implement the corresponding interface.

The following list contains state mixin interfaces, provided by CoreMedia Studio:

  • IValidationStateMixin

  • IReadOnlyStateMixin

  • IHighlightableMixin

  • IOverflowBehaviourMixin

  • ITextAlignMixin

State mixins provide functions to dynamically add or change CSS classes to a component. This is more robust than simply adding a CSS class by passing it to the cls configuration. The following example shows how an error state can be added to a button:

import Panel from "@jangaroo/ext-ts/panel/Panel";
import Button from "@jangaroo/ext-ts/button/Button";
import ValidationState from "@coremedia/studio-client.ext.ui-components/mixins/ValidationState";
import ValidationStateMixin from "@coremedia/studio-client.ext.ui-components/mixins/ValidationStateMixin";

class MyForm extends Panel {

  #newButton: Button & ValidationStateMixin;

  //...

  updateButtonState(): void {
    if (this.#hasErrors()) {
      this.#newButton.validationState = ValidationState.ERROR;
    } else {
      this.#newButton.validationState = null;
    }
  }
}

Example 9.83. Set Validation State


The Studio Theme provides SCSS mixins that apply styles to CSS classes added by state mixins. Therefore, it is important to always include the Studio Theme SCSS mixin besides the Ext JS SCSS mixin. You can change styles by passing certain parameters or by setting global variables.

Search Results

Table Of Contents
warning

Your Internet Explorer is no longer supported.

Please use Mozilla Firefox, Google Chrome, or Microsoft Edge.