docs/source/tabs-example.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(){\r
   9     // basic tabs 1, built from existing content\r
  10     var tabs = new Ext.TabPanel({\r
  11         renderTo: 'tabs1',\r
  12         width:450,\r
  13         activeTab: 0,\r
  14         frame:true,\r
  15         defaults:{autoHeight: true},\r
  16         items:[\r
  17             {contentEl:'script', title: 'Short Text'},\r
  18             {contentEl:'markup', title: 'Long Text'}\r
  19         ]\r
  20     });\r
  21 \r
  22     // second tabs built from JS\r
  23     var tabs2 = new Ext.TabPanel({\r
  24         renderTo: document.body,\r
  25         activeTab: 0,\r
  26         width:600,\r
  27         height:250,\r
  28         plain:true,\r
  29         defaults:{autoScroll: true},\r
  30         items:[{\r
  31                 title: 'Normal Tab',\r
  32                 html: "My content was added during construction."\r
  33             },{\r
  34                 title: 'Ajax Tab 1',\r
  35                 autoLoad:'ajax1.htm'\r
  36             },{\r
  37                 title: 'Ajax Tab 2',\r
  38                 autoLoad: {url: 'ajax2.htm', params: 'foo=bar&wtf=1'}\r
  39             },{\r
  40                 title: 'Event Tab',\r
  41                 listeners: {activate: handleActivate},\r
  42                 html: "I am tab 4's content. I also have an event listener attached."\r
  43             },{\r
  44                 title: 'Disabled Tab',\r
  45                 disabled:true,\r
  46                 html: "Can't see me cause I'm disabled"\r
  47             }\r
  48         ]\r
  49     });\r
  50 \r
  51     function handleActivate(tab){\r
  52         alert(tab.title + ' was activated.');\r
  53     }\r
  54 });</pre>    \r
  55 </body>\r
  56 </html>