examples/tabs/tabs-example.js

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