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

  1. ExtJS-4

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

Toolbar

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

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

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

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

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

Пример 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. Оживление тулбара

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

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

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

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

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

Далее

  1. Инструментальные панели. Часть 2. Меню
  2. Панель с закладками
  1. 2011-11-27
  2. ExtJS-4
  1. www.quizzpot.com/2009/08/toolbar-in-panels-and-windows/ - quizzpot.com: Toolbar in panels and windows.
Go Index Test