git.roojs.org Git - roojs1/blob - Roo/bootstrap/dash/TabBox.js

   1 /*
   2  * - LGPL
   3  *
   4  * TabBox
   5  *
   6  */
   7 Roo.bootstrap.dash = Roo.bootstrap.dash || {};
   8
   9 /**
  10  * @class Roo.bootstrap.dash.TabBox
  11  * @extends Roo.bootstrap.Component
  12  * Bootstrap TabBox class
  13  * @cfg {String} title Title of the TabBox
  14  * @cfg {String} icon Icon of the TabBox
  15  * @cfg {Boolean} showtabs (true|false) show the tabs default true
  16  *
  17  * @constructor
  18  * Create a new TabBox
  19  * @param {Object} config The config object
  20  */
  21
  22
  23 Roo.bootstrap.dash.TabBox = function(config){
  24     Roo.bootstrap.dash.TabBox.superclass.constructor.call(this, config);
  25     this.addEvents({
  26         // raw events
  27         /**
  28          * @event addpane
  29          * When a pane is added
  30          * @param {Roo.bootstrap.dash.TabPane} pane
  31          */
  32         "addpane" : true,
  33         /**
  34          * @event activatepane
  35          * When a pane is activated
  36          * @param {Roo.bootstrap.dash.TabPane} pane
  37          */
  38         "activatepane" : true
  39
  40
  41     });
  42 };
  43
  44 Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {
  45
  46     title : '',
  47     icon : false,
  48     showtabs : true,
  49
  50     getChildContainer : function()
  51     {
  52         return this.el.select('.tab-content', true).first();
  53     },
  54
  55     getAutoCreate : function(){
  56
  57         var header = {
  58             tag: 'li',
  59             cls: 'pull-left header',
  60             html: this.title,
  61             cn : []
  62         };
  63
  64         if(this.icon){
  65             header.cn.push({
  66                 tag: 'i',
  67                 cls: 'fa ' + this.icon
  68             });
  69         }
  70
  71
  72         var cfg = {
  73             tag: 'div',
  74             cls: 'nav-tabs-custom',
  75             cn: [
  76                 {
  77                     tag: 'ul',
  78                     cls: 'nav nav-tabs pull-right',
  79                     cn: [
  80                         header
  81                     ]
  82                 },
  83                 {
  84                     tag: 'div',
  85                     cls: 'tab-content no-padding',
  86                     cn: []
  87                 }
  88             ]
  89         }
  90
  91         return  cfg;
  92     },
  93     initEvents : function()
  94     {
  95         //Roo.log('add add pane handler');
  96         this.on('addpane', this.onAddPane, this);
  97     },
  98      /**
  99      * Updates the box title
 100      * @param {String} html to set the title to.
 101      */
 102     setTitle : function(value)
 103     {
 104         this.el.select('.nav-tabs .header', true).first().dom.innerHTML = value;
 105     },
 106     onAddPane : function(pane)
 107     {
 108         //Roo.log('addpane');
 109         //Roo.log(pane);
 110         // tabs are rendere left to right..
 111         if(!this.showtabs){
 112             return;
 113         }
 114
 115         var ctr = this.el.select('.nav-tabs', true).first();
 116
 117
 118         var existing = ctr.select('.nav-tab',true);
 119         var qty = existing.getCount();;
 120
 121
 122         var tab = ctr.createChild({
 123             tag : 'li',
 124             cls : 'nav-tab' + (qty ? '' : ' active'),
 125             cn : [
 126                 {
 127                     tag : 'a',
 128                     href:'#',
 129                     html : pane.title
 130                 }
 131             ]
 132         }, qty ? existing.first().dom : ctr.select('.header', true).first().dom );
 133         pane.tab = tab;
 134
 135         tab.on('click', this.onTabClick.createDelegate(this, [pane], true));
 136         if (!qty) {
 137             pane.el.addClass('active');
 138         }
 139
 140
 141     },
 142     onTabClick : function(ev,un,ob,pane)
 143     {
 144         //Roo.log('tab - prev default');
 145         ev.preventDefault();
 146
 147
 148         this.el.select('.nav-tabs li.nav-tab', true).removeClass('active');
 149         pane.tab.addClass('active');
 150         //Roo.log(pane.title);
 151         this.getChildContainer().select('.tab-pane',true).removeClass('active');
 152         // technically we should have a deactivate event.. but maybe add later.
 153         // and it should not de-activate the selected tab...
 154         thie.fireEvent('activatepane', pane);
 155         pane.el.addClass('active');
 156         pane.fireEvent('activate');
 157
 158
 159     }
 160
 161
 162 });
 163
 164