.. / 7. ExtJS: — Панели с закладками (Ext.tab.Panel)

  1. ExtJS-4

Пример 1. Простая tab Panel

<script>
function a() {
        var win;
        if (!win) {
            win = Ext.create('widget.window', {
                title: 'Пример 4.1',
                width: 600,
                height: 350,
                /* Массив items содержащий компоненты или их конфигурации */
                items: [{
                          xtype: 'tabpanel',                        // тип компонента - панель с закладками
                          items: [
                              {
                                  title: 'Tab 1', // заголовок первой закладки
                                  html: 'Hello world from Tab1'     // содержимое первой закладки
                              }, {
                                  title: 'Tab 2', // заголовок второй закладки
                                  html: 'Hello world from Tab2'     // содержимое второй закладки
                              }
                          ]
                       }]
            });
         } win.show()
}
</script>

Пример 2. Красивая tab Panel

Закладкам можно задавать кучу параметров - визуальных и поведенческих. В примере ниже к закладкам прикреплены кнопки удаления, параметр disable, иконки и т.д.

Если закладки не влезают - автоматически появляетя горизонтальная прокрутка.

Ниже я даю только код, опредляющий параметр конфигурации items

      items: [
          {
              title: 'Tab 1', // заголовок первой закладки
              html: 'Hello world from Tab1',    // содержимое первой закладки
              iconCls: 'icon_example'           // добавляем класс с отображением иконки
                                                // .icon_example {background-image:url(…)  !important;}
          }, {
              title: 'Tab 2', // заголовок второй закладки
              html: 'Hello world from Tab2',    // содержимое второй закладки
              disabled: true,                   // закладка недоступна (задизаблено)
          }, {
              title: 'Tab 3', // заголовок второй закладки
              html: 'Hello world from Tab3',    // содержимое второй закладки
              closable: true,                   // вкладку можно удалить(закрыть)
          ……………………………………………………………….
          ……………………………………………………………….
          ……………………………………………………………….

      ]


Пример 3. Пример загрузки содержимого через Ajax

Содержание панелей закладок может быть самым разным, в примере ниже показано заполнение панели по Ajax-запросу, но в принципе панели сами могут состоять из других компонентов, в том числе из других панелей.

      items: [
          {
              title: 'Tab 1', // заголовок первой закладки
              loader: {                         // определение загрузчика
                    url: 'ajax/4.php?query=1',
                    autoLoad: true
                }
          }, {
              title: 'Tab 2', // заголовок первой закладки
              loader: {                         // определение загрузчика
                    url: 'ajax/4.php?query=2',
                    autoLoad: true
                }
          }

Далее

  1. GridPanel - таблички. Часть 1 локальные данные
  2. Form. Часть 1 - простые компооненты
  3. Form. Часть 2 - составные компоненты
  4. Form. Часть 3 - Submit
  5. Деревья в ExtJS. Часть 1. Инициализация
  1. 2011-11-27
  2. ExtJS-4
  1. www.quizzpot.com/2009/09/the-tabs/ - quizzpot.com The TabPanel
  2. docs.sencha.com/ext-js/4-0/#!/api/Ext.tab.Panel - Ext.tab.PanelView API на docs.sencha.com
Go Index Test