.. / 6.2 ExtJS: Инструментальные панели. Часть 2. Меню (Ext.menu.Menu)

1. простое меню

Для больших приложений, обычно кнопки в верхней инструментальной панели совмещены с выпадающими меню. Пример такой кнопки-меню приведен ниже

Пример 1

var win1 = Ext.create('widget.window', {     // создание окна
    title: 'Лев 16:29-31',
    html:<h1>Москва-Петушки</h1>Все говорят: Кремль, Кремль. Ото всех я слышал про него…',
    autoHeight: true,
    width: '30%', // ширина. Строковое значение задается по стандарту - px,%, em и т.д.
    closeAction: 'hide',       // Указание на то, что окно при закрывании не удаляется вместе с содержимым,
    tbar: [{                    // тулбар c меню
            text: 'Button',     // кнопка с выпадащим меню
            menu:   [           // само  меню
                        {text: 'Пиво'},
                        {text: 'Водка'},
                        {text: 'Коньяк'}
                    ]
            },
            {text: 'Закусить'}  // простая кнопка
         ]
});

2. Вложенное меню

Вложенные меню - гадкая и неюзабельная штука. Особенно в веб. Но оно хорошо иллюстрирует как внутрь однного компонентна вклеивается другое.

Пример 2

tbar: [{                    // тулбар c меню
        text: 'Выпить',     // кнопка с выпадащим меню
        menu:   [           // само  меню
                    {text: 'Пиво',
                     menu:   [           // вложенное  меню
                            {text: 'Жигулевское'},
                            {text: 'Ячменный колос'},
                            {text: 'Сенчу Алус'}
                            ]
                    },
                    {text: 'Водка'}
                ]
        },
        {text: 'Закусить'}  // простая кнопка
     ]

Прим. «Сенчу» - по случайному совпадению реальный сорт латышского пива, который продавался еще при СССР. Правда в соседние с ЛатССР области он попадал уже с осадком. Поэтому воспоминания об этом самые неприятные.

3. Красивое меню

ExtJS очень логичен. В предыдущем разделе я украсил иконками кнопки инструментальной панели. Точно так же украшаются и пункты меню.

Пример 3

tbar: [{                    // тулбар c меню
      text: 'Пиво',
      iconCls:'icon_example',
                   menu:   [           // меню с картинками
                          {text: 'Жигулевское',
                            iconCls:'icon_example'},
                            {text: 'Ячменный колос',
                            iconCls:'icon_example'},
                            {text: 'Сенча Алус',
                            iconCls:'icon_example'}
                          ]
                  },
     {text: 'Водка',
     iconCls:'icon_example'}]

4. Оживляем меню

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

Пример 4

menu:   [           // само  меню
          {
            text: 'Водка',
            handler:  function(){ Ext.MessageBox.alert('Не забудьте пиво!'); }
          },
          {
            text: 'Коньяк',
            handler:  function(){ Ext.MessageBox.alert('Нет. Лучше водку!'); }
          }
      ]

Далее

1. Панель с закладками
2. GridPanel - таблички
3. Form. Часть 1 - простые компооненты