CV class (ComboBox)

CV(oComboBox)

new CV(oComboBox)

Defines the combobox view of the control, that displays the items. The oCV field defines the control's base combobox-view.
Parameters:
Name Type Description
oComboBox ComboBox Specifies an object of ComboBox type that defines the owner control of the view to be created
CV

Methods

GetAlign() → {string}

The GetAlign() method gets the alignment of the drop-down panel relative to the control
Returns:
Returns the alignment of the drop-down panel relative to the control. The alignment is composed by two parts separated by comma that specifies a point/corner of the control to coincide with a point/corner of the control, of "corner-control,corner-dropdown" type, where:
corner-control, corner-dropdown can be any of the following:
  • "TL", top-left corner
  • "TC", top-center point
  • "TR", top-right corner
  • "ML", middle-left point
  • "C", center of the object
  • "MR", middle-right point
  • "BL", bottom-left corner
  • "BC", bottom-center point
  • "BR", bottom-right corner
Type
string
Example
"BR,TR" {string}, indicates that the bottom-right corner of the control coincides with the top-right corner of the drop-down panel (default)
  "BL,TL" {string}, indicates that the bottom-left corner of the control coincides with the top-left corner of the drop-down panel
GetAlign

GetAllowActions() → {string}

The GetAllowActions() method gets the actions the user can perform once the control is clicked or touched
Returns:
Returns the actions the user can perform once the control is clicked or touched. The format of allowActions field is:
"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."
where
  • "action", indicates the name of the action. The "action" can have any of the following values:
    • "d2", shows the control's drop-down list(panel) once the user clicks the control's drop-down button
    • "drag-drop", carries out the drag and drop of the control (the control can be dropped inside or outside of the control). The ExDrop(event, data) method of the target HTML element is invoked once the user drops the control. The event parameter holds information about the mouse/touch event once the control has been dropped. The data parameter holds information about the source-object that initiated the drag and drop operation, as an object of {object,source,client,shape} type.
  • "shortcut", defines the item's button or/and the modifier-keys that are required to perform the action. The "shortcut" is a combination of none, one or more of the following values:
    • "Shift", indicates that the SHIFT key is pressed
    • "Ctrl" or "Control", indicates that the CTRL key is pressed
    • "Alt" or "Menu", indicates that the ALT key is pressed
    • "Meta" , indicates that the META key is pressed
    • "LButton", specifies that the mouse's left-button is pressed
    • "RButton", specifies that the mouse's right-button is pressed
    • "MButton", specifies that the mouse's middle/wheel-button is pressed
    • "Long", specifies that the action requires a "long" click or touch before it begins
    • "Double", specifies that the action requires a "double" click before it begins (this flag is available for non-dragable actions only such as "edit")
    • "+", indicates AND between values
Type
string
GetAllowActions

GetAllowDrop() → {boolean}

The GetAllowDrop() method indicates whether the user can drag and drop local files into the control.
Returns:
Returns true, if the user can drag and drop local files into the control.
Type
boolean
GetAllowDrop

GetAllowResize() → {string}

The GetAllowResize() method specifies whether the user can resize the control's drop-down portion of the control
Returns:
Returns a value that indicates one of the following:
  • "", the drop-down portion offers no user-controllable method for resizing it (default)
  • "both", the drop-down portion displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically
  • "horizontal", the drop-down portion displays a mechanism for allowing the user to resize it in the horizontal direction
  • "vertical", the drop-down portion displays a mechanism for allowing the user to resize it in the vertical direction
Type
string
Example
"" {string}, the drop-down portion offers no user-controllable method for resizing it (default)
  "both" {string}, the drop-down portion displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically
GetAllowResize

GetCanvasRect() → {Array.<number>}

The GetCanvasRect() method returns the canvas's client rectangle.
Returns:
Returns an array of [x,y,width,height] type that specifies the canvas's client rectangle
Type
Array.<number>
GetCanvasRect

GetClientRect() → {Array.<number>}

The GetClientRect() method returns the control's client area.
Returns:
Returns an array of [x,y,width,height] type that specifies the control's client area
Type
Array.<number>
GetClientRect

GetCursors() → {string}

The GetCursors() method defines the mouse cursor to display when pointing over different parts of the control.
Returns:
A string expression that defines the mouse cursor to display when pointing over different parts of the control. The format of cursors property is:
"cursor(part),cursor(part),..."
where:
  • "cursor", defines the CSS mouse cursor to display while cursor hovers the part
  • "part", defines the name of the part the cursor is applied on (as defined below)
The cursors property supports any of the following parts:
  • "button", defines the mouse-cursor when the mouse pointer hovers the drop-down button
  • "clear", defines the mouse-cursor when the mouse pointer hovers the clear button (@since 1.9)
  • "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a id;options> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
  • "drag-drop", defines the cursor while the control is being dragged using the "drag-drop" action
  • "long", specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field)
Type
string
GetCursors

GetDropDown() → {boolean}

The GetDropDown() method indicates whether the control's drop-down panel is visible or hidden.
Returns:
Returns true, if the control's drop-down panel is visible
Type
boolean
GetDropDown

GetFormatText() → {exontrol.DrawTextFormatEnum}

The GetFormatText() method specifies the format to display the control's label.
Returns:
Returns a value of exontrol.DrawTextFormatEnum type, that defines the format to display the control's label. The exontrol.DrawTextFormatEnum type supports the following flags:
  • exTextAlignTop (0x00), justifies the text to the top of the rectangle
  • exTextAlignLeft (0x00), aligns text to the left
  • exTextAlignCenter (0x01), centers text horizontally in the rectangle
  • exTextAlignRight (0x02), aligns text to the right
  • exTextAlignVCenter (0x04), centers text vertically
  • exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
  • exTextAlignMask (0x0F), specifies the mask for text's alignment.
  • exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
  • exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
  • exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
  • exPlainText (0x80), treats the text as plain text.
  • exTextNoClip (0x0100), draws without clipping.
  • exHTMLTextNoColors (0x0200), ignores the and tags.
  • exTextCalcRect (0x0400), determines the width and height of the text.
  • exHTMLTextNoTags (0x0800), ignores all HTML tags.
  • exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
  • exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
  • exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.
Type
exontrol.DrawTextFormatEnum
GetFormatText

GetHost() → {string|object|HTMLElement}

