major doc changes

[roojs1] / Roo / bootstrap / dash / TabBox.js

diff --git a/Roo/bootstrap/dash/TabBox.js b/Roo/bootstrap/dash/TabBox.js
index 368e8dd..7753f85 100644 (file)
--- a/Roo/bootstrap/dash/TabBox.js
+++ b/Roo/bootstrap/dash/TabBox.js
@@ -9,9 +9,12 @@ Roo.bootstrap.dash = Roo.bootstrap.dash || {};
 /**
  * @class Roo.bootstrap.dash.TabBox
  * @extends Roo.bootstrap.Component
+ * @children Roo.bootstrap.dash.TabPane
  * Bootstrap TabBox class
  * @cfg {String} title Title of the TabBox
  * @cfg {String} icon Icon of the TabBox
+ * @cfg {Boolean} showtabs (true|false) show the tabs default true
+ * @cfg {Boolean} tabScrollable (true|false) tab scrollable when mobile view default false
  * 
  * @constructor
  * Create a new TabBox
@@ -28,15 +31,26 @@ Roo.bootstrap.dash.TabBox = function(config){
          * When a pane is added
          * @param {Roo.bootstrap.dash.TabPane} pane
          */
-        "addpane" : true
+        "addpane" : true,
+        /**
+         * @event activatepane
+         * When a pane is activated
+         * @param {Roo.bootstrap.dash.TabPane} pane
+         */
+        "activatepane" : true
+        
          
     });
+    
+    this.panes = [];
 };
 
 Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {
 
     title : '',
     icon : false,
+    showtabs : true,
+    tabScrollable : false,
     
     getChildContainer : function()
     {
@@ -59,49 +73,78 @@ Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {
             });
         }
         
+        var h = {
+            tag: 'ul',
+            cls: 'nav nav-tabs pull-right',
+            cn: [
+                header
+            ]
+        };
+        
+        if(this.tabScrollable){
+            h = {
+                tag: 'div',
+                cls: 'tab-header',
+                cn: [
+                    {
+                        tag: 'ul',
+                        cls: 'nav nav-tabs pull-right',
+                        cn: [
+                            header
+                        ]
+                    }
+                ]
+            };
+        }
         
         var cfg = {
             tag: 'div',
             cls: 'nav-tabs-custom',
             cn: [
-                {
-                    tag: 'ul',
-                    cls: 'nav nav-tabs pull-right',
-                    cn: [
-                        header
-                    ]
-                },
+                h,
                 {
                     tag: 'div',
                     cls: 'tab-content no-padding',
                     cn: []
                 }
             ]
-        }
+        };
 
         return  cfg;
     },
     initEvents : function()
     {
-        Roo.log('add add pane handler');
+        //Roo.log('add add pane handler');
         this.on('addpane', this.onAddPane, this);
     },
-    
+     /**
+     * Updates the box title
+     * @param {String} html to set the title to.
+     */
     setTitle : function(value)
     {
-        this.el.select('.header', true).first().dom.innerHTML = value;
+        this.el.select('.nav-tabs .header', true).first().dom.innerHTML = value;
     },
     onAddPane : function(pane)
     {
-        Roo.log('addpane');
-        Roo.log(pane);
+        this.panes.push(pane);
+        //Roo.log('addpane');
+        //Roo.log(pane);
         // tabs are rendere left to right..
+        if(!this.showtabs){
+            return;
+        }
+        
         var ctr = this.el.select('.nav-tabs', true).first();
          
+         
+        var existing = ctr.select('.nav-tab',true);
+        var qty = existing.getCount();;
+        
         
         var tab = ctr.createChild({
             tag : 'li',
-            cls : 'active',
+            cls : 'nav-tab' + (qty ? '' : ' active'),
             cn : [
                 {
                     tag : 'a',
@@ -109,17 +152,48 @@ Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {
                     html : pane.title
                 }
             ]
-            
-            
-        });
+        }, qty ? existing.first().dom : ctr.select('.header', true).first().dom );
         pane.tab = tab;
         
-        tab.on('click', this.onTabClick, pane);
+        tab.on('click', this.onTabClick.createDelegate(this, [pane], true));
+        if (!qty) {
+            pane.el.addClass('active');
+        }
+        
                 
     },
-    onTabClick : function(e,el, pane)
+    onTabClick : function(ev,un,ob,pane)
+    {
+        //Roo.log('tab - prev default');
+        ev.preventDefault();
+        
+        
+        this.el.select('.nav-tabs li.nav-tab', true).removeClass('active');
+        pane.tab.addClass('active');
+        //Roo.log(pane.title);
+        this.getChildContainer().select('.tab-pane',true).removeClass('active');
+        // technically we should have a deactivate event.. but maybe add later.
+        // and it should not de-activate the selected tab...
+        this.fireEvent('activatepane', pane);
+        pane.el.addClass('active');
+        pane.fireEvent('activate');
+        
+        
+    },
+    
+    getActivePane : function()
     {
-        Roo.log(pane)
+        var r = false;
+        Roo.each(this.panes, function(p) {
+            if(p.el.hasClass('active')){
+                r = p;
+                return false;
+            }
+            
+            return;
+        });
+        
+        return r;
     }