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