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

ExtJS-4

Простая 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>

Красивая 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,                   // вкладку можно удалить(закрыть)
          ……………………………………………………………….
          ……………………………………………………………….
          ……………………………………………………………….

      ]

Пример загрузки содержимого через 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
                }
          }

2011-11-27
ExtJS-4

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

Простая tab Panel

Красивая tab Panel

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

Далее