examples/tabs/tabs-example.js

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