The GetHost() method defines the host(control) to shown within the control's drop-down panel
Returns:
Returns the control's host, as one of the following: {string}, specifies the identifier to a HTML element, to display within the control's drop-down panel {HTMLElement}, refers to any HTML element of the current document, to display within the control's drop-down panel {object}, indicates a reference to any exontrol canvas-types, such as {exontrol.Calendar}, {exontrol.Tree}, ...
Type
string | object | HTMLElement
GetHost

GetLabel() → {string}

The GetLabel() method specifies the ex-html caption to display within the control's label
Returns:
Returns the control's label
Type
string
GetLabel

GetLocked() → {boolean}

The GetLocked() method specifies whether the control is locked(protected) or unlocked
Returns:
Returns true, if the control is locked(protected) or unlocked
Type
boolean
GetLocked

GetOptions() → {object}

The GetOptions() method returns the current options of the control.
Returns:
An object of ComboBox.Options type that indicates the options to display the control.
Type
object
GetOptions

GetPad() → {number|Array.<number>|string}

The GetPad() method specifies the space between item's content and its borders.
Returns:
Returns a value that could be:
  • {number} a numeric value, to pad horizontal and vertical size with the same value
  • {(string|number[])} a "x,y" or [x,y] type to specify the padding on horizontal and vertical side
Type
number | Array.<number> | string
GetPad

GetReadOnly() → {string}

The GetReadOnly() method specifies whether the control is read-only
Returns:
Returns true, if the control is read-only
Type
string
GetReadOnly

GetShapes() → {string}

The GetShapes() method defines the shapes each part of the control can display. The shapes field customizes the control's visual appearance.
Returns:
A string expression that defines the shapes each part of the control can display. The format of shapes property is:
"shape(part),shape(part),..."
where:
  • "shape", defines the shape to apply on the UI part as one of the following:

    ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
    ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
    ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
    ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
    ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
    ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
    ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
    ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
    ◦ specifies the name of the field within the exontrol.Shapes.ComboBox object (while it starts with a lowercase letter, such as shitem which refers to exontrol.Shapes.ComboBox.shitem shape)
    ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)

  • "part", defines the name of the part the shape is applied on (as defined below)
The shapes property supports any of the following parts:
  • "button", defines the visual-appearance to show the drop-down button
  • "clear", defines the visual-appearance to show the clear button (@since 1.9)
Type
string
GetShapes

GetShowClearButton() → {number}

The GetShowClearButton() method specifies whether the control's clear-button is visible or hidden. The clear button clears the control's label and selection. The clear-button is displayed next to drop down button, and can be hidden, always visible or visible if required (for instance the drop down control has any selection).
Since:
  • 1.9
Returns:
Returns a value that indicates one of the following:
  • 0, the clear-button is hidden (default)
  • -1, the clear-button is always visible
or the drop-down panel contains any selection as::
  • 1, the clear-button is visible only if the control's label/drop-down panel displays a non-empty value or contains any selection
  • 2, the clear-button is visible only if the pointer hovers the control
Type
number
Example
0 {number}, the clear-button is hidden (default)
  -1 {number}, the clear-button is always visible
  3 {number}, the clear-button is visible only if required and the pointer hovers the control
GetShowClearButton

GetTfi() → {string|object}

The GetTfi() method gets the font attributes to apply on captions of the control.
Returns:
Returns the font attributes as a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The result as a {string} can include any of the following keywords separated by space characters:

  • bold, displays the text in bold (equivalent of <b> tag)
  • italic, displays the text in italics (equivalent of <i> tag)
  • underline, underlines the text (equivalent of <u> tag)
  • strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  • <fontName name>, specifies the font's family (equivalent of <font name> tag)
  • <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  • <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  • <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  • <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  • <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the string result that's not recognized as a keyword is interpreted as:

  • name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  • size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The result as {object} can include any of the following fields:

  • bold {boolean}, displays the text in bold (equivalent of <b> tag)
  • italic {boolean}, displays the text in italics (equivalent of <i> tag)
  • underline {boolean}, underlines the text (equivalent of <u> tag)
  • strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  • fontName {string}, specifies the font's family (equivalent of <font name> tag)
  • fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  • fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  • bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  • shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
    • color {string}, defines the color of the text's shadow (CSScolor)
    • width {number}, defines the size of the text's shadow
    • offset {number}, defines the offset to show the text's shadow relative to the text
  • outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
    • color {string}, defines the gradient-color (CSScolor)
    • mode {number}, defines the gradient mode as a value between 0 and 4
    • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

  • Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  • Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  • RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  • RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  • HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  • HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  • Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
Type
string | object
GetTfi

GetToolTipDelay() → {number}

The GetToolTipDelay() method specifies how long the mouse pointer must point to an object before the tool tip appears
Returns:
Returns how long the mouse pointer must point to an object before the tool tip appears
Type
number
GetToolTipDelay

GetToolTipPopDelay() → {number}

The GetToolTipPopDelay() method specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
Returns:
Returns the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
Type
number
GetToolTipPopDelay

GetToolTipWidth() → {number}

The GetToolTipWidth() method specifies the width of the tooltip window, in pixels
Returns:
Returns the width of the tooltip window, in pixels
Type
number
GetToolTipWidth

GetVisibleRect() → {Array.<number>}

The GetVisibleRect() method indicates the control's visible rectangle
Returns:
Returns an array of [x,y,width,height] type that specifies the canvas's client rectangle
Type
Array.<number>
GetVisibleRect

GetWindowRect() → {Array.<number>}

The GetWindowRect() method returns the window's client area.
Returns:
Returns an array of [x,y,width,height] type that specifies the window's client area
Type
Array.<number>
GetWindowRect

GetZoom() → {number}

The GetZoom() method defines the zoom factor of the control's label.
Returns:
A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.
Type
number
GetZoom

GetZoomLevels() → {string}

The GetZoomLevels() method defines the zoom-levels the user can magnify the control's content
Returns:
Specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-levels the control's content is allowed to zoom.
Type
string
GetZoomLevels

SetAlign(value)

The SetAlign() method sets the alignment of the drop-down panel relative to the control
Parameters:
Name Type Description
value string The value is composed by two parts separated by comma that specifies a point/corner of the control to coincide with a point/corner of the control, of "corner-control,corner-dropdown" type, where:
corner-control, corner-dropdown can be any of the following:
  • "TL", top-left corner
  • "TC", top-center point
  • "TR", top-right corner
  • "ML", middle-left point
  • "C", center of the object
  • "MR", middle-right point
  • "BL", bottom-left corner
  • "BC", bottom-center point
  • "BR", bottom-right corner
