CKEditor Ecosystem Documentation
Search
Report an issue
Home/CKEditor 4/API
Class

CKEDITOR.ui.dialog.vbox

class
See source

Vertical layout box for dialog UI elements.

Filtering

Properties

  • eventProcessors : Object

    The event processor list used by getInputElement at UI element instantiation. The default list defines three on* events:

    See source
    1. onLoad - Called when the element's parent dialog opens for the first time.
    2. onShow - Called whenever the element's parent dialog opens.

    3. onHide - Called whenever the element's parent dialog closes.

      // This connects the 'click' event in CKEDITOR.ui.dialog.button to onClick // handlers in the UI element's definitions. CKEDITOR.ui.dialog.button.eventProcessors = CKEDITOR.tools.extend( {}, CKEDITOR.ui.dialog.uiElement.prototype.eventProcessors, { onClick : function( dialog, func ) { this.on( 'click', func ); } }, true );

Methods

  • constructor( dialog, childObjList, childHtmlList, htmlList, elementDefinition ) → vbox

    Creates a vbox class instance.

    See source

    Parameters

    dialog : dialog

    Parent dialog object.

    childObjList : Array

    Array of CKEDITOR.ui.dialog.uiElement objects inside this container.

    childHtmlList : Array

    Array of HTML code that correspond to the HTML output of all the objects in childObjList.

    htmlList : Array

    Array of HTML code that this element will output to.

    elementDefinition : uiElement

    The element definition. Accepted fields:

    • width (Optional) The width of the layout.
    • heights (Optional) The heights of individual cells.
    • align (Optional) The alignment of the layout.
    • padding (Optional) The padding width inside child cells.
    • expand (Optional) Whether the layout should expand vertically to fill its container.

    Returns

    vbox

  • accessKeyDown( dialog, key )

    The default handler for a UI element's access key down event, which tries to put focus to the UI element.

    See source

    Can be overridded in child classes for more sophisticaed behavior.

    Parameters

    dialog : dialog

    The parent dialog object.

    key : String

    The key combination pressed. Since access keys are defined to always include the CTRL key, its value should always include a 'CTRL+' prefix.

  • accessKeyUp( dialog, key )

    The default handler for a UI element's access key up event, which does nothing.

    See source

    Can be overridded in child classes for more sophisticated behavior.

    Parameters

    dialog : dialog

    The parent dialog object.

    key : String

    The key combination pressed. Since access keys are defined to always include the CTRL key, its value should always include a 'CTRL+' prefix.

  • disable()

    Disables a UI element.

    See source

  • enable()

    Enables a UI element.

    See source

  • focus() → uiElement

    chainable

    Puts the focus to the UI object. Switches tabs if the UI object isn't in the active tab page.

    See source
    uiElement.focus();

    Returns

    uiElement

    this

  • getChild( indices ) → Array | uiElement

    Gets a child UI element inside this container.

    See source
    var checkbox = hbox.getChild( [0,1] );
checkbox.setValue( true );

    Parameters

    indices : Array | Number

    An array or a single number to indicate the child's position in the container's descendant tree. Omit to get all the children in an array.

    Returns

    Array | uiElement

    Array of all UI elements in the container if no argument given, or the specified UI element if indices is given.

  • getDialog() → dialog

    Gets the parent dialog object containing this UI element.

    See source
    var dialog = uiElement.getDialog();

    Returns

    dialog

    Parent dialog object.

  • getElement() → element

    Gets the root DOM element of this dialog UI object.

    See source
    uiElement.getElement().hide();

    Returns

    element

    Root DOM element of UI object.

  • getInputElement() → element

    Gets the DOM element that the user inputs values.

    See source

    This function is used by setValue, getValue and focus. It should be overrided in child classes where the input element isn't the root element.

    var rawValue = textInput.getInputElement().$.value;

    Returns

    element

    The element where the user input values.

  • getValue() → Object

    Gets the current value of this dialog UI object.

    See source
    var myValue = uiElement.getValue();

    Returns

    Object

    The current value.

  • isChanged() → Boolean

    Tells whether the UI object's value has changed.

    See source
    if ( uiElement.isChanged() )
    confirm( 'Value changed! Continue?' );

    Returns

    Boolean

    true if changed, false if not changed.

  • isEnabled() → Boolean

    Determines whether an UI element is enabled or not.

    See source

    Returns

    Boolean

    Whether the UI element is enabled.

  • isFocusable() → Boolean

    Determines whether an UI element is focus-able or not. Focus-able is defined as being both visible and enabled.

    See source

    Returns

    Boolean

    Whether the UI element can be focused.

  • isVisible() → Boolean

    Determines whether an UI element is visible or not.

    See source

    Returns

    Boolean

    Whether the UI element is visible.

  • registerEvents( definition ) → uiElement

    chainable

    Registers the on* event handlers defined in the element definition.

    See source

    The default behavior of this function is:

    1. If the on* event is defined in the class's eventProcesors list, then the registration is delegated to the corresponding function in the eventProcessors list.
    2. If the on* event is not defined in the eventProcessors list, then register the event handler under the corresponding DOM event of the UI element's input DOM element (as defined by the return value of getInputElement).

    This function is only called at UI element instantiation, but can be overridded in child classes if they require more flexibility.

    Parameters

    definition : uiElement

    The UI element definition.

    Returns

    uiElement

    this

  • selectParentTab() → uiElement

    chainable

    Selects the parent tab of this element. Usually called by focus() or overridden focus() methods.

    See source
    focus : function() {
    this.selectParentTab();
    // do something else.
}

    Returns

    uiElement

    this

  • setValue( value, noChangeEvent ) → uiElement

    chainable

    Sets the value of this dialog UI object.

    See source
    uiElement.setValue( 'Dingo' );

    Parameters

    value : Object

    The new value.

    noChangeEvent : Boolean

    Internal commit, to supress change event on this element.

    Returns

    uiElement

    this

Events

  • change( evt )

    Fired when the value of the uiElement is changed.

    See source

    Parameters

    evt : eventInfo