Upgrade to ExtJS 3.2.1 - Released 04/27/2010
[extjs.git] / src / ext-core / examples / tabs / tabs.js
1 /*!
2  * Ext JS Library 3.2.1
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 });