Upgrade to ExtJS 3.0.0 - Released 07/06/2009
[extjs.git] / 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 });