src/ext-core/examples/tabs/tabs.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.ns('Ext.ux');
   8
   9 Ext.ux.Tabs = Ext.extend(Ext.util.Observable, {
  10         // Configuration options
  11     activeTab: 0,
  12
  13         // Our class constructor
  14     constructor : function(element, config) {
  15         Ext.apply(this, config);
  16         Ext.ux.Tabs.superclass.constructor.call(this);
  17
  18         this.addEvents(
  19             'beforetabchange',
  20             'tabchange'
  21         );
  22
  23         this.el = Ext.get(element);
  24         this.init();
  25     },
  26
  27     init : function() {
  28         var me = this;
  29
  30                 this.el.addClass('ux-tabs-container');
  31
  32                 this.tabStrip = this.el.child('ul');
  33                 this.tabStrip.addClass('ux-tabs-strip');
  34
  35                 this.tabStrip.on('click', this.onStripClick, this, {delegate: 'a'});
  36
  37                 this.tabs = this.tabStrip.select('> li');
  38                 this.cards = this.el.select('> div');
  39
  40                 this.cardsContainer = this.el.createChild({
  41                         cls: 'ux-tabs-cards'
  42                 });
  43                 this.cardsContainer.setWidth(this.el.getWidth());
  44
  45                 this.cards.addClass('ux-tabs-card');
  46                 this.cards.appendTo(this.cardsContainer);
  47
  48                 this.el.createChild({
  49                         cls: 'ux-tabs-clearfix'
  50                 });
  51
  52                 this.setActiveTab(this.activeTab || 0);
  53         },
  54
  55         onStripClick : function(ev, t) {
  56                 if(t && t.href && t.href.indexOf('#')) {
  57                         ev.preventDefault();
  58                         this.setActiveTab(t.href.split('#')[1]);
  59                 }
  60         },
  61
  62         setActiveTab : function(tab) {
  63                 var card;
  64                 if(Ext.isString(tab)) {
  65                         card = Ext.get(tab);
  66                         tab = this.tabStrip.child('a[href=#' + tab + ']').parent();
  67                 }
  68                 else if (Ext.isNumber(tab)) {
  69                         tab = this.tabs.item(tab);
  70                         card = Ext.get(tab.first().dom.href.split('#')[1]);
  71                 }
  72
  73                 if(tab && card && this.fireEvent('beforetabchange', tab, card) !== false) {
  74                         card.radioClass('ux-tabs-card-active');
  75                         tab.radioClass('ux-tabs-tab-active');
  76                         this.fireEvent('tabchange', tab, card);
  77                 }
  78         }
  79 });