Class M.SelectionListView
Extends
M.View.
This defines the prototype of any selection list view. A selection list view displays
a list with several items of which either only one single item (M.SINGLE_SELECTION /
M.SINGLE_SELECTION_DIALOG) or many items (M.MULTIPLE_SELECTION /
M.MULTIPLE_SELECTION_DIALOG) can be selected.
Defined in: selection_list.js.
Constructor Attributes | Constructor Name and Description |
---|---|
Field Attributes | Field Name and Description |
---|---|
This property is used to specify an initial value for the selection list if
it is running in 'multiple selection dialog' (M.MULTIPLE_SELECTION_DIALOG) mode.
|
|
Determines whether to display the selection list grouped with the label specified with the label property.
|
|
The label proeprty defines a text that is shown above or next to the selection list as a 'title'
for the selection list.
|
|
This property defines the tab bar's name.
|
|
This property specifies the recommended events for this type of view.
|
|
Determines whether to remove all item if the list is updated or not.
|
|
The selected item(s) of this list.
|
|
The selection mode for this selection list.
|
|
The type of this object.
|
- Fields borrowed from class M.View:
- childViews, computedValue, contentBinding, contentBindingReverse, cssClass, cssClassOnError, cssClassOnInit, cssStyle, events, hasFocus, html, id, isInline, isView, modelId, parentView, triggerActionOnChange, triggerActionOnEnter, triggerActionOnKeyUp, value
Method Attributes | Method Name and Description |
---|---|
addItem(item)
This method adds a new selection list item to the selection list view by simply appending
its html representation to the selection list view inside the DOM.
|
|
We use this as alias for the form reset function view.clearValues() to reset the selection to its initial state
|
|
disable()
This method disables the selection list by setting the disabled property of its
html representation to true.
|
|
enable()
This method enables the selection list by setting the disabled property of its
html representation to false.
|
|
This method is responsible for rendering the visual text for a selection list
in the M.MULTIPLE_SELECTION_DIALOG mode.
|
|
getSelection(returnObject)
This method returns the selected item's value(s) either as a String (single selection)
or as an Array (multiple selection).
|
|
getValue()
This method returns the selection list view's value.
|
|
itemSelected(id, event, nextEvent)
This method is called everytime a item is selected / clicked.
|
|
This method is responsible for registering events for view elements and its child views.
|
|
This method removes all of the selection list view's items by removing all of its content in
the DOM.
|
|
This method de-selects all of the selection list's items.
|
|
This method can be used to reset the selection list.
|
|
setSelection(selection)
This method can be used to select items programmatically.
|
- Methods borrowed from class M.View:
- addCssClass, attachToObservable, clearHtml, clearValues, computeValue, contentDidChange, delegateValueUpdate, design, getChildViewsAsArray, getIds, getValues, gotFocus, lostFocus, nl2br, removeCssClass, removeCssProperty, renderUpdate, secure, setCssProperty, setValueFromDOM, style, tab2space, theme, themeChildViews
- Methods borrowed from class M.Object:
- bindToCaller, create, destroy, extend, get, include, set
Field Detail
{String}
initialText
This property is used to specify an initial value for the selection list if
it is running in 'multiple selection dialog' (M.MULTIPLE_SELECTION_DIALOG) mode.
This value is then displayed at startup. You would typically use this e.g. to
specify something like: 'Please select...'.
As long as this initial value is 'selected', the getSelection() of this selection
list will return nothing. Once a 'real' option is selected, this value will visually
disappear. If at some point no option will be selected again, this initial text
will be shown again.
{Boolean}
isGrouped
Determines whether to display the selection list grouped with the label specified with the label property.
If set to YES, the selection list and its label are wrapped in a container and styled as a unit 'out of
the box'. If set to NO, custom styling could be necessary.
{String}
label
The label proeprty defines a text that is shown above or next to the selection list as a 'title'
for the selection list. e.g. "Name:". If no label is specified, no label will be displayed.
{String}
name
This property defines the tab bar's name. This is used internally to identify
the selection list inside the DOM.
{Array}
recommendedEvents
This property specifies the recommended events for this type of view.
{Boolean}
removeItemsOnUpdate
Determines whether to remove all item if the list is updated or not.
{String, Array}
selection
The selected item(s) of this list.
{String}
selectionMode
The selection mode for this selection list. This can either be single or
multiple selection. To set this value use one of the three constants:
- M.SINGLE_SELECTION
This selection mode will render a selection list with several list items
of which only one can be selected. Whenever a new item is selected, the
previously selected item automatically gets de-selected. This selection
mode's behaviour is equivalent to the plain HTML's radio button.
- M.SINGLE_SELECTION_DIALOG
This selection mode will render a selection list equivalent to the plain
HTML's select menu. Only the currently selected item will be visible, and
by clicking on this item, the selection list will be displayed in a dialog
respectively a popup view. By selecting on of the items, this popup will
automatically close and the selected value will be displayed.
- M.MULTIPLE_SELECTION
This selection mode will render a selection list with several list items
of which all be selected. So the selection of a new item doesn't lead to
automatic de-selected of previously selected items. This selection mode's
behaviour is equivalent to the plain HTML's checkboxes.
- M.MULTIPLE_SELECTION_DIALOG
This selection mode will render a selection list equivalent to the plain
HTML's select menu, but with the possibility to select multiple options.
In contrast to the single selection dialog mode, it also is possible to
select no option at all. As with the multiple selecton mode, the selection
of a new item doesn't lead to automatic de-selected of previously selected
items.
Note: This mode currently only works on mobile devices!!
{String}
type
The type of this object.
Method Detail
addItem(item)
This method adds a new selection list item to the selection list view by simply appending
its html representation to the selection list view inside the DOM. This method is based
on jQuery's append().
- Parameters:
- {String} item
- The html representation of a selection list item to be added.
clearValue()
We use this as alias for the form reset function view.clearValues() to reset the selection to its initial state
disable()
This method disables the selection list by setting the disabled property of its
html representation to true.
enable()
This method enables the selection list by setting the disabled property of its
html representation to false.
formatSelectionLabel(v)
This method is responsible for rendering the visual text for a selection list
in the M.MULTIPLE_SELECTION_DIALOG mode. It's only parameter is a number, that
specifies the number of selected options of this selection list. To customize
the visual output of such a list, you will need to overwrite this method within
the definition of the selection list in your application.
- Parameters:
- {Number} v
- The number of selected options.
{String|Object|Array}
getSelection(returnObject)
This method returns the selected item's value(s) either as a String (single selection)
or as an Array (multiple selection).
- Parameters:
- {Boolean} returnObject
- Determines whether to return the selected item(s) as object or not.
- Returns:
- {String|Object|Array} The selected item's value(s).
{String|Array}
getValue()
This method returns the selection list view's value.
- Returns:
- {String|Array} The selected item's value(s).
itemSelected(id, event, nextEvent)
This method is called everytime a item is selected / clicked. If the selected item
changed, the defined onSelect action is triggered.
- Parameters:
- {String} id
- The id of the selected item.
- {Object} event
- The event.
- {Object} nextEvent
- The application-side event handler.
registerEvents()
This method is responsible for registering events for view elements and its child views. It
basically passes the view's event-property to M.EventDispatcher to bind the appropriate
events.
It extend M.View's registerEvents method with some special stuff for text field views and
their internal events.
removeAllItems()
This method removes all of the selection list view's items by removing all of its content in
the DOM. This method is based on jQuery's empty().
removeSelection()
This method de-selects all of the selection list's items.
resetSelection()
This method can be used to reset the selection list. This basically discards
all changes made to the selection by the user or any application-sided calls
and applies the original state.
The 'original state' can either be the bound content or the state, specified
by the originally assigned child views.
setSelection(selection)
This method can be used to select items programmatically. The given parameter can either
be a String (single selection) or an Array (multiple selection).
- Parameters:
- {String|Array} selection
- The selection that should be applied to the selection list.