Example
"BR,TR" {string}, indicates that the bottom-right corner of the control coincides with the top-right corner of the drop-down panel (default)
  "BL,TL" {string}, indicates that the bottom-left corner of the control coincides with the top-left corner of the drop-down panel
SetAlign

SetAllowActions(value)

The SetAllowActions() method customizes the actions the user can perform once the control is clicked or touched
Parameters:
Name Type Description
value string Indicates the actions the user can perform once the control is clicked or touched. The format of allowActions field is:
"action(shortcut,shortcut,...),action(shortcut,shortcut,...)..."
where
  • "action", indicates the name of the action. The "action" can have any of the following values:
    • "d2", shows the control's drop-down list(panel) once the user clicks the control's drop-down button
    • "drag-drop", carries out the drag and drop of the control (the control can be dropped inside or outside of the control). The ExDrop(event, data) method of the target HTML element is invoked once the user drops the control. The event parameter holds information about the mouse/touch event once the control has been dropped. The data parameter holds information about the source-object that initiated the drag and drop operation, as an object of {object,source,client,shape} type.
  • "shortcut", defines the item's button or/and the modifier-keys that are required to perform the action. The "shortcut" is a combination of none, one or more of the following values:
    • "Shift", indicates that the SHIFT key is pressed
    • "Ctrl" or "Control", indicates that the CTRL key is pressed
    • "Alt" or "Menu", indicates that the ALT key is pressed
    • "Meta" , indicates that the META key is pressed
    • "LButton", specifies that the mouse's left-button is pressed
    • "RButton", specifies that the mouse's right-button is pressed
    • "MButton", specifies that the mouse's middle/wheel-button is pressed
    • "Long", specifies that the action requires a "long" click or touch before it begins
    • "Double", specifies that the action requires a "double" click before it begins (this flag is available for non-dragable actions only such as "edit")
    • "+", indicates AND between values
Example
null {null}, indicates the control's default allowActions value
 "" {string}, specifies that no operation is allowed once the user clicks or touches the control
 "scroll" {string}, specifies that only "scroll" operation is allowed, no matter of the item's button or modifier-keys is pressed.
SetAllowActions

SetAllowDrop(value)

The SetAllowDrop() method specifies whether the user can drag and drop local files into the control.
Parameters:
Name Type Description
value boolean Indicates whether the user can drag and drop local files into the control.
Example
false {boolean}, no file can be drop into the control (default)
  true {boolean}, the user can drag and drop files into the control
SetAllowDrop

SetAllowResize(value)

The SetAllowResize() method specifies whether the user can resize the control's drop-down portion of the control
Parameters:
Name Type Description
value string The value can be one of the following values:
  • "", the drop-down portion offers no user-controllable method for resizing it (default)
  • "both", the drop-down portion displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically
  • "horizontal", the drop-down portion displays a mechanism for allowing the user to resize it in the horizontal direction
  • "vertical", the drop-down portion displays a mechanism for allowing the user to resize it in the vertical direction
Example
"" {string}, the drop-down portion offers no user-controllable method for resizing it (default)
  "both" {string}, the drop-down portion displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically
SetAllowResize

SetCursors(value)

The SetCursors() method changes the mouse cursor to display when pointing over different parts of the control.
Parameters:
Name Type Description
value string A string expression that defines the mouse cursor to display when pointing over different parts of the control. The format of cursors property is:
"cursor(part),cursor(part),..."
where:
  • "cursor", defines the CSS mouse cursor to display while cursor hovers the part
  • "part", defines the name of the part the cursor is applied on (as defined below)
The cursors property supports any of the following parts:
  • "button", defines the mouse-cursor when the mouse pointer hovers the drop-down button
  • "clear", defines the mouse-cursor when the mouse pointer hovers the clear button (@since 1.9)
  • "anchor" (hyperlink), defines the mouse-cursor when the mouse pointer hovers the anchor (the <a id;options> ex-HTML part marks an anchor or hyperlink element) (@since 2.2)
  • "drag-drop", defines the cursor while the control is being dragged using the "drag-drop" action
  • "long", specifies the mouse-cursor to be shown as soon as a "long" click or touch action begins (see allowActions field)
SetCursors

SetDropDown(value)

The SetDropDown() method shows the control's drop-down panel
Parameters:
Name Type Description
value boolean Specifies whether the control's drop-down panel should show or hide
Example
false {boolean}, the control's drop-down panel is hidden
  true {boolean}, shows programmatically the control's drop-down panel
SetDropDown

SetFormatText(value)

The SetFormatText() method changes the format to display the control's label.
Parameters:
Name Type Description
value exontrol.DrawTextFormatEnum Specifies a value of exontrol.DrawTextFormatEnum value that defines the format to show the control's label. The exontrol.DrawTextFormatEnum type supports the following flags:
  • exTextAlignTop (0x00), justifies the text to the top of the rectangle
  • exTextAlignLeft (0x00), aligns text to the left
  • exTextAlignCenter (0x01), centers text horizontally in the rectangle
  • exTextAlignRight (0x02), aligns text to the right
  • exTextAlignVCenter (0x04), centers text vertically
  • exTextAlignBottom (0x08), justifies the text to the bottom of the rectangle.
  • exTextAlignMask (0x0F), specifies the mask for text's alignment.
  • exTextWordBreak (0x10), breaks words. Lines are automatically broken between words if a word would extend past the edge of the rectangle specified by the lpRect parameter. A carriage return-line feed sequence also breaks the line. If this is not specified, output is on one line.
  • exTextSingleLine (0x20), displays text on a single line only. Carriage returns and line feeds do not break the line.
  • exTextExpandTabs (0x40), expands tab characters. The default number of characters per tab is eight.
  • exPlainText (0x80), treats the text as plain text.
  • exTextNoClip (0x0100), draws without clipping.
  • exHTMLTextNoColors (0x0200), ignores the and tags.
  • exTextCalcRect (0x0400), determines the width and height of the text.
  • exHTMLTextNoTags (0x0800), ignores all HTML tags.
  • exTextPathEllipsis (0x4000), for displayed text, replaces characters in the middle of the string with ellipses so that the result fits in the specified rectangle. If the string contains backslash (\) characters, exTextPathEllipsis preserves as much as possible of the text after the last backslash.
  • exTextEndEllipsis (0x8000), for displayed text, if the end of a string does not fit in the rectangle, it is truncated and ellipses are added. If a word that is not at the end of the string goes beyond the limits of the rectangle, it is truncated without ellipses.
  • exTextWordEllipsis (0x040000), truncates any word that does not fit in the rectangle and adds ellipses.
