ExtJS Toolbar Menu

В ExtJS внутри Toolbar часто размещают выпадающее меню.
Пример кода выпадающего меню приведен ниже:

var win = Ext.create('widget.window', {
    title: 'Заголовок окна',
    html:'Выпадающее меню в тулбаре.',
    width: '500', // ширина окна может быть задана в px,%, em
    height: 200,
    closeAction: 'hide', // указание на то, что окно при закрывании не удаляется вместе с содержимым,
    tbar: [{// тулбар c выпадащим меню
        text: 'Выпадающее меню', // кнопка с выпадащим меню
            menu: [ // содержимое выпадающего меню
                {text: 'Пункт 1'},
                {text: 'Пункт 2'},
                {text: 'Пункт 3'}
            ]
       },
       {text: 'Кнопка'} // простая кнопка
    ]
});

win.show();



 Меню может быть вложенным.

var win = Ext.create('widget.window', {
    title: 'Заголовок окна',
    html:'Выпадающее меню в тулбаре.',
    width: '500', // ширина окна может быть задана в px,%, em
    height: 200,
    closeAction: 'hide', // указание на то, что окно при закрывании не удаляется вместе с содержимым,
    tbar: [{// тулбар c выпадащим меню
        text: 'Выпадающее меню', // кнопка с выпадащим меню
        menu: [ // содержимое выпадающего меню
                    {text: 'Пункт 1',
                     menu: [// вложенное  меню
                            {text: 'Пункт 1'},
                            {text: 'Пункт 2'},
                            {text: 'Пункт 3'}
                            ]
                    },
                    {text: 'Пункт 2'}
                ]
        },
        {text: 'Кнопка'} // простая кнопка
    ]
});

win.show();

Данный код выведет на экран окно с выпадающим меню, имеющим вложенный список элементов.



 Иконки также можно добавлять через классы в пункты выпадающего меню.


var win = Ext.create('widget.window', {
    title: 'Заголовок окна',
    html:'Выпадающее меню в тулбаре.',
    width: '500', // ширина окна может быть задана в px,%, em
    height: 200,
    closeAction: 'hide', // указание на то, что окно при закрывании не удаляется вместе с содержимым,
    tbar: [
        {// тулбар c выпадащим меню
            text: 'Кнопка 1',
            iconCls:'icon_example',
            menu: [ // содержимое выпадающего меню
                {
                     text: 'Пункт 1',
                     iconCls:'icon_example'
                },
                {
                     text: 'Пункт 2',
                     iconCls:'icon_example'
                },
                {
                     text: 'Пункт 3',
                     iconCls:'icon_example'
                }
            ]
        },
        {
            text: 'Водка',
            iconCls:'icon_example'
        }
    ]
});

win.show();



При нажатии на пункт выпадающего меню к нему также можно привязать какую-либо функцию.

var win = Ext.create('widget.window', {
    title: 'Заголовок окна',
    html:'Выпадающее меню в тулбаре.',
    width: '500', // ширина окна может быть задана в px,%, em
    height: 200,
    closeAction: 'hide', // указание на то, что окно при закрывании не удаляется вместе с содержимым,
    tbar: [
        {// тулбар c выпадащим меню
             menu:[ // содержимое выпадающего меню
                 {
                     text: 'Пункт 1',
                     handler:  function(){Ext.MessageBox.alert('Вы выбрали пункт 1'); }
                 },
                 {
                     text: 'Пункт 2',
                     handler:  function(){ Ext.MessageBox.alert('Вы выбрали пункт 1'); }
                 }
             ]
        }
    ]
});

win.show();