docs/source/tab-scroller-menu.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   8     <pre class="prettyprint lang-js">
   9 Ext.onReady(function() {
  10         Ext.QuickTips.init();
  11         // Create our instance of tabScrollerMenu
  12         var scrollerMenu = new Ext.ux.TabScrollerMenu({
  13                 maxText  : 15,
  14                 pageSize : 5
  15         });
  16         new Ext.Window({
  17                 height : 200,
  18                 width  : 400,
  19                 layout : 'fit',
  20                 title  : 'Exercising scrollable tabs with a tabscroller menu',
  21                 items  : {
  22                         xtype           : 'tabpanel',
  23                         activeTab       : 0,
  24                         id              : 'myTPanel',
  25                         enableTabScroll : true,
  26                         resizeTabs      : true,
  27                         minTabWidth     : 75,
  28                         border          : false,
  29                         plugins         : [ scrollerMenu ],
  30                         items           : [
  31                                 {
  32                                         title : 'our first tab'
  33                                 }
  34                         ]
  35                 }
  36         }).show();
  37
  38         // Add a bunch of tabs dynamically
  39         var tabLimit = 22;
  40         (function (num) {
  41                 for (var i = 1; i <= tabLimit; i++) {
  42                         var title = 'Tab # ' + i;
  43                         Ext.getCmp('myTPanel').add({
  44                                 title    : title,
  45                                 html     : 'Hi, i am tab ' + i,
  46                                 tabTip   : title,
  47                                 closable : true
  48                         });
  49                 }
  50         }).defer(1000);
  51
  52 });</pre>    \r
  53 </body>\r
  54 </html>