class List

Extends:

UIComponent

Description:

List UI component, extends UIComponent class.
List can be a list of text items, icons, or icons and text. List direction can be vertical, horizontal with wrapping, and vertical with wrapping.
Check example below to become familiar with how the item Object is formatted.

For more methods for this component check UIComponent class.

Constructor

constructor([items])

ComboBox constructor.
Accepts an optional Array parameter: strings ["Item 1","Item 2", ...], numbers [1, 2, 3, ...] item objects [{text:"Item 1"}, {text:"Item 2"}, ...], or a mix of them.

Parameters:

Members

• [ static enum ] Layout
• [ readonly ] container
• [ readonly ] id
• [ readonly ] length
• [ readonly ] parent
• [ readonly ] screenPosition
• [ readonly ] selectedItems

Methods

From this class:

• add()
• clear()
• findByID()
• findByText()
• findByValue()
• indexOf()
• item()
• itemPadding()
• items()
• itemSize()
• layout()
• rightClickSelect()
• scrollToIndex()
• selectedIndex()
• selectionMode()

Inherited from UIComponent:

• addTo()
• alignment()
• anchor()
• background()
• border()
• bottom()
• center()
• color()
• contextMenu()
• destroy()
• dragAction()
• dragData()
• dragDataType()
• dropAction()
• dropDataType()
• dropMode()
• emit()
• emitFocusKeyEvents()
• enabled()
• focusable()
• focused()
• font()
• getAncestor()
• getWindow()
• height()
• hide()
• iconAlignment()
• iconTextGap()
• index()
• isInside()
• layer()
• maxIconSize()
• maxSize()
• minIconSize()
• minSize()
• move()
• onAction()
• onAncestorEvents()
• onChange()
• onComponentEvents()
• onDispose()
• onDragEvents()
• onDropEvents()
• onError()
• onFocusEvents()
• onKey()
• onMouseEvents()
• onMouseMotion()
• onMouseWheel()
• onPropertyChange()
• onScroll()
• opacity()
• position()
• remove()
• right()
• scrollbars()
• scrollBarSize()
• scrollIncrement()
• scrollPosition()
• selectAll()
• selection()
• size()
• smoothScrolling()
• snapshot()
• tooltip()
• updateUI()
• verifyComponent()
• visible()
• width()
• x()
• y()

Examples:

// Item Object format (All fields other than "text" are optional):
{
    text: string,           // Item text (Required)
    [id]: string|number,    // Value that can be used by software logic to identify this item
    [value]: string|number, // Additional value to be stored in the item for later use.
    [icon]: string,         // Absolute or relative path to icon image, base64 encoded image string, or `null` to remove icon.
    [color]: string,        // Item text color as a 6 character hex encoded color string (e.g. #665500)
    [background]: string,   // Item background color as a 6 character hex encoded color string (e.g. #665500)
    [tooltip]: string,      // Tooltip text to show when pointer hover the item. (in List and Tree components only)
    [font]: font object     // Object{name: string, size: number, bold: boolean, ...}. See complete list of font properties in example of font() method.
}

// Creating combo box, then adding each item separately.
const combo1 = new ComboBox().add("Item 1").add(45).add({text: "Item 2", font:{bolt:true}});

// Creating combo box, then adding items as an array.
const combo2 = new ComboBox().items([
    "Item 1",
    45,
    {text: "Item 2", font:{bolt:true}}
]);

// Creating combo box with items as a string and object. Items can be a mix of strings and objects.
const combo3 = new ComboBox([
     "Item 1",
     45,
     {text: "Item 2", font:{bolt:true}}
]);