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