docs/source/tabs-adv.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">Ext.onReady(function(){
   9
  10     var tabs = new Ext.TabPanel({
  11         renderTo:'tabs',
  12         resizeTabs:true, // turn on tab resizing
  13         minTabWidth: 115,
  14         tabWidth:135,
  15         enableTabScroll:true,
  16         width:600,
  17         height:250,
  18         defaults: {autoScroll:true},
  19         plugins: new Ext.ux.TabCloseMenu()
  20     });
  21
  22     // tab generation code
  23     var index = 0;
  24     while(index < 7){
  25         addTab();
  26     }
  27     function addTab(){
  28         tabs.add({
  29             title: 'New Tab ' + (++index),
  30             iconCls: 'tabs',
  31             html: 'Tab Body ' + (index) + '<br/><br/>'
  32                     + Ext.example.bogusMarkup,
  33             closable:true
  34         }).show();
  35     }
  36
  37     new Ext.Button({
  38         text: 'Add Tab',
  39         handler: addTab,
  40         iconCls:'new-tab'
  41     }).render(document.body, 'tabs');
  42 });</pre>    \r
  43 </body>\r
  44 </html>