examples/tabs/tabs-example.js

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