За панель с табами отвечает класс Ext.tab.Panel. Примеры взяты из документации, с моими небольшими комментариями и корректировками.
Сделаем простую панель с двумя табами.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Ext.tip.QuickTipManager.init(); // Для подсказок Ext.create('Ext.tab.Panel', { width: 400, height: 400, renderTo: document.body, draggable:true, //Перетаскиваемость //Далее, собственно сами табы items: [{ title: 'First Tab', html:'some html', bodyPadding: 10 //Настройка паддинга в одном из html табов }, { title: 'Second Tab', html:'some html2', tabConfig: { // <<< Секция с подсказками title: 'That is second tab', //<<< Этот title будет использоваться вместо html:'some html2' tooltip: 'custom tooltip' } }] }); |
Программное добавление / удаление табов
Добавление
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// Создадим первые 2 таба var tabs = Ext.create('Ext.tab.Panel', { items: [ { title: 'Tab 1', html : 'A simple tab' }, { title: 'Tab 2', html : 'Another one' } ], renderTo : Ext.getBody() }); //Создадим кнопку для добавления новых табов Ext.create('Ext.button.Button', { text : 'New tab', scope : this, handler : function() { var tab = tabs.add({ // we use the tabs.items property to get the length of current items/tabs title: 'Tab ' + (tabs.items.length + 1), html : 'Another one' }); tabs.setActiveTab(tab); }, renderTo : Ext.getBody() }); |
Удаление
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
var tabs = Ext.create('Ext.tab.Panel', { items: [ { title: 'Tab 1', html : 'A simple tab' }, { id : 'remove-this-tab', title: 'Tab 2', html : 'Another one' } ], renderTo : Ext.getBody() }); Ext.create('Ext.button.Button', { text : 'Remove tab', scope : this, handler : function() { var tab = Ext.getCmp('remove-this-tab'); tabs.remove(tab); }, renderTo : Ext.getBody() }); |