examples/tabs/tab-scroller-menu.js

   1 /*!
   2  * Ext JS Library 3.3.1
   3  * Copyright(c) 2006-2010 Sencha Inc.
   4  * licensing@sencha.com
   5  * http://www.sencha.com/license
   6  */
   7
   8 Ext.onReady(function() {
   9         Ext.QuickTips.init();
  10         // Create our instance of tabScrollerMenu
  11         var scrollerMenu = new Ext.ux.TabScrollerMenu({
  12                 maxText  : 15,
  13                 pageSize : 5
  14         });
  15         new Ext.Window({
  16                 height : 200,
  17                 width  : 400,
  18                 layout : 'fit',
  19                 title  : 'Exercising scrollable tabs with a tabscroller menu',
  20                 items  : {
  21                         xtype           : 'tabpanel',
  22                         activeTab       : 0,
  23                         id              : 'myTPanel',
  24                         enableTabScroll : true,
  25                         resizeTabs      : true,
  26                         minTabWidth     : 75,
  27                         border          : false,
  28                         plugins         : [ scrollerMenu ],
  29                         items           : [
  30                                 {
  31                                         title : 'our first tab'
  32                                 }
  33                         ]
  34                 }
  35         }).show();
  36
  37         // Add a bunch of tabs dynamically
  38         var tabLimit = 22;
  39         (function (num) {
  40                 for (var i = 1; i <= tabLimit; i++) {
  41                         var title = 'Tab # ' + i;
  42                         Ext.getCmp('myTPanel').add({
  43                                 title    : title,
  44                                 html     : 'Hi, i am tab ' + i,
  45                                 tabTip   : title,
  46                                 closable : true
  47                         });
  48                 }
  49         }).defer(1000);
  50
  51 });