Mojo.Widget.ListSelector

Namespace Detail

Overview

List selectors can be used for pop-up multiple-choice style editing of values. The current value of the ListSelector is always available in the model.value property. The ListSelector also contains a hidden input field with the current value, so it may be wrapped in a form if desired.

Declaration

<div x-mojo-element="ListSelector" id="listselectorId"
  class="listselectorClass"  name="listselectorName"></div> 

Properties Required Value Description
x-mojo-element Required ListSelector Declares the widget as type 'ListSelector'.
id Required Any String Identifies the widget element for use when instantiating or rendering.
class Optional Any String ListSelector uses .palm-list-selector by default, but you can override with this setting.
name Optional Any String Adds a unique name to the ListSelector widget; generally used in templates.

Events

Mojo.Event.listen(this.controller.get("listselectorId"),
  Mojo.Event.propertyChange, this.handleUpdate);

Event Type Value Event Handling
Mojo.Event.propertyChange event.value or model.value

Instantiation

this.controller.setupWidget("listselectorId",
  this.attributes = {
      choices: [
          {label: "One", value: 1},
          {label: "Two", value: 2},
          {label: "Three", value: 3}
      ]
  },
  this.model = {
      value: 3,
      disabled: false
  }
); 

Attribute Properties

Attribute Property Type Required Default Description
labelPlacement String Optional Mojo.Widget.labelPlacementRight Mojo.Widget.labelPlacementRight: places label on right, value on left.
Mojo.Widget.labelPlacementLeft: places label on left, value on right.
modelProperty String Optional value Model property name for ListSelector state.
disabledProperty String Optional disabled Model property name for disabled boolean.
label String Optional Null Label for the entire list, shown next to selected value in smaller, blue text.
multiline Boolean Optional false If true, long labels will wrap to the next line instead of being truncated.
choices Array Required null List of values for the popup. Must be defined in either the model or attributes and contain at least two items:
[{label: <displayName>, value: <value set in object>}, {label: <displayName>, value: <value set in object>}, ... {label: <displayName>, value: <value set in object>}]

Model Properties

Model Property Type Required Default Description
value User-defined Required none value of widget
disabled Boolean Optional false If true, ListSelector is inactive.
choices Array Required null List of values for the popup. Must be defined in either the model or attributes and contain at least two items:
[{label: <displayName>, value: <value set in object>},
{label: <displayName>, value: <value set in object>},
... {label: <displayName>, value: <value set in object>}]

* - A choices array must be present in either the attributes or model. If the choices are dynamic, meaning changeable after setup, then it should be in the model; otherwise in attributes.

Methods

The ListSelector widget does not have any methods.