Example
null {null}, centers the caption
  32 or exontrol.DrawTextFormatEnum.exTextSingleLine {number}, defines a single-line caption
  0x2A or exontrol.DrawTextFormatEnum.exTextSingleLine | exontrol.DrawTextFormatEnum.exTextAlignRight | exontrol.DrawTextFormatEnum.exTextAlignBottom {number}, defines a single-line caption right/bottom-aligned
SetFormatText

SetHost(value)

The SetHost() method defines the host(control) to shown within the control's drop-down panel
Parameters:
Name Type Description
value string | object | HTMLElement Specifies the host(control) to shown within the control's drop-down panel as indicated:
  • {string}, specifies the identifier to a HTML element, to display within the control's drop-down panel
  • {HTMLElement}, refers to any HTML element of the current document, to display within the control's drop-down panel
  • {object}, indicates a reference to any exontrol canvas-types, such as {exontrol.Calendar}, {exontrol.Tree}, ...
Example
"id" {string} or id {HTMLElement}, refers to any HTML element of the current document, as an identifier (string) or as an HTMLElement type, to display within the control's drop-down panel
 exobj {object}, where exobj can be any of exontrol canvas-types as listed:

   {exontrol.Bezier}, The ExBezier/JS component displays Bézier curves. The Bézier curves are also used in the time domain, particularly in animation, user interface design and smoothing cursor trajectory in eye gaze controlled interfaces (requires "exontrol.bezier.js" library)
   {exontrol.Calendar}, The ExCalendar/JS component provides calendar capabilities for your application. A calendar is a system of organizing days for social, religious, commercial or administrative purposes. This is done by giving names to periods of time, typically days, weeks, months and years. A date is the designation of a single, specific day within such a system (requires "exontrol.calendar.js" library)
   {exontrol.Gantt}, The ExGantt/JS component is our approach to create timeline charts (also known as Gantt charts). Gantt chart is a time-phased graphic display of activity durations. Activities are listed with other tabular information on the left side with time intervals over the bars. Activity durations are shown in the form of horizontal bars (requires "exontrol.menu.js", "exontrol.tree.js", "exontrol.gantt.js" libraries)
   {exontrol.Gauge}, The ExGauge/JS library provides graphics capabilities to visually display and edit the amount, level, or contents of something. The view can show one or more layers, where each layer can display one or more transparent pictures, HTML captions which can be clipped, moved, rotated or combination of them, by dragging the mouse, rolling the mouse wheel, or using the keyboard (requires "exontrol.gauge.js" library)
   {exontrol.Menu}, The ExMenu/JS component provides menu-functionaly which includes top-level menus, context, popup, drop down or shortcut menus. A menu presents a list of items, commands, attributes, or states from which a user can choose. An item within a menu is known as a menu item, and may be configured to initiate an action, toggle a state on or off, or display a submenu of additional menu items when it is selected. A context menu is a menu in a graphical user interface (GUI) that appears upon user interaction, such as a right-click mouse operation (requires "exontrol.menu.js" library)
   {exontrol.OrgChart}, The ExOrgChart/JS component permits the totally automatic generation of organigrams. An organigram generally provides a clear picture of the hierarchical position of the various actors. The control shows a hierarchical display of nodes, each one having an HTML caption, pictures and icons aligned to any side of the node. Each node can have child-nodes, assistant-nodes or group-nodes (requires "exontrol.orgchart.js" library)
   {exontrol.Pivot}, The ExPivot/JS is our approach to provide data summarization, as a pivot table. A pivot-table can automatically sort, count, total or give the average of the data stored in one table or spreadsheet (requires "exontrol.menu.js", "exontrol.tree.js", "exontrol.pivot.js" libraries)
   {exontrol.RadialMenu}, The ExRadialMenu/JS (radial or pie menu) component is similar to the Microsoft's OneNote radial menu with ability to customize the appearance and functionality. The component is designed using tree structure so an item can hold none or more children, and so any item can be browsed, and show its children around it (requires "exontrol.radialmenu.js" library)
   {exontrol.Schedule}, The ExSchedule/JS library is our approach to provide scheduling of appointments into your web application. The ExSchedule/JS is a visual HTML5 component that shows a timeline view for multiple activities (event calendar). The time is displayed on the vertical (Y) axis and the activities are automatically arranged over a single or multiple dates (requires "exontrol.menu.js", "exontrol.calendar.js", "exontrol.icalendar.js", "exontrol.schedule.js" libraries)
   {exontrol.ScrollBar}, The ExScollBar/JS components provides scroll-bar/slider/track functionality for your application. A vertical or horizontal bar commonly located on the far right or bottom of a window that allows you to move the window viewing area up, down, left, or right. A slider or track bar is a graphical control element with which a user may set a value by moving an indicator
   {exontrol.Surface}, The ExSurface/JS lets you organize your objects to a surface. You can use the tool to generate organigrams, diagrams, graphs, flowcharts and so on (requires "exontrol.surface.js" library)
   {exontrol.SwimLane}, The ExSwimlane/JS lets you draw swim lane diagrams. A swim lane (or swimlane diagram) is a visual element used in process flow diagrams, or flowcharts, that visually distinguishes job sharing and responsibilities for sub-processes of a business process. Swim lanes may be arranged either horizontally or vertically (requires "exontrol.surface.js", "exontrol.swimlane.js" libraries)
   {exontrol.Tree}, The ExTree/JS component allows you to display and edit hierarchical-data. Features include: Multiple-Columns, Multiple-Views, Drag and Drop, Group-By, Filter-Prompt, Conditional-Format, Total Fields, and much more (requires "exontrol.menu.js", "exontrol.tree.js" libraries)
SetHost

SetLabel(value)

The SetLabel() method changes the ex-html caption to display within the control's label
Parameters:
Name Type Description
value string A value that specifies the ex-html caption to display within the control's label.
Example
null {null} or "" {string}, displays nothing
  "<b>item" {string}, displays "item" word in bold
SetLabel

SetLocked(value)

