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