examples/tabs/bottom-tabs.js

   1 Ext.require('Ext.tab.*');
   2
   3 Ext.onReady(function(){
   4     // basic tabs 1, built from existing content
   5     var tabs = Ext.createWidget('tabpanel', {
   6         renderTo: 'tabs1',
   7         width: 450,
   8         activeTab: 0,
   9         tabPosition: 'bottom',
  10         defaults :{
  11             bodyPadding: 10
  12         },
  13         items: [{
  14             contentEl:'script',
  15             title: 'Short Text',
  16             closable: true
  17         },{
  18             contentEl:'markup',
  19             title: 'Long Text'
  20         }]
  21     });
  22
  23     // second tabs built from JS
  24     var tabs2 = Ext.createWidget('tabpanel', {
  25         renderTo: document.body,
  26         activeTab: 0,
  27         width: 600,
  28         height: 250,
  29         tabPosition: 'bottom',
  30         plain: true,
  31         defaults :{
  32             autoScroll: true,
  33             bodyPadding: 10
  34         },
  35         items: [{
  36                 title: 'Normal Tab',
  37                 html: "My content was added during construction."
  38             },{
  39                 title: 'Ajax Tab 1',
  40                 loader: {
  41                     url: 'ajax1.htm',
  42                     contentType: 'html',
  43                     loadMask: true
  44                 },
  45                 listeners: {
  46                     activate: function(tab) {
  47                         tab.loader.load();
  48                     }
  49                 }
  50             },{
  51                 title: 'Ajax Tab 2',
  52                 loader: {
  53                     url: 'ajax2.htm',
  54                     contentType: 'html',
  55                     autoLoad: true,
  56                     params: 'foo=123&bar=abc'
  57                 }
  58             },{
  59                 title: 'Event Tab',
  60                 listeners: {
  61                     activate: function(tab){
  62                         alert(tab.title + ' was activated.');
  63                     }
  64                 },
  65                 html: "I am tab 4's content. I also have an event listener attached."
  66             },{
  67                 title: 'Disabled Tab',
  68                 disabled: true,
  69                 html: "Can't see me cause I'm disabled"
  70             }
  71         ]
  72     });
  73 });