Кнопка с меню

Кнопка, при клике по которой открывается выпадающий список.

Документация API Спецификация Axure

Конфигурация

Конфигурация кнопки описана в документе Кнопки и ссылки.

Конфигурация набора элементов для выпадающего меню описана в документе Конфигурация набора элементов для выпадающих списков.

Событие выбора элемента меню

Для кнопки Controls/dropdown:Button интересующее событие — menuItemActivate. В обработчик события вторым аргументом приходит Types/entity:Record с данными элемента меню.

Например, в обработчике выведем на экран значение поля "title":

• JS-модуль:

  define('Module/Component',
     [
        'Core/Control', 
        'wml!Module/Component', 
        'Types/source'
     ],
     function(
        Control, 
        template, 
        source
     ){
        return Control.extend({
           _template: template,
           _menuItems: null,
           _beforeMount: function() {
              this._menuItems = new source.Memory({
                  keyProperty: 'id',
                  data: [
                  {
                     id: '1',
                     title: 'Запись 1',
                  },
                  {
                     id: '4',
                     title: 'Запись 4',
                  },
                  {
                     id: '5',
                     title: 'Запись 5',
                  }]
              }) 
           },
           _clickItemsChangedHandler: function(event, rec) {
               
              // При клике по элементу с id=5 покажет диалог со строкой "Запись 5".
              alert(rec.get('title'));
           }
        })
  });

• WML:

  <Controls.dropdown:Button source="{{_menuItems}}" on:menuItemActivate="_clickItemsChangedHandler()" />