examples/tabs/tab-scroller-menu.js

   1 Ext.Loader.setConfig({enabled: true});
   2
   3 Ext.Loader.setPath('Ext.ux', '../ux/');
   4
   5 Ext.require([
   6     'Ext.tip.QuickTipManager',
   7     'Ext.window.Window',
   8     'Ext.tab.Panel',
   9     'Ext.ux.TabScrollerMenu'
  10 ]);
  11
  12 Ext.onReady(function() {
  13     // enable the tabTip config below
  14     Ext.tip.QuickTipManager.init();
  15
  16     var win = Ext.createWidget('window', {
  17         height: 400,
  18         width: 600,
  19         layout: 'fit',
  20         title: 'Exercising scrollable tabs with a TabScroller menu',
  21         border: false,
  22         items: {
  23             xtype: 'tabpanel',
  24             activeTab: 0,
  25             itemId: 'tabPanel',
  26             plugins: [{
  27                 ptype: 'tabscrollermenu',
  28                 maxText  : 15,
  29                 pageSize : 5
  30             }],
  31             items: [{
  32                 title: 'First tab',
  33                 html: 'Creating more tabs...'
  34             }]
  35         }
  36     });
  37
  38     win.show();
  39
  40     // Add a bunch of tabs dynamically
  41     var tabLimit = 12,
  42         tabPanel = win.getComponent('tabPanel');
  43
  44     Ext.defer(function (num) {
  45         var i,
  46             title,
  47             tabs = [];
  48         for (i = 1; i <= tabLimit; i++) {
  49             title = 'Tab # ' + i;
  50             tabs.push({
  51                 title: title,
  52                 html: 'Hi, I am tab ' + i,
  53                 tabTip: title,
  54                 closable: true
  55             });
  56         }
  57         tabPanel.add(tabs);
  58         tabPanel.getComponent(0).body.update('Done!');
  59     }, 100);
  60 });