PHP5

Панель вкладок

Для реализации панели вкладок используется класс Ext.tab.Panel. Создадим простую панель с двумя вкладками:

	Ext.create('Ext.tab.Panel', {
		title: 'Панель вкладок',
		width: 300,
		height: 200,
		items:[{
			title: 'C#',
			html: 'WPF, ASP.NET, MVC, Windows Forms'
		},{
			title: 'Java',
			html: 'JSP, Java FX, Swing, AWT'
		}],
		renderTo: Ext.getBody()
	});

Свойство items панели вкладок содержит коллекцию объектов Ext.tab.Tab, каждый из которых представляет отдельную вкладку.

С помощью параметра tabConfig можно настроить дополнительные возможности вкладок. Например, можно добавить всплывающую подсказку при наведении на вкладку:

Ext.onReady(function(){
	// инициализация функционала всплывающих подсказок
	Ext.tip.QuickTipManager.init();
	var tabpanel = Ext.create('Ext.tab.Panel', {
		title: 'Панель вкладок',
		width: 300,
		height: 200,
		items:[{
			title: 'C#',
			html: 'WPF, ASP.NET, MVC, Windows Forms',
			tabConfig: {
				//всплывающая подсказка
				tooltip: {
					title: 'Заголовок',
					width:100,
					text: 'Текст'
				}
			}
		},{
			title: 'Java',
			html: 'JSP, Java FX, Swing, AWT'
		}],
		renderTo: Ext.getBody()
	});
});

Если бы мы захотели увидеть переключатели вкладок снизу, а не вверху, тогда бы мы установили для панели параметр tabPosition: 'bottom'. tabPosition может принимать четыре значения: top, bottom, left и right, располагая вкладки по всем четырем сторонам панели.

Динамическое добавление/удаление вкладок

Создадим кнопку для добавления новых вкладок:

Ext.create('Ext.button.Button', {
		text    : 'Добавить',
		margin: 10,
		handler : function() {
			var tab = tabpanel.add({
				title: 'Вкладка ' + (tabpanel.items.length + 1),
				html : 'Вкладка ' + (tabpanel.items.length + 1)
			});
			tabpanel.setActiveTab(tab);
		},
		renderTo : Ext.getBody()
	});

Похожим образом можно создать кнопку для удаления вкладки по ее id:

	Ext.create('Ext.button.Button', {
		text    : 'Удалить',
		margin: 10,
		handler : function() {
			var tab = Ext.getCmp('tabId');
			tabpanel.remove(tab);
		},
		renderTo : Ext.getBody()
	});