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     this.panes = [];
  44 };
  45
  46 Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {
  47
  48     title : '',
  49     icon : false,
  50     showtabs : true,
  51
  52     getChildContainer : function()
  53     {
  54         return this.el.select('.tab-content', true).first();
  55     },
  56
  57     getAutoCreate : function(){
  58
  59         var header = {
  60             tag: 'li',
  61             cls: 'pull-left header',
  62             html: this.title,
  63             cn : []
  64         };
  65
  66         if(this.icon){
  67             header.cn.push({
  68                 tag: 'i',
  69                 cls: 'fa ' + this.icon
  70             });
  71         }
  72
  73
  74         var cfg = {
  75             tag: 'div',
  76             cls: 'nav-tabs-custom',
  77             cn: [
  78                 {
  79                     tag: 'div',
  80                     cls: 'tab-header',
  81                     cn: [
  82                         {
  83                             tag: 'ul',
  84                             cls: 'nav nav-tabs pull-right',
  85                             cn: [
  86                                 header
  87                             ]
  88                         }
  89                     ]
  90                 },
  91                 {
  92                     tag: 'div',
  93                     cls: 'tab-content no-padding',
  94                     cn: []
  95                 }
  96             ]
  97         }
  98
  99         return  cfg;
 100     },
 101     initEvents : function()
 102     {
 103         //Roo.log('add add pane handler');
 104         this.on('addpane', this.onAddPane, this);
 105     },
 106      /**
 107      * Updates the box title
 108      * @param {String} html to set the title to.
 109      */
 110     setTitle : function(value)
 111     {
 112         this.el.select('.nav-tabs .header', true).first().dom.innerHTML = value;
 113     },
 114     onAddPane : function(pane)
 115     {
 116         this.panes.push(pane);
 117         //Roo.log('addpane');
 118         //Roo.log(pane);
 119         // tabs are rendere left to right..
 120         if(!this.showtabs){
 121             return;
 122         }
 123
 124         var ctr = this.el.select('.nav-tabs', true).first();
 125
 126
 127         var existing = ctr.select('.nav-tab',true);
 128         var qty = existing.getCount();;
 129
 130
 131         var tab = ctr.createChild({
 132             tag : 'li',
 133             cls : 'nav-tab' + (qty ? '' : ' active'),
 134             cn : [
 135                 {
 136                     tag : 'a',
 137                     href:'#',
 138                     html : pane.title
 139                 }
 140             ]
 141         }, qty ? existing.first().dom : ctr.select('.header', true).first().dom );
 142         pane.tab = tab;
 143
 144         tab.on('click', this.onTabClick.createDelegate(this, [pane], true));
 145         if (!qty) {
 146             pane.el.addClass('active');
 147         }
 148
 149
 150     },
 151     onTabClick : function(ev,un,ob,pane)
 152     {
 153         //Roo.log('tab - prev default');
 154         ev.preventDefault();
 155
 156
 157         this.el.select('.nav-tabs li.nav-tab', true).removeClass('active');
 158         pane.tab.addClass('active');
 159         //Roo.log(pane.title);
 160         this.getChildContainer().select('.tab-pane',true).removeClass('active');
 161         // technically we should have a deactivate event.. but maybe add later.
 162         // and it should not de-activate the selected tab...
 163         this.fireEvent('activatepane', pane);
 164         pane.el.addClass('active');
 165         pane.fireEvent('activate');
 166
 167
 168     },
 169
 170     getActivePane : function()
 171     {
 172         var r = false;
 173         Roo.each(this.panes, function(p) {
 174             if(p.el.hasClass('active')){
 175                 r = p;
 176                 return false;
 177             }
 178
 179             return;
 180         });
 181
 182         return r;
 183     }
 184
 185
 186 });
 187
 188