.. / 6.1 ExtJS: Инструментальные панели. Часть 1. Кнопки

Инструментальные меню и кнопочки - вполне самостоятельный компоненты, которые позволяют оживить окна

Toolbar

Пример 1. простой тулбар

Toolbar - панель с набором кнопок в верхней части окна как в обычных приложениях типа MS Internet Explorer или MS Word

Пример 1

var win1 = Ext.create('widget.window', {     // создание окна
  title: 'Пример 1',
  html:'<h1>Первый взгляд.</h1> Оболочка Windows является на сегодня самым',
  autoHeight: true,
  width: '30%', // ширина. Строковое значение
                              // задается по стандарту - px,%, em и т.д.
                              // целое значение соответствует px
  closeAction: 'hide',       // Указание на то, что окно при закрывании
                              // не удаляется вместе с содержимым,
  tbar: [                     // тулбар (toolbar) в верхней части окна
        {text:'Первый'},      // массив кнопок. нетрудно догадаться,
                              // что text = текст кнопки
        {text:'Второй'},
        {text:'Третий'}
       ],
});

Пример 2. Красивый тулбар

Разукрасим кнопки на тулбаре. Ниже только код описывающий tbar

Пример 2

tbar: [                     // тулбар (toolbar) в верхней части окна
  {
    text:'Первый',          // текст кнопки
    iconCls:'icon_example'  // иконка кнопки. задается CSS- классом
                            // .icon_example {background-image:url(…)  !important;}
  },
  '-',                      // spacer (разделитель между кнопками)
  {text:'Второй'},
  '-',
  {text:'Третий'},
   '->', // такая хитрый  spacer-разделитеть, указывающий что остальные кнопки прижимаются вправо
  {text:'Крайний'}
],

В примере 2. я использовал только два вида разделителя.Реально разделителей и всяких свистелок в несколько раз больше. Подробнее, см. документацию

Пример 3. Очень красивый тулбар

А теперь выведу кнопки-иконки без текста и сгруппирую.

Пример 3

tbar: [
  { iconCls:'icon_example'},  // кнопка-иконка без всякого текста
  { iconCls:'icon_example'},  // кнопка-иконка без всякого текста
  {
    xtype: 'buttongroup', // тип компонента - группа кнопок
    items:[
            {'text':'кнопка 1', iconCls:'icon_example'},
            {'text':'кнопка 2', iconCls:'icon_example'}
        ]},
  {
    xtype: 'buttongroup', // тип компонента - группа кнопок
    items:[
            {
                 xtype:'textfield', // тип компонента - поле для ввода текстов
                 width:100
            },
            { iconCls:'icon_example'}, // кнопка-иконка без всякого текста
        ]}


  ],

В примере 3 появились новые элементы:

• xtype - идентификатор типа компонента. Такой тип есть у каждого класса компонента библиотеки ExtJS. Например:
  Ext.toolbar.Toolbar xtype: toolbar
  Ext.window.MessageBox xtype: messagebox
  Ext.window.Window xtype: window
  
• items - массив из любого необходимого набора компонентов, в данном случае это набор кнопок

Пример 4. Оживление тулбара

А теперь самое интересное - оживление кнопок. Позже эту часть рассмотрю подробнее, а пока вот очень короткий пример. Результатом которого будет окно м иснструментальной панелью и единствеееной кнопкой, при нажатии на которую окно закрывается.

Пример 4

tbar: [
        {
            text:'Close',
            handler: function(){
              win4.close()
            }
         }
       ]

Пример 5. Нижний тулбар(строка статуса)

В ExtJS предусмотрено размещение тулбаров и сверху (tbar) и снизу (bbar). Обычно в нижней сати окна выводится строка статуса и маленькие кнопки-картинки. На примере в окне выводятся оба тулбара - и нижний и верхний

Пример 5

    tbar: [{ text:'Top'}], // тулбар (tbar) в верхней части окна
    bbar: [{ iconCls:'icon_example'}] // тулбар (bbar) в нижней  части окна

Далее

1. Инструментальные панели. Часть 2. Меню
2. Панель с закладками