The SetLocked() method locks or unlocks the control.
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control is locked(protected) or unlocked
Example
false {boolean}, unlocks the control (the control's drop down is available)
  true {boolean}, locks the control (the control's drop down is not available)
SetLocked

SetOptions(nOptions, bIncludeAllopt) → {boolean}

The SetOptions() method applies new options to the view.
Parameters:
Name Type Attributes Description
nOptions object Specifies an object of ComboBox.Options type that indicates the new options to apply
bIncludeAll boolean <optional>
 Indicates whether all fields of nOptions are included in the item's oOptions object
Returns:
Returns true, if there were options applied to the item
Type
boolean
Example
oComboBox.Options = {readOnly: true}, changes the alignment and the size for all images within the control.

The oComboBox.Options = value statement is equivalent with oComboBox.SetOptions(value) or oComboBox.oCV.SetOptions(value)
SetOptions

SetPad(value)

The SetPad() method changes the item's padding or the space between item's content and its borders.
Parameters:
Name Type Description
value number | Array.<number> | string Specifies a value that could be:
  • {number} a numeric value, to pad horizontal and vertical size with the same value
  • {(string|number[])} a "x,y" or [x,y] type to specify the padding on horizontal and vertical side
Example
null {null}, indicates that the default-padding field is used ([2,2])
  0 {number}, indicates no padding
  "8,4" {string}, increases the item's width with 2 * 8-pixels and item's height with 2 * 4-pixels
  [8,4] {array}, increases the item's width with 2 * 8-pixels and item's height with 2 * 4-pixels
SetPad

SetReadOnly(value)

The SetReadOnly() method sets the control in read-only mode
Parameters:
Name Type Description
value boolean A boolean value that indicates whether the control is read-only
Example
false {boolean}, the control's drop down is available and the user can select new items
  true {boolean}, the control's drop down is available but the user can't select items
SetReadOnly

SetShapes(value)

The SetShapes() method changes the shapes each part of the control can display.
Parameters:
Name Type Description
value string A string expression that defines the shapes each part of the control can display. The format of shapes property is:
"shape(part),shape(part),..."
where:
  • "shape", defines the shape to apply on the UI part as one of the following:

    ◦ any of 140 color names any browser supports (such as red, blue, green, ...)
    ◦ hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF (such as #0000ff which defines a blue background)
    ◦ hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF (such as #0000ff80 which defines a semi-transparent blue background)
    ◦ RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255( such as rgb(0,0,255) that defines a blue background)
    ◦ RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) ( such as rgba(0,0,255,0.5) which defines a semi-transparent blue background)
    ◦ HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors (such as hsl(240, 100%, 50%) that defines a blue background)
    ◦ HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque) (such as hsla(240, 100%, 50%,0.5) that defines a semi-transparent blue background)
    ◦ a JSON representation of the shape object to apply (while it starts with { character, such as '{"normal": {"primitive": "RoundRect","fillColor":"black","tfi": {"fgColor": "white"}}}')
    ◦ specifies the name of the field within the exontrol.Shapes.ComboBox object (while it starts with a lowercase letter, such as shitem which refers to exontrol.Shapes.ComboBox.shitem shape)
    ◦ specifies the name of the field within the exontrol.Shapes object (while it starts with an uppercase letter, such as Button which refers to exontrol.Shapes.Button shape)

  • "part", defines the name of the part the shape is applied on (as defined below)
The shapes property supports any of the following parts:
  • "button", defines the visual-appearance to show the drop-down button
  • "clear", defines the visual-appearance to show the clear button (@since 1.9)
Example
null {null}, specifies the default visual appearance
 "" {string}, no shape (no visual appearance is applied to any part of the control)
 "red(itemAlt)", "#FF0000(itemAlt)", "rgb(255,0,0)(itemAlt)", "rgba(255,0,0,1)(itemAlt)" {string}, shows alternate-items in red
 '{"hover":{"fillColor":"black","tfi":{"fgColor":"white"}}}(event)' {string}, shows the item in white on a black-background, while the cursor hovers it
 "xxx(d),yyy(d,m),zzz(y)"  {string}, specifies that the exontrol.Shapes.ComboBox.xxx combined with exontrol.Shapes.ComboBox.yyy object defines the visual appearance of "d" part of the control, exontrol.Shapes.ComboBox.yyy object defines the visual appearance of "m" part of the control and exontrol.Shapes.ComboBox.zzz object defines the visual appearance of "y" part of the control
SetShapes

SetShowClearButton(value)

The SetShowClearButton() method shows or hides the control's clear button. The clear button clears the control's label and selection. The clear-button is displayed next to drop down button, and can be hidden, always visible or visible if required (for instance the drop down control has any selection).
Parameters:
Name Type Description
value number The value can be one of the following values:
  • 0, the clear-button is hidden (default)
  • -1, the clear-button is always visible
or the drop-down panel contains any selection as::
  • 1, the clear-button is visible only if the control's label/drop-down panel displays a non-empty value or contains any selection
  • 2, the clear-button is visible only if the pointer hovers the control
Since:
  • 1.9
Example
0 {number}, the clear-button is hidden (default)
 -1 {number}, the clear-button is always visible
 3 {number}, the clear-button is visible only if required and the pointer hovers the control
SetShowClearButton

SetTfi(value)

The SetTfi() method sets the font attributes to apply on captions of the control.
Parameters:
Name Type Description
value string | object Indicates a string representation such as "b monospace 16" or as an object such as {bold: true, fontName: "monospace", fontSize: 16}.

The value as {string} supports any of the following keywords (each keyword can be specified using first letters only such as "b" for "bold) separated by space characters:

  • bold, displays the text in bold (equivalent of <b> tag)
  • italic, displays the text in italics (equivalent of <i> tag)
  • underline, underlines the text (equivalent of <u> tag)
  • strikeout, specifies whether the text is strike-through (equivalent of <s> tag)
  • <fontName name>, specifies the font's family (equivalent of <font name> tag)
  • <fontSize size>, specifies the size of the font (equivalent of <font ;size> tag)
  • <fgColor CSSColor>, specifies the text's foreground color (equivalent of <fgcolor> tag)
  • <bgColor CSSColor>, specifies the text's background color (equivalent of <bgcolor> tag)
  • <shaColor CSSColor;width;offset>, defines the text's shadow (equivalent of <sha color;width;offset> tag)
  • <outColor CSSColor>, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • <graColor CSSColor;mode;blend>, defines a gradient text (equivalent of <gra color;mode;blend> tag)

Any other word within the string value that's not recognized as a keyword is interpreted as:

  • name of the font (not a number), specifies the font's family (equivalent of <font name> tag)
  • size of the font (number), specifies the size of the font (equivalent of <font ;size> tag)

The value as {object} supports any of the following fields:

  • bold {boolean}, displays the text in bold (equivalent of <b> tag)
  • italic {boolean}, displays the text in italics (equivalent of <i> tag)
  • underline {boolean}, underlines the text (equivalent of <u> tag)
  • strikeout {boolean}, specifies whether the text is strike-through (equivalent of <s> tag)
  • fontName {string}, specifies the font's family (equivalent of <font name> tag)
  • fontSize {number}, specifies the size of the font (equivalent of <font ;size> tag)
  • fgColor {string}, specifies the text's foreground color (CSScolor) (equivalent of <fgcolor> tag)
  • bgColor {string}, specifies the text's background color (CSScolor) (equivalent of <bgcolor> tag)
  • shaColor {object}, specifies an object of {color, width, offset} type that defines the text's shadow (equivalent of <sha color;width;offset> tag), where:
    • color {string}, defines the color of the text's shadow (CSScolor)
    • width {number}, defines the size of the text's shadow
    • offset {number}, defines the offset to show the text's shadow relative to the text
  • outColor {string}, shows the text with outlined characters (CSScolor) (equivalent of <out color> tag)
  • graColor {object}, specifies an object of {color, mode, blend} type that defines a gradient text (equivalent of <gra color;mode;blend> tag), where:
    • color {string}, defines the gradient-color (CSScolor)
    • mode {number}, defines the gradient mode as a value between 0 and 4
    • blend {number}, defines the gradient blend as a value between 0 and 1

CSSColor or CSS legal color values can be specified by the following methods:

  • Hexadecimal colors, is specified with: #RRGGBB, where the RR (red), GG (green) and BB (blue) hexadecimal integers specify the components of the color. All values must be between 00 and FF. For example, #0000ff value is rendered as blue, because the blue component is set to its highest value (ff) and the others are set to 00.
  • Hexadecimal colors with transparency, is specified with: #RRGGBBAA, where AA (alpha) value must be between 00 and FF. For example, #0000ff80 defines a semi-transparent blue.
  • RGB colors, is specified with the RGB(red, green, blue) function. Each parameter (red, green, and blue) defines the intensity of the color and can be an integer between 0 and 255. For example, rgb(0,0,255) defines the blue color.
  • RGBA colors, are an extension of RGB color values with an alpha channel as RGBA(red, green, blue, alpha) function, where the alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, rgba(0,0,255,0.5) defines a semi-transparent blue.
  • HSL colors, is specified with the HSL(hue, saturation, lightness) function, where hue is a degree on the color wheel (from 0 to 360) - 0 (or 360) is red, 120 is green, 240 is blue. saturation is a percentage value; 0% means a shade of gray and 100% is the full color. lightness is also a percentage; 0% is black, 100% is white. HSL stands for hue, saturation, and lightness - and represents a cylindrical-coordinate representation of colors. For example, hsl(240, 100%, 50%) defines the blue color.
  • HSLA colors, are an extension of HSL color values with an alpha channel - which specifies the opacity of the object as HSLA(hue, saturation, lightness, alpha) function, where alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque). For example, hsla(240, 100%, 50%,0.5) defines a semi-transparent blue.
  • Predefined/Cross-browser color names, 140 color names are predefined in the HTML and CSS color specification. For example, blue defines the blue color.
Example
null {null}, the tfi field is ignored
  "bold monospace 16 &lt;fg blue>" {string}, defines Monospace font of 16px height, bold and blue
  {bold: true, fontName: "monospace", fontSize: 16, fgColor: "blue"} {object}, defines Monospace font of 16px height, bold and blue
SetTfi

SetToolTipDelay(value)

The SetToolTipDelay() method changes how long the mouse pointer must point to an object before the tool tip appears
Parameters:
Name Type Description
value number A value that specifies how long the mouse pointer must point to an object before the tool tip appears.
Example
0 {number}, the tooltip is shown "immediately"
  128 {number}, the tooltip is displayed in 128 ms.
SetToolTipDelay

SetToolTipPopDelay(value)

The SetToolTipPopDelay() method changes the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control
Parameters:
Name Type Description
value number A value that specifies the period in ms of time the tool top remains visible if the mouse pointer is stationary within a control.
Example
0 {number}, no tooltip is shown for any object (disabled)
  -1 {number}, the tooltip stays indefinitely (negative)
  1000 {number}, the tooltip is visible for 1 second
SetToolTipPopDelay

SetToolTipWidth(value)

The SetToolTipWidth() method changes the width of the tooltip window, in pixels
Parameters:
Name Type Description
value number A value that specifies the width of the tooltip window, in pixels.
Example
0 {number}, no tooltip is shown for any object (disabled)
  -1 {number}, the tooltip's content is displayed on a single line (without limit the width of it)
  300 {number}, the tooltip's max-width is 300 pixels
SetToolTipWidth

SetZoom(value)

The SetZoom() method defines the zoom factor of the control's label.
Parameters:
Name Type Description
value number A numeric value between 10 and 1000 that specifies the zoom factor of the control's content.
Example
null {null}, Specifies normal-view (100%)
  150 {number}, Indicates that the control's label is magnfied to 150%
SetZoom

SetZoomLevels(value)

The SetZoomLevels() method defines the zoomLevels factor of the control's content.
Parameters:
Name Type Description
value string specifies a list of numbers separated by comma that indicates the zoom-levels/zoom-levels the control's content is allowed to zoom
Example
null {null}, Specifies that the control's zoom factor is always 100%
  150 {number}, Specifies that the control's zoom factor is always 150%
  "50,100,200,350" {string}, Indicates that the zoom-factor can be any of selected values, and the levels of zoom-factor is 50% to 350%
SetZoomLevels

apyOpt(rgApplyOptions)

The apyOpt() method is called once the options is about to apply using the SetOptions() method (allow ordering the options to apply)
Parameters:
Name Type Description
rgApplyOptions array Indicates the list of options to apply, as an array of [string] type
apyOpt

clear()

The clear() method clears the control's label and selection once the user clicks the clear-button
Since:
  • 1.9
clear

d2(visible)

The d2/dropDown() method shows or hides the control's drop-down list(panel)
Parameters:
Name Type Description
visible boolean Specifies whether the control's drop down panel is shown or hidden
d2

getHost() → {object}

The getHost() method stores information about the control's host, as an object of {c(ombo)b(ox),oH(TML)E(lement),h(andle)e(vent)d(own),h(andle)e(vent)u(p),i(nvalidate)C(ombo)B(ox),sel(ection),oB(ase),d(raw)C(ombo)B(ox)l(abel),c(lose)C(ombo)B(ox),s(election)C(ombo)B(ox)} type
Returns:
Returns information about the control's host as an object of {c(ombo)b(ox),oH(TML)E(lement),h(andle)e(vent)d(own),h(andle)e(vent)u(p),i(nvalidate)C(ombo)B(ox),sel(ection),oB(ase),d(raw)C(ombo)B(ox)l(abel),c(lose)C(ombo)B(ox),s(election)C(ombo)B(ox)} where: c(ombo)b(ox) ~ cb {ComboBox} (implemented by the combobox control) Holds a reference to the control itself, as an object of {ComboBox} type oH(TML)E(lement) ~ oHE {HTMLElement} (implemented by the combobox control) Holds the control's host, of HTMLElement type (the HTMLElement defines the drop-down panel) h(andle)e(vent)d(own) ~ hed {callback} (implemented by the combobox control) Holds a reference to the handler of mouse/pointer-event down h(andle)e(vent)u(p) ~ heu {callback} (implemented by the combobox control) Holds a reference to the handler of mouse/pointer-event up rtHE(HostObj) ~ rtHE {array} (implemented by the combobox control) Stores the size of the drop-down panel (HTMLElement that implements ExHost method), as an array of [x,y,width,height] type i(nvalidate)C(ombo)B(ox) ~ iCB {callback} (implemented by the combobox control) Invalidates the combobox control sel(ection) ~ sel {number} (implemented by the combobox control) Holds the number of selected / checked items oB(ase) ~ oB {object} (implemented by the combobox control) Stores information about the base HTML-element that hosts the drop-down so it can be resizable, as an object of {oP(arent),oN(ext),oH(TML)E(lement),oR(esize)O(bserver)} type oP(arent) ~ oP {HTMLElement} (implemented by the combobox control) specifies the current parent of the original-host, as an HTMLElement type oN(ext) ~ oN {HTMLElement} (implemented by the combobox control) holds the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list oH(TML)E(lement) ~ oHE {HTMLElement} (implemented by the combobox control) holds the original-host, as an HTMLElement type oR(esize)O(bserver) ~ oRE {ResizeObserver}(implemented by the combobox control) holds an object of ResizeObserver type to report changes of the DIV element, and so to resize the original host oW(idth)h(eight) ~ oWh {object} (implemented by the combobox control) stores the original difference of width/height properties, as an object of {w(idth),h(eight)} type d(raw)C(ombo)B(ox)l(abel) ~ dCBl {callback} (implemented by the host during the HTMLElement.ExHost call) Specifies the host's function to draw the combobox's label, as a function of callback(ctx, client, oComboView) type c(lose)C(ombo)B(ox) ~ cCB {callback} (implemented by the host during the HTMLElement.ExHost call) Specifies the host's function to check the click should close the control's drop-down panel, as a function of callback(event) {boolean} type s(election)C(ombo)B(ox) ~ sCB {callback} (implemented by the host during the HTMLElement.ExHost call) Indicates the host's function to get the number of selected items, as a function of callback(bClear, oComboView) {number} type
Type
object
getHost

getLabel() → {string}

The getLabel() method gets the control's label
Returns:
Returns the control's label
Type
string
getLabel

grtD2(oHost, bExHostopt) → {array}

The grtD2/getrtDropDown() method gets the size of the drop-down panel, as an array of [x,y,width,height] type. Also, the grtD2() method updates the rtHE field of the oHost
Parameters:
Name Type Attributes Description
oHost object Provides information about the control's host as an object of {c(ombo)b(ox),oH(TML)E(lement),h(andle)e(vent)d(own),h(andle)e(vent)u(p),i(nvalidate)C(ombo)B(ox),sel(ection),oB(ase),d(raw)C(ombo)B(ox)l(abel),c(lose)C(ombo)B(ox),s(election)C(ombo)B(ox)} where: c(ombo)b(ox) ~ cb {ComboBox} (implemented by the combobox control) Holds a reference to the control itself, as an object of {ComboBox} type oH(TML)E(lement) ~ oHE {HTMLElement} (implemented by the combobox control) Holds the control's host, of HTMLElement type (the HTMLElement defines the drop-down panel) h(andle)e(vent)d(own) ~ hed {callback} (implemented by the combobox control) Holds a reference to the handler of mouse/pointer-event down h(andle)e(vent)u(p) ~ heu {callback} (implemented by the combobox control) Holds a reference to the handler of mouse/pointer-event up rtHE(HostObj) ~ rtHE {array} (implemented by the combobox control) Stores the size of the drop-down panel (HTMLElement that implements ExHost method), as an array of [x,y,width,height] type i(nvalidate)C(ombo)B(ox) ~ iCB {callback} (implemented by the combobox control) Invalidates the combobox control sel(ection) ~ sel {number} (implemented by the combobox control) Holds the number of selected / checked items oB(ase) ~ oB {object} (implemented by the combobox control) Stores information about the base HTML-element that hosts the drop-down so it can be resizable, as an object of {oP(arent),oN(ext),oH(TML)E(lement),oR(esize)O(bserver)} type oP(arent) ~ oP {HTMLElement} (implemented by the combobox control) specifies the current parent of the original-host, as an HTMLElement type oN(ext) ~ oN {HTMLElement} (implemented by the combobox control) holds the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list oH(TML)E(lement) ~ oHE {HTMLElement} (implemented by the combobox control) holds the original-host, as an HTMLElement type oR(esize)O(bserver) ~ oRE {ResizeObserver}(implemented by the combobox control) holds an object of ResizeObserver type to report changes of the DIV element, and so to resize the original host oW(idth)h(eight) ~ oWh {object} (implemented by the combobox control) stores the original difference of width/height properties, as an object of {w(idth),h(eight)} type d(raw)C(ombo)B(ox)l(abel) ~ dCBl {callback} (implemented by the host during the HTMLElement.ExHost call) Specifies the host's function to draw the combobox's label, as a function of callback(ctx, client, oComboView) type c(lose)C(ombo)B(ox) ~ cCB {callback} (implemented by the host during the HTMLElement.ExHost call) Specifies the host's function to check the click should close the control's drop-down panel, as a function of callback(event) {boolean} type s(election)C(ombo)B(ox) ~ sCB {callback} (implemented by the host during the HTMLElement.ExHost call) Indicates the host's function to get the number of selected items, as a function of callback(bClear, oComboView) {number} type
bExHost boolean <optional>
 returns the size of the ExHost element instead
Returns:
Returns the size of the drop-down panel, as an array of [x,y,width,height] type (prevents returning an empty-rectangle)
Type
array
grtD2

isD2V() → {boolean}

The isD2V/isDropDownVisible() method checks whether drop-down panel is visible or hidden
Returns:
Returns true if the control's drop-down panel is shown
Type
boolean
isD2V

label(image, caption) → {string}

The label() method builds a label using the image and caption
Parameters:
Name Type Description
image string Specifies the image to include in label
caption string Indicates the caption within the label
Returns:
Returns the label composed by image and caption
Type
string
label

onDblClk(event) → {any}

The onDblClk() method occurs once the user double-clicks the view
Parameters:
Name Type Description
event MouseEvent/TouchEvent A MouseEvent object that generated the event. Could be mouse-up or touch-end
Returns:
Returns an empty-value to continue the operation, else to cancel any further actions
Type
any
onDblClk

srtD2(width, height, oHost)

The srtD2/setrtDropDown() method changes the size of the drop-down portion
Parameters:
Name Type Description
width number Indicates the new width of the drop-down portion
height number Indicates the new height of the drop-down portion
oHost object Provides information about the control's host as an object of {c(ombo)b(ox),oH(TML)E(lement),h(andle)e(vent)d(own),h(andle)e(vent)u(p),i(nvalidate)C(ombo)B(ox),sel(ection),oB(ase),d(raw)C(ombo)B(ox)l(abel),c(lose)C(ombo)B(ox),s(election)C(ombo)B(ox)} where: c(ombo)b(ox) ~ cb {ComboBox} (implemented by the combobox control) Holds a reference to the control itself, as an object of {ComboBox} type oH(TML)E(lement) ~ oHE {HTMLElement} (implemented by the combobox control) Holds the control's host, of HTMLElement type (the HTMLElement defines the drop-down panel) h(andle)e(vent)d(own) ~ hed {callback} (implemented by the combobox control) Holds a reference to the handler of mouse/pointer-event down h(andle)e(vent)u(p) ~ heu {callback} (implemented by the combobox control) Holds a reference to the handler of mouse/pointer-event up rtHE(HostObj) ~ rtHE {array} (implemented by the combobox control) Stores the size of the drop-down panel (HTMLElement that implements ExHost method), as an array of [x,y,width,height] type i(nvalidate)C(ombo)B(ox) ~ iCB {callback} (implemented by the combobox control) Invalidates the combobox control sel(ection) ~ sel {number} (implemented by the combobox control) Holds the number of selected / checked items oB(ase) ~ oB {object} (implemented by the combobox control) Stores information about the base HTML-element that hosts the drop-down so it can be resizable, as an object of {oP(arent),oN(ext),oH(TML)E(lement),oR(esize)O(bserver)} type oP(arent) ~ oP {HTMLElement} (implemented by the combobox control) specifies the current parent of the original-host, as an HTMLElement type oN(ext) ~ oN {HTMLElement} (implemented by the combobox control) holds the element immediately following the specified one in its parent's children list, or null if the specified element is the last one in the list oH(TML)E(lement) ~ oHE {HTMLElement} (implemented by the combobox control) holds the original-host, as an HTMLElement type oR(esize)O(bserver) ~ oRE {ResizeObserver}(implemented by the combobox control) holds an object of ResizeObserver type to report changes of the DIV element, and so to resize the original host oW(idth)h(eight) ~ oWh {object} (implemented by the combobox control) stores the original difference of width/height properties, as an object of {w(idth),h(eight)} type d(raw)C(ombo)B(ox)l(abel) ~ dCBl {callback} (implemented by the host during the HTMLElement.ExHost call) Specifies the host's function to draw the combobox's label, as a function of callback(ctx, client, oComboView) type c(lose)C(ombo)B(ox) ~ cCB {callback} (implemented by the host during the HTMLElement.ExHost call) Specifies the host's function to check the click should close the control's drop-down panel, as a function of callback(event) {boolean} type s(election)C(ombo)B(ox) ~ sCB {callback} (implemented by the host during the HTMLElement.ExHost call) Indicates the host's function to get the number of selected items, as a function of callback(bClear, oComboView) {number} type
srtD2

Events

onanchorclick

The onanchorclick() event occurs once the user clicks an anchor element (the <a id;options> ex-HTML part marks an anchor or hyperlink element)
Parameters:
Name Type Description
oEvent object Holds information about anchor being clicked
Properties
Name Type Description
id string specifies null (no identifier has been specified for the anchor) or the anchor's identifier
options string specifies null (no options has been specified for the anchor) or the anchor's options
Since:
  • 2.2
Example
The following samples display information about the element being clicked:

oComboBox.Listeners.Add("onanchorclick", function (oEvent)
{
 console.log(oEvent);
})

or

oComboBox.oCV.onanchorclick = function (oEvent)
{
 console.log(oEvent);
}

where oComboBox is an object of ComboBox type, oCV is member of ComboBox type, of SV type.
onanchorclick

onclear

The onclear() method occurs once the user clicks the control's clear button
Since:
  • 1.9
Example
The following sample displays a message once the control's clear button is clicked:

oComboBox.Listeners.Add("onclear", function ()
{
 console.log("clear-button clicked");
})

or

oComboBox.oCV.onclear = function ()
{
 console.log("clear-button clicked");
}

where oComboBox is an object of ComboBox type. The oCV is member of ComboBox type, of CV type.
onclear

onclick

The onclick() method occurs once the user clicks or double-clicks an item.
Parameters:
Name Type Description
oEvent object specifies an object of {dblClick,button,modifiers,view} type, that holds information about the object being clicked
Properties
Name Type Description
view object indicates an object of exontrol.ComboBox.CV, ... type that specifies the view/window where the click occurred
dblClick boolean indicates whether the user clicks or double-clicks the item
button number indicates which button is pressed while clicking the item as 1 (left), 2 (right) or 4 (middle)
modifiers number specifies a combination of 1, 2, 4 and 16 according with modifier keys (ALT, CTRL, META and SHIFT), or 0 if no modifier keys
Example
The following samples display information about the object being clicked:

oComboBox.Listeners.Add("onclick", function (oEvent)
{
 console.log(oEvent);
})

or

oComboBox.oCV.onclick = function (oEvent)
{
 console.log(oEvent);
}

where oComboBox is an object of ComboBox type. The oCV is member of ComboBox type, of CV type.
onclick

ond2

The ond2() method occurs once the user clicks the control's drop down button
Example
The following sample displays a message once the control's drop-down button is clicked:

oComboBox.Listeners.Add("ond2", function ()
{
 console.log("drop-down clicked");
})

or

oComboBox.oCV.ond2 = function ()
{
 console.log("drop-down clicked");
}

where oComboBox is an object of ComboBox type. The oCV is member of ComboBox type, of CV type.
ond2