Roo/form/ComboBoxArray.js
[roojs1] / roojs-bootstrap-debug.js
index 2882ae7..7d88b72 100644 (file)
@@ -210,6 +210,12 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
                 var self_cntr_el = Roo.get(this[cntr](false));
                 var echild =self_cntr_el ? self_cntr_el.child('>*[xtype]') : false;
                 
+                
+                // there is a scenario where some of the child elements are flexy:if (and all of the same type)
+                // and are not displayed -this causes this to use up the wrong element when matching.
+                // at present the only work around for this is to nest flexy:if elements in another element that is always rendered.
+                
+                
                 if (echild && echild.attr('xtype').split('.').pop() == cn.xtype) {
                   //  Roo.log("found child for " + this.xtype +": " + echild.attr('xtype') );
                   
@@ -221,7 +227,8 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
                 } else {
                     Roo.log("MISSING " + cn.xtype + " on child of " + (this.el ? this.el.attr('xbuilderid') : 'no parent'));
                     Roo.log(self_cntr_el);
-                   Roo.log(echild);
+                    Roo.log(echild);
+                    Roo.log(cn);
                 }
             }
            
@@ -838,7 +845,7 @@ Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
             //Roo.log( size + ':' + settings[size]);
             
             if (settings[size+'off'] !== false) {
-                cfg.cls += ' col-' + settings[size+'off'] + '-offset';
+                cfg.cls += ' col-' + size + '-offset-' + settings[size+'off'] ;
             }
             
             if (settings[size] === false) {
@@ -1422,7 +1429,7 @@ Roo.bootstrap.MenuMgr = function(){
    // private
    function onMouseDown(e){
         Roo.log("on MouseDown");
-        if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")){
+        if(lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu") && !e.getTarget('.user-menu')){
            hideAll();
         }
         
@@ -1684,7 +1691,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
     onClick : function(e){
         Roo.log("menu.onClick");
         var t = this.findTargetItem(e);
-        if(!t){
+        if(!t || t.isContainer){
             return;
         }
         Roo.log(e);
@@ -1703,6 +1710,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
             
         }
         */
+       
         Roo.log('pass click event');
         
         t.onClick(e);
@@ -1878,6 +1886,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component,  {
  * @cfg {String} html the menu label
  * @cfg {String} href the link
  * @cfg {Boolean} preventDefault (true | false) default true
+ * @cfg {Boolean} isContainer (true | false) default false
  * 
  * 
  * @constructor
@@ -1904,8 +1913,17 @@ Roo.extend(Roo.bootstrap.MenuItem, Roo.bootstrap.Component,  {
     href : false,
     html : false,
     preventDefault: true,
+    isContainer : false,
     
     getAutoCreate : function(){
+        
+        if(this.isContainer){
+            return {
+                tag: 'li',
+                cls: 'dropdown-menu-item'
+            };
+        }
+        
         var cfg= {
             tag: 'li',
             cls: 'dropdown-menu-item',
@@ -2022,6 +2040,7 @@ Roo.extend(Roo.bootstrap.MenuSeparator, Roo.bootstrap.Component,  {
  * @cfg {Boolean} specificTitle (true|false) default false
  * @cfg {Array} buttons Array of buttons or standard button set..
  * @cfg {String} buttonPosition (left|right|center) default right
+ * @cfg {Boolean} animate (true | false) default true
  * 
  * @constructor
  * Create a new Modal Dialog
@@ -2055,6 +2074,8 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     
     buttonPosition: 'right',
     
+    animate : true,
+    
     onRender : function(ct, position)
     {
         Roo.bootstrap.Component.superclass.onRender.call(this, ct, position);
@@ -2143,8 +2164,8 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
             title = this.title;
         };
         
-        return modal = {
-            cls: "modal fade",
+        var modal = {
+            cls: "modal",
             style : 'display: none',
             cn : [
                 {
@@ -2184,9 +2205,13 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
                         
                 }
             ]
-            
-            
         };
+        
+        if(this.animate){
+            modal.cls += ' fade';
+        }
+        
+        return modal;
           
     },
     getChildContainer : function() {
@@ -2209,10 +2234,16 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
         if (!this.rendered) {
             this.render();
         }
-       
-        this.el.addClass('on');
-        this.el.removeClass('fade');
+        
         this.el.setStyle('display', 'block');
+        
+        if(this.animate){
+            var _this = this;
+            (function(){ _this.el.addClass('in'); }).defer(50);
+        }else{
+            this.el.addClass('in');
+        }
+        
         Roo.get(document.body).addClass("x-body-masked");
         this.maskEl.setSize(Roo.lib.Dom.getViewWidth(true), Roo.lib.Dom.getViewHeight(true));
         this.maskEl.show();
@@ -2223,12 +2254,17 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component,  {
     },
     hide : function()
     {
-        Roo.log('Modal hide?!');
         this.maskEl.hide();
         Roo.get(document.body).removeClass("x-body-masked");
-        this.el.removeClass('on');
-        this.el.addClass('fade');
-        this.el.setStyle('display', 'none');
+        this.el.removeClass('in');
+        
+        if(this.animate){
+            var _this = this;
+            (function(){ _this.el.setStyle('display', 'none'); }).defer(150);
+        }else{
+            this.el.setStyle('display', 'none');
+        }
+        
         this.fireEvent('hide', this);
     },
     
@@ -3473,7 +3509,16 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component,  {
         item.navId = this.navId;
     
     },
-  
+    
+    /**
+    * clear all the Navigation item
+    */
+   
+    clearAll : function()
+    {
+        this.navItems = [];
+        this.el.dom.innerHTML = '';
+    },
     
     getNavItem: function(tabId)
     {
@@ -3674,17 +3719,20 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
         
         return cfg;
     },
-    initEvents: function() {
-       // Roo.log('init events?');
-       // Roo.log(this.el.dom);
+    initEvents: function() 
+    {
         if (typeof (this.menu) != 'undefined') {
             this.menu.parentType = this.xtype;
             this.menu.triggerEl = this.el;
             this.addxtype(Roo.apply({}, this.menu));
         }
-
-       
+        
         this.el.select('a',true).on('click', this.onClick, this);
+        
+        if(this.tagtype == 'span'){
+            this.el.select('span',true).on('click', this.onClick, this);
+        }
+       
         // at this point parent should be available..
         this.parent().register(this);
     },
@@ -3709,6 +3757,11 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
         if(this.fireEvent('click', this, e) === false){
             return;
         };
+        
+        if(this.tagtype == 'span'){
+            return;
+        }
+        
         var p = this.parent();
         if (['tabs','pills'].indexOf(p.type)!==-1) {
             if (typeof(p.setActiveItem) !== 'undefined') {
@@ -10081,7 +10134,7 @@ Roo.extend(Roo.data.JsonReader, Roo.data.DataReader, {
                if (s.id) {
                        var g = this.getJsonAccessor(s.id);
                        this.getId = function(rec) {
-                               var r = g(rec);
+                               var r = g(rec);  
                                return (r === undefined || r === "") ? null : r;
                        };
                } else {
@@ -11096,7 +11149,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
          if (!opts.add) {
             this.list.dom.innerHTML = '<li class="loading-indicator">'+(this.loadingText||'loading')+'</li>' ;
          }
-//        this.restrictHeight();
+        this.restrictHeight();
         this.selectedIndex = -1;
     },
 
@@ -11258,12 +11311,6 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
     setFromData : function(o){
         
         if(this.multiple){
-            if(typeof o.display_name !== 'string'){
-                for(var i=0;i<o.display_name.length;i++){
-                    this.addItem({'id':o.id[i],'display_name':o.display_name[i]});
-                }
-                return;
-            }
             this.addItem(o);
             return;
         }
@@ -11638,9 +11685,6 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         
          Roo.log('expand');
         
-        var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
-        this.list.setWidth(lw);
-            
         this.list.show();
         
         this.restrictHeight();
@@ -14756,7 +14800,7 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
             return value;
         }
         var v = Date.parseDate(value, this.format);
-        if (!v && this.useIso) {
+        if (!v && (this.useIso || value.match(/^(\d{4})-0?(\d+)-0?(\d+)/))) {
             v = Date.parseDate(value, 'Y-m-d');
         }
         if(!v && this.altFormats){
@@ -14827,8 +14871,14 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
 
     setValue: function(v)
     {
-        var d = new Date(v).clearTime();
         
+        // v can be a string or a date..
+        
+        
+        var d = new Date(this.parseDate(v) ).clearTime();
+        
+        Roo.log(d);
+        Roo.log(d);
         if(isNaN(d.getTime())){
             this.date = this.viewDate = '';
             Roo.bootstrap.DateField.superclass.setValue.call(this, '');
@@ -14954,6 +15004,7 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
         var nodeName = target.nodeName;
         var className = target.className;
         var html = target.innerHTML;
+        //Roo.log(nodeName);
         
         switch(nodeName.toLowerCase()) {
             case 'th':
@@ -14986,9 +15037,9 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
                 }
                 break;
             case 'span':
-                if (className.indexOf('disabled') === -1) {
+                if (className.indexOf('disabled') < 0) {
                     this.viewDate.setUTCDate(1);
-                    if (className.indexOf('month') !== -1) {
+                    if (className.indexOf('month') > -1) {
                         this.viewDate.setUTCMonth(Roo.bootstrap.DateField.dates[this.language].monthsShort.indexOf(html));
                     } else {
                         var year = parseInt(html, 10) || 0;
@@ -15001,19 +15052,20 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
                 break;
                 
             case 'td':
-                if (className.indexOf('day') !== -1 && className.indexOf('disabled') === -1){
+                //Roo.log(className);
+                if (className.indexOf('day') > -1 && className.indexOf('disabled') < 0 ){
                     var day = parseInt(html, 10) || 1;
                     var year = this.viewDate.getUTCFullYear(),
                         month = this.viewDate.getUTCMonth();
 
-                    if (className.indexOf('old') !== -1) {
+                    if (className.indexOf('old') > -1) {
                         if(month === 0 ){
                             month = 11;
                             year -= 1;
                         }else{
                             month -= 1;
                         }
-                    } else if (className.indexOf('new') !== -1) {
+                    } else if (className.indexOf('new') > -1) {
                         if (month == 11) {
                             month = 0;
                             year += 1;
@@ -15021,9 +15073,11 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
                             month += 1;
                         }
                     }
+                    //Roo.log([year,month,day]);
                     this.date = this.UTCDate(year, month, day,0,0,0,0);
                     this.viewDate = this.UTCDate(year, month, Math.min(28, day),0,0,0,0);
 //                    this.fill();
+                    //Roo.log(this.formatDate(this.date));
                     this.setValue(this.formatDate(this.date));
                     this.hide();
                 }
@@ -16294,6 +16348,8 @@ Roo.HtmlEditorCore = function(config){
     
     
     Roo.HtmlEditorCore.superclass.constructor.call(this, config);
+    
+    
     this.addEvents({
         /**
          * @event initialize
@@ -16346,7 +16402,14 @@ Roo.HtmlEditorCore = function(config){
          */
         editorevent: true
     });
-     
+    
+    // at this point this.owner is set, so we can start working out the whitelisted / blacklisted elements
+    
+    // defaults : white / black...
+    this.applyBlacklists();
+    
+    
+    
 };
 
 
@@ -16394,6 +16457,9 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
     
     clearUp: true,
     
+    // blacklist + whitelisted elements..
+    black: false,
+    white: false,
      
     
 
@@ -17271,8 +17337,11 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             // clean up silly Windows -- stuff?
             return; 
         }
+        var lcname = node.tagName.toLowerCase();
+        // we ignore whitelists... ?? = not really the way to go, but we probably have not got a full
+        // whitelist of tags..
         
-        if (Roo.HtmlEditorCore.black.indexOf(node.tagName.toLowerCase()) > -1 && this.clearUp) {
+        if (this.black.indexOf(lcname) > -1 && this.clearUp ) {
             // remove node.
             node.parentNode.removeChild(node);
             return;
@@ -17322,15 +17391,15 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
             
         }
         
+        var cwhite = this.cwhite;
+        var cblack = this.cblack;
+            
         function cleanStyle(n,v)
         {
             if (v.match(/expression/)) { //XSS?? should we even bother..
                 node.removeAttribute(n);
                 return;
             }
-            var cwhite = typeof(ed.cwhite) == 'undefined' ? Roo.HtmlEditorCore.cwhite : ed.cwhite;
-            var cblack = typeof(ed.cblack) == 'undefined' ? Roo.HtmlEditorCore.cblack : ed.cblack;
-            
             
             var parts = v.split(/;/);
             var clean = [];
@@ -17343,7 +17412,7 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
                 var l = p.split(':').shift().replace(/\s+/g,'');
                 l = l.replace(/^\s+/g,'').replace(/\s+$/g,'');
                 
-                if ( cblack.indexOf(l) > -1) {
+                if ( cwhite.length && cblack.indexOf(l) > -1) {
 //                    Roo.log('(REMOVE CSS)' + node.tagName +'.' + n + ':'+l + '=' + v);
                     //node.removeAttribute(n);
                     return true;
@@ -17511,107 +17580,199 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
     },
     domToHTML : function(currentElement, depth, nopadtext) {
         
-            depth = depth || 0;
-            nopadtext = nopadtext || false;
+        depth = depth || 0;
+        nopadtext = nopadtext || false;
+    
+        if (!currentElement) {
+            return this.domToHTML(this.doc.body);
+        }
         
-            if (!currentElement) {
-                return this.domToHTML(this.doc.body);
+        //Roo.log(currentElement);
+        var j;
+        var allText = false;
+        var nodeName = currentElement.nodeName;
+        var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
+        
+        if  (nodeName == '#text') {
+            return currentElement.nodeValue;
+        }
+        
+        
+        var ret = '';
+        if (nodeName != 'BODY') {
+             
+            var i = 0;
+            // Prints the node tagName, such as <A>, <IMG>, etc
+            if (tagName) {
+                var attr = [];
+                for(i = 0; i < currentElement.attributes.length;i++) {
+                    // quoting?
+                    var aname = currentElement.attributes.item(i).name;
+                    if (!currentElement.attributes.item(i).value.length) {
+                        continue;
+                    }
+                    attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
+                }
+                
+                ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
+            } 
+            else {
+                
+                // eack
             }
-            
-            //Roo.log(currentElement);
-            var j;
-            var allText = false;
-            var nodeName = currentElement.nodeName;
-            var tagName = Roo.util.Format.htmlEncode(currentElement.tagName);
-            
-            if  (nodeName == '#text') {
-                return currentElement.nodeValue;
+        } else {
+            tagName = false;
+        }
+        if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
+            return ret;
+        }
+        if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
+            nopadtext = true;
+        }
+        
+        
+        // Traverse the tree
+        i = 0;
+        var currentElementChild = currentElement.childNodes.item(i);
+        var allText = true;
+        var innerHTML  = '';
+        lastnode = '';
+        while (currentElementChild) {
+            // Formatting code (indent the tree so it looks nice on the screen)
+            var nopad = nopadtext;
+            if (lastnode == 'SPAN') {
+                nopad  = true;
             }
-            
-            
-            var ret = '';
-            if (nodeName != 'BODY') {
-                 
-                var i = 0;
-                // Prints the node tagName, such as <A>, <IMG>, etc
-                if (tagName) {
-                    var attr = [];
-                    for(i = 0; i < currentElement.attributes.length;i++) {
-                        // quoting?
-                        var aname = currentElement.attributes.item(i).name;
-                        if (!currentElement.attributes.item(i).value.length) {
-                            continue;
-                        }
-                        attr.push(aname + '="' + Roo.util.Format.htmlEncode(currentElement.attributes.item(i).value) + '"' );
-                    }
-                    
-                    ret = "<"+currentElement.tagName+ ( attr.length ? (' ' + attr.join(' ') ) : '') + ">";
-                } 
-                else {
-                    
-                    // eack
+            // text
+            if  (currentElementChild.nodeName == '#text') {
+                var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
+                if (!nopad && toadd.length > 80) {
+                    innerHTML  += "\n" + (new Array( depth + 1 )).join( "  "  );
                 }
-            } else {
-                tagName = false;
+                innerHTML  += toadd;
+                
+                i++;
+                currentElementChild = currentElement.childNodes.item(i);
+                lastNode = '';
+                continue;
             }
-            if (['IMG', 'BR', 'HR', 'INPUT'].indexOf(tagName) > -1) {
-                return ret;
+            allText = false;
+            
+            innerHTML  += nopad ? '' : "\n" + (new Array( depth + 1 )).join( "  "  );
+                
+            // Recursively traverse the tree structure of the child node
+            innerHTML   += this.domToHTML(currentElementChild, depth+1, nopadtext);
+            lastnode = currentElementChild.nodeName;
+            i++;
+            currentElementChild=currentElement.childNodes.item(i);
+        }
+        
+        ret += innerHTML;
+        
+        if (!allText) {
+                // The remaining code is mostly for formatting the tree
+            ret+= nopadtext ? '' : "\n" + (new Array( depth  )).join( "  "  );
+        }
+        
+        
+        if (tagName) {
+            ret+= "</"+tagName+">";
+        }
+        return ret;
+        
+    },
+        
+    applyBlacklists : function()
+    {
+        var w = typeof(this.owner.white) != 'undefined' && this.owner.white ? this.owner.white  : [];
+        var b = typeof(this.owner.black) != 'undefined' && this.owner.black ? this.owner.black :  [];
+        
+        this.white = [];
+        this.black = [];
+        Roo.each(Roo.HtmlEditorCore.white, function(tag) {
+            if (b.indexOf(tag) > -1) {
+                return;
             }
-            if (['PRE', 'TEXTAREA', 'TD', 'A', 'SPAN'].indexOf(tagName) > -1) { // or code?
-                nopadtext = true;
+            this.white.push(tag);
+            
+        }, this);
+        
+        Roo.each(w, function(tag) {
+            if (b.indexOf(tag) > -1) {
+                return;
             }
+            if (this.white.indexOf(tag) > -1) {
+                return;
+            }
+            this.white.push(tag);
             
+        }, this);
+        
+        
+        Roo.each(Roo.HtmlEditorCore.black, function(tag) {
+            if (w.indexOf(tag) > -1) {
+                return;
+            }
+            this.black.push(tag);
             
-            // Traverse the tree
-            i = 0;
-            var currentElementChild = currentElement.childNodes.item(i);
-            var allText = true;
-            var innerHTML  = '';
-            lastnode = '';
-            while (currentElementChild) {
-                // Formatting code (indent the tree so it looks nice on the screen)
-                var nopad = nopadtext;
-                if (lastnode == 'SPAN') {
-                    nopad  = true;
-                }
-                // text
-                if  (currentElementChild.nodeName == '#text') {
-                    var toadd = Roo.util.Format.htmlEncode(currentElementChild.nodeValue);
-                    if (!nopad && toadd.length > 80) {
-                        innerHTML  += "\n" + (new Array( depth + 1 )).join( "  "  );
-                    }
-                    innerHTML  += toadd;
-                    
-                    i++;
-                    currentElementChild = currentElement.childNodes.item(i);
-                    lastNode = '';
-                    continue;
-                }
-                allText = false;
-                
-                innerHTML  += nopad ? '' : "\n" + (new Array( depth + 1 )).join( "  "  );
-                    
-                // Recursively traverse the tree structure of the child node
-                innerHTML   += this.domToHTML(currentElementChild, depth+1, nopadtext);
-                lastnode = currentElementChild.nodeName;
-                i++;
-                currentElementChild=currentElement.childNodes.item(i);
+        }, this);
+        
+        Roo.each(b, function(tag) {
+            if (w.indexOf(tag) > -1) {
+                return;
+            }
+            if (this.black.indexOf(tag) > -1) {
+                return;
             }
+            this.black.push(tag);
             
-            ret += innerHTML;
+        }, this);
+        
+        
+        w = typeof(this.owner.cwhite) != 'undefined' && this.owner.cwhite ? this.owner.cwhite  : [];
+        b = typeof(this.owner.cblack) != 'undefined' && this.owner.cblack ? this.owner.cblack :  [];
+        
+        this.cwhite = [];
+        this.cblack = [];
+        Roo.each(Roo.HtmlEditorCore.cwhite, function(tag) {
+            if (b.indexOf(tag) > -1) {
+                return;
+            }
+            this.cwhite.push(tag);
             
-            if (!allText) {
-                    // The remaining code is mostly for formatting the tree
-                ret+= nopadtext ? '' : "\n" + (new Array( depth  )).join( "  "  );
+        }, this);
+        
+        Roo.each(w, function(tag) {
+            if (b.indexOf(tag) > -1) {
+                return;
+            }
+            if (this.cwhite.indexOf(tag) > -1) {
+                return;
             }
+            this.cwhite.push(tag);
             
+        }, this);
+        
+        
+        Roo.each(Roo.HtmlEditorCore.cblack, function(tag) {
+            if (w.indexOf(tag) > -1) {
+                return;
+            }
+            this.cblack.push(tag);
             
-            if (tagName) {
-                ret+= "</"+tagName+">";
+        }, this);
+        
+        Roo.each(b, function(tag) {
+            if (w.indexOf(tag) > -1) {
+                return;
             }
-            return ret;
+            if (this.cblack.indexOf(tag) > -1) {
+                return;
+            }
+            this.cblack.push(tag);
             
-        }
+        }, this);
+    }
     
     // hide stuff that is not compatible
     /**
@@ -19728,6 +19889,7 @@ Roo.bootstrap.dash = Roo.bootstrap.dash || {};
  * @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
@@ -19744,9 +19906,18 @@ 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,  {
@@ -19754,6 +19925,7 @@ Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {
     title : '',
     icon : false,
     showtabs : true,
+    tabScrollable : false,
     
     getChildContainer : function()
     {
@@ -19776,18 +19948,35 @@ 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',
@@ -19813,6 +20002,7 @@ Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {
     },
     onAddPane : function(pane)
     {
+        this.panes.push(pane);
         //Roo.log('addpane');
         //Roo.log(pane);
         // tabs are rendere left to right..
@@ -19859,11 +20049,26 @@ Roo.extend(Roo.bootstrap.dash.TabBox, Roo.bootstrap.Component,  {
         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()
+    {
+        var r = false;
+        Roo.each(this.panes, function(p) {
+            if(p.el.hasClass('active')){
+                r = p;
+                return false;
+            }
+            
+            return;
+        });
+        
+        return r;
     }