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