Comindware UI-Core API

Class: DropdownView

module:core.dropdown.views. DropdownView

Composite View that implements dropdown logic similar to SELECT HTML-element. Unlike PopoutView, a panel doesn't have a speech bubble triangle and it's min-width is always determined and equal to the width of a button view. A dropdown view contains button and panel regions that can be fully customizable by the properties buttonView and panelView.
  • Button View is used for displaying a button. Click on that button trigger a panel to open.
  • Panel View is used to display a panel that drops down.
Panel width is determined by its layout but it cannot be less than the button's width. Panel height is fully determined by its layout. A place where the panel appears depends on the panelPosition option.
Possible events:
  • 'open' (dropdownView) - fires after the panel has opened.
  • 'close' (dropdownView, ...) - fires after the panel has closed. If the panel was closed via close(...) method, the arguments of this method are transferred into this event.
  • 'button:\*' - all events the buttonView triggers are repeated by this view with 'button:' prefix.
  • 'panel:\*' - all events the panelView triggers are repeated by this view with 'panel:' prefix.
Parameters:
Name Type Description
options Object Options object.
Properties
Name Type Argument Default Description
buttonView Marionette.View View class for displaying the button.
buttonViewOptions Object | function <optional>
 Options passed into the view on its creation.
panelView Marionette.View View class for displaying the panel. The view is created every time the panel is triggered to open.
panelViewOptions Object | function <optional>
 Options passed into the view on its creation.
autoOpen Boolean <optional>
 true Whether click on the button should trigger the panel to open.
panelPosition String <optional>
 'down' Opening direction:
  • 'down' - opens down.
  • 'down-over' - opens down and the panel is located above the button overlapping it.
  • 'up' - opens up.
  • 'up-over' - opens up and the panel is located above the button overlapping it.
renderAfterClose Boolean <optional>
 true Whether to trigger button render when the panel has closed.

Extends

Members

buttonView

Contains an instance of options.buttonView if the dropdown is rendered, null otherwise.

panelView

Contains an instance of options.panelView if the dropdown is open, null otherwise. The view is created every time (!) the panel is triggered to open.

Methods

close(arguments)

Closes the dropdown panel.
Parameters:
Name Type Argument Description
arguments * <repeatable>
 Arguments transferred into the 'close' event.

open()

Opens the dropdown panel.