ExtJS Toolbar

В ExtJS Toolbar - это панель с набором кнопок в верхней части окна.
Следующий ниже код выведет на экран всплывающее окно с панелью Toolbar.

Ext.require([
    'Ext.window.*',
    'Ext.tip.*'
]);

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

win.show();



Кнопки в тулбаре можно отделять друг от друга специальными разделителями и ставить перед текстом кнопок иконки, как в приведенном ниже коде:

var win = Ext.create('widget.window', {
    title: 'Заголовок окна',
    html:'В данном окне кнопки в тулбаре отделены друг от друга разделителями.',
    autoHeight: true,
    width: '30%', // ширина окна может быть задана в px,%, em
    height: 100,
    closeAction: 'hide', // указание на то, что окно при закрывании не удаляется вместе с содержимым,
    tbar: [ // тулбар (toolbar) в верхней части окна
      {
        text:'Кнопка 1', // текст кнопки
        iconCls:'icon_example' // иконка перед текстом кнопки задается CSS-классом, например .icon_example {background-image:url(…) !important;}
      },
      '-', // spacer - разделитель между кнопками
      {text:'Кнопка 2'},
      '-',
      {text:'Кнопка 3'},
      '->', // spacer - разделитеть, указывающий что остальные кнопки прижимаются вправо
      {text:'Кнопка 4'}
],
});

win.show();




Содержимое Toolbar можно также разделять на группы:


var win = Ext.create('widget.window', {
    title: 'Заголовок окна',
    html:'В данном окне кнопки в тулбаре отделены друг от друга разделителями.',
    autoHeight: true,
    width: '30%', // ширина окна может быть задана в px,%, em
    height: 100,
    closeAction: 'hide', // указание на то, что окно при закрывании не удаляется вместе с содержимым,
    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'}, // кнопка-иконка без всякого текста
        ]
      }
    ]
});

win.show();

В результате выполнения данного кода ExtJS выведет на экран окно с Toolbar, в котором кнопки разделены на группы.



Кнопкам можно задавать разлицные функции. Например, ниже приведенный код закроет окно после нажатия на кнопку с надписью "Закрыть".

var win = Ext.create('widget.window', {
    title: 'Заголовок окна',
    html:'В данном окне кнопки в тулбаре отделены друг от друга разделителями.',
    autoHeight: true,
    width: '30%', // ширина окна может быть задана в px,%, em
    height: 100,
    closeAction: 'hide', // указание на то, что окно при закрывании не удаляется вместе с содержимым,
    tbar: [
        {
            text: 'Закрыть',
            handler: function(){
              win.close();
            }
         }
   ]
});

win.show();



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

var win = Ext.create('widget.window', {
    title: 'Заголовок окна',
    html:'Два тулбара.',
    autoHeight: true,
    width: '300', // ширина окна может быть задана в px,%, em
    height: 300,
    closeAction: 'hide', // указание на то, что окно при закрывании не удаляется вместе с содержимым,
    tbar: [{ text:'Верхний тулбар'}], // тулбар (tbar) в верхней части окна
    bbar: [{ text:'Нижний тулбар'}] // тулбар (bbar) в нижней  части окна
});

win.show();