ExtJS Tab Panel Панель с вкладками

В ExtJS каждое окно Ext.Window может содержать несколько вкладок Ext.Tabpanel, каждая из которых может в свою очередь содержать другие панели.

Ниже приведен пример кода вывода вкладок внутри всплывающего окна.

var win = Ext.create('widget.window', {
    title: 'Заголовок окна',
    width: 300,
    height: 150,
    items: [{ // Массив items содержит компоненты или их конфигурации
        xtype: 'tabpanel', // тип компонента: панель с закладками
        items: [
            {
                title: 'Вкладка 1', // заголовок первой вкладки
                height: 100,
                html: 'Это вкладка 1.' // содержимое первой вкладки
            },
            {
                title: 'Вкладка 2', // заголовок второй вкладки
                height: 100,
                html: 'Это вкладка 2.' // содержимое второй вкладки
            }
        ]
    }]
});

win.show();

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



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

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

var win = Ext.create('widget.window', {
    title: 'Заголовок окна',
    width: 300,
    height: 150,
    items: [{ // Массив items содержит компоненты или их конфигурации
        xtype: 'tabpanel', // тип компонента: панель с закладками
        items: [ // Массив items содержит элемнты вкладок
            {
                title: 'Вкладка 1', // заголовок первой вкладки
                height: 100,
                html: 'Это вкладка 1.', // содержимое первой вкладки
                iconCls: 'icon_example'// добавляем класс с отображением иконки .icon_example {background-image:url(…) !important;}
            },
            {
                title: 'Вкладка 2', // заголовок второй вкладки
                height: 100,
                html: 'Это вкладка 2.', // содержимое второй вкладки
                disabled: true // вкладка недоступна для выбора
            },
            {
                title: 'Вкладка 3', // заголовок третьей вкладки
                height: 100,
                html: 'Это вкладка 3.', // содержимое третьей вкладки
                closable: true // вкладку можно удалить(закрыть)
            }
        ]

    }]
});

win.show();

В результате выполнения кода ExtJS выведет на экран следующее окно:



Содержимое внутри вкладок может быть самым разнообразным. Ниже приведен пример заполнения содержимого панели вкладки по AJAX-запросу.

var win = Ext.create('widget.window', {
    title: 'Заголовок окна',
    width: 300,
    height: 150,
    items: [{ // Массив items содержит компоненты или их конфигурации
        xtype: 'tabpanel', // тип компонента: панель с закладками
        items: [ // Массив items содержит элементы вкладок
            {
                title: 'Вкладка 1', // заголовок первой вкладки
                loader: { // определение загрузчика
                    url: 'ajax.php?query=1',
                    autoLoad: true
                }
            },
            {
                title: 'Вкладка 2', // заголовок второй вкладки
                loader: { // определение загрузчика
                    url: 'ajax.php?query=2',
                    autoLoad: true
                }
            }
        ]

    }]
});

win.show();

В результате выполнения кода после выполнения AJAX-запроса внутрьь вкладок будет динамически загружено текстовое содержимое.



А так во вкладку в качестве содержимого можно добавить какой-нибудь компонент:

var tabs = Ext.createWidget('tabpanel', {
    renderTo: document.body,
    activeTab: 0,
    width: '100%',
    height: '100%',
    defaults :{
        autoScroll: true,
        bodyPadding: 10
    },
    items : [
        {
            xtype : 'panel',    
            title :'Отчет',
            items: [table1]
        }
    ]
});