Roo/form/ComboBoxArray.js
[roojs1] / roojs-bootstrap-debug.js
index db7c7bb..4562370 100644 (file)
@@ -189,7 +189,7 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
           
         
         
-        
+         skip_children = false;
         // render the element if it's not BODY.
         if (tree.xtype != 'Body') {
            
@@ -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') );
                   
@@ -220,16 +226,24 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
                     //echild.dom.removeAttribute('xtype');
                 } 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(cn);
                 }
             }
            
             
-               
+           
             // if object has flexy:if - then it may or may not be rendered.
             if (build_from_html && has_flexy && !cn.el &&  cn.can_build_overlaid) {
                 // skip a flexy if element.
                 Roo.log('skipping render');
+                Roo.log(tree);
+                if (!cn.el) {
+                    Roo.log('skipping all children');
+                    skip_children = true;
+                }
+                
              } else {
                  
                 // actually if flexy:foreach is found, we really want to create 
@@ -262,10 +276,12 @@ Roo.extend(Roo.bootstrap.Component, Roo.BoxComponent,  {
         
         //Roo.log(items.length);
             // add the items..
-        for(var i =0;i < items.length;i++) {
-            nitems.push(cn.addxtype(Roo.apply({}, items[i])));
+        if (!skip_children) {    
+            for(var i =0;i < items.length;i++) {
+                nitems.push(cn.addxtype(Roo.apply({}, items[i])));
+            }
         }
-       
+        
         cn.items = nitems;
        
         return cn;
@@ -774,6 +790,19 @@ Roo.extend(Roo.bootstrap.Button, Roo.bootstrap.Component,  {
  * @cfg {Number} sm colspan out of 12 for tablet-sized screens or 0 for hidden
  * @cfg {Number} md colspan out of 12 for computer-sized screens or 0 for hidden
  * @cfg {Number} lg colspan out of 12 for large computer-sized screens or 0 for hidden
+ * @cfg {Number} xsoff colspan offset out of 12 for mobile-sized screens or 0 for hidden
+ * @cfg {Number} smoff colspan offset out of 12 for tablet-sized screens or 0 for hidden
+ * @cfg {Number} mdoff colspan offset out of 12 for computer-sized screens or 0 for hidden
+ * @cfg {Number} lgoff colspan offset out of 12 for large computer-sized screens or 0 for hidden
+ *
+ * 
+ * @cfg {Boolean} hidden (true|false) hide the element
+ * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
+ * @cfg {String} fa (ban|check|...) font awesome icon
+ * @cfg {Number} fasize (1|2|....) font awsome size
+
+ * @cfg {String} icon (info-sign|check|...) glyphicon name
+
  * @cfg {String} html content of column.
  * 
  * @constructor
@@ -791,8 +820,17 @@ Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
     sm: false,
     md: false,
     lg: false,
+    xsoff: false,
+    smoff: false,
+    mdoff: false,
+    lgoff: false,
     html: '',
     offset: 0,
+    alert: false,
+    fa: false,
+    icon : false,
+    hidden : false,
+    fasize : 1,
     
     getAutoCreate : function(){
         var cfg = Roo.apply({}, Roo.bootstrap.Column.superclass.getAutoCreate.call(this));
@@ -804,18 +842,49 @@ Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
         
         var settings=this;
         ['xs','sm','md','lg'].map(function(size){
-            if (settings[size] !== false) {
-                if (!settings[size]) { // 0 = hidden
-                    cfg.cls += ' hidden-' + size;
-                    return;
-                }
-                cfg.cls += ' col-' + size + '-' + settings[size];
+            //Roo.log( size + ':' + settings[size]);
+            
+            if (settings[size+'off'] !== false) {
+                cfg.cls += ' col-' + size + '-offset-' + settings[size+'off'] ;
             }
+            
+            if (settings[size] === false) {
+                return;
+            }
+            Roo.log(settings[size]);
+            if (!settings[size]) { // 0 = hidden
+                cfg.cls += ' hidden-' + size;
+                return;
+            }
+            cfg.cls += ' col-' + size + '-' + settings[size];
+            
         });
+        
+        if (this.hidden) {
+            cfg.cls += ' hidden';
+        }
+        
+        if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
+            cfg.cls +=' alert alert-' + this.alert;
+        }
+        
+        
         if (this.html.length) {
             cfg.html = this.html;
         }
-       
+        if (this.fa) {
+            var fasize = '';
+            if (this.fasize > 1) {
+                fasize = ' fa-' + this.fasize + 'x';
+            }
+            cfg.html = '<i class="fa fa-'+this.fa + fasize + '"></i>' + (cfg.html || '');
+            
+            
+        }
+        if (this.icon) {
+            cfg.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + + (cfg.html || '')
+        }
+        
         return cfg;
     }
    
@@ -843,6 +912,10 @@ Roo.extend(Roo.bootstrap.Column, Roo.bootstrap.Component,  {
  * @cfg {String} footer content of footer (for panel)
  * @cfg {String} sticky (footer|wrap|push) block to use as footer or body- needs css-bootstrap/sticky-footer.css
  * @cfg {String} tag (header|aside|section) type of HTML tag.
+ * @cfg {String} alert (success|info|warning|danger) type alert (changes background / border...)
+ * @cfg {String} fa (ban|check|...) font awesome icon
+ * @cfg {String} icon (info-sign|check|...) glyphicon name
+ * @cfg {Boolean} hidden (true|false) hide the element
 
  *     
  * @constructor
@@ -863,6 +936,9 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
     footer : '',
     sticky: '',
     tag : false,
+    alert : false,
+    fa: false,
+    icon : false,
   
      
     getChildContainer : function() {
@@ -889,6 +965,9 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
         if (this.jumbotron) {
             cfg.cls = 'jumbotron';
         }
+        
+        
+        
         // - this is applied by the parent..
         //if (this.cls) {
         //    cfg.cls = this.cls + '';
@@ -918,6 +997,15 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
             }
         }
         
+        if (this.hidden) {
+            cfg.cls += ' hidden';
+        }
+        
+        
+        if (this.alert && ["success","info","warning", "danger"].indexOf(this.alert) > -1) {
+            cfg.cls +=' alert alert-' + this.alert;
+        }
+        
         var body = cfg;
         
         if (this.panel.length) {
@@ -954,6 +1042,15 @@ Roo.extend(Roo.bootstrap.Container, Roo.bootstrap.Component,  {
         
         if (body) {
             body.html = this.html || cfg.html;
+            // prefix with the icons..
+            if (this.fa) {
+                body.html = '<i class="fa fa-'+this.fa + '"></i>' + body.html ;
+            }
+            if (this.icon) {
+                body.html = '<i class="glyphicon glyphicon-'+this.icon + '"></i>' + body.html ;
+            }
+            
+            
         }
         if ((!this.cls || !this.cls.length) && (!cfg.cls || !cfg.cls.length)) {
             cfg.cls =  'container';
@@ -1112,6 +1209,8 @@ Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component,  {
  * @cfg {String} href a tag href
  * @cfg {String} target (_self|_blank|_parent|_top) target for a href.
  * @cfg {String} html the content of the link.
+ * @cfg {String} anchor name for the anchor link
+
  * @cfg {Boolean} preventDefault (true | false) default false
 
  * 
@@ -1139,20 +1238,35 @@ Roo.extend(Roo.bootstrap.Link, Roo.bootstrap.Component,  {
     href: false,
     target: false,
     preventDefault: false,
+    anchor : false,
+    alt : false,
 
-    getAutoCreate : function(){
+    getAutoCreate : function()
+    {
         
         var cfg = {
-            tag: 'a',
-            html : this.html || 'html-missing'
+            tag: 'a'
+        };
+        // anchor's do not require html/href...
+        if (this.anchor === false) {
+            cfg.html = this.html || 'html-missing';
+            cfg.href = this.href || '#';
+        } else {
+            cfg.name = this.anchor;
+            if (this.html !== false) {
+                cfg.html = this.html;
+            }
+            if (this.href !== false) {
+                cfg.href = this.href;
+            }
         }
         
-        
-        if(this.alt){
+        if(this.alt !== false){
             cfg.alt = this.alt;
         }
-        cfg.href = this.href || '#';
-        if(this.target){
+        
+        
+        if(this.target !== false) {
             cfg.target = this.target;
         }
         
@@ -3216,8 +3330,8 @@ Roo.bootstrap.NavGroup = function(config){
             * @event changed
             * Fires when the active item changes
             * @param {Roo.bootstrap.NavGroup} this
-            * @param {Roo.bootstrap.Navbar.Item} item The item selected
-            * @param {Roo.bootstrap.Navbar.Item} item The previously selected item 
+            * @param {Roo.bootstrap.Navbar.Item} selected The item selected
+            * @param {Roo.bootstrap.Navbar.Item} prev The previously selected item 
          */
         'changed': true
      });
@@ -3366,7 +3480,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)
     {
@@ -3602,12 +3725,18 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component,  {
         if(this.fireEvent('click', this, e) === false){
             return;
         };
-        
-        if (['tabs','pills'].indexOf(this.parent().type)!==-1) {
-            if (typeof(this.parent().setActiveItem) !== 'undefined') {
-                this.parent().setActiveItem(this);
+        var p = this.parent();
+        if (['tabs','pills'].indexOf(p.type)!==-1) {
+            if (typeof(p.setActiveItem) !== 'undefined') {
+                p.setActiveItem(this);
             }
-        } 
+        }
+        // if parent is a navbarheader....- and link is probably a '#' page ref.. then remove the expanded menu.
+        if (p.parentType == 'NavHeaderbar' && !this.menu) {
+            // remove the collapsed menu expand...
+            p.parent().el.select('.navbar-collapse',true).removeClass('in');  
+        }
+        
     },
     
     isActive: function () {
@@ -6060,7 +6189,8 @@ Roo.form.Action.ACTION_TYPES = {
  * Bootstrap Form class
  * @cfg {String} method  GET | POST (default POST)
  * @cfg {String} labelAlign top | left (default top)
-  * @cfg {String} align left  | right - for navbars
+ * @cfg {String} align left  | right - for navbars
+ * @cfg {Boolean} loadMask load mask when submit (default true)
 
  * 
  * @constructor
@@ -6144,13 +6274,7 @@ Roo.extend(Roo.bootstrap.Form, Roo.bootstrap.Component,  {
      */
     waitMsgTarget : false,
     
-     
-    
-    /**
-     * By default wait messages are displayed with Roo.MessageBox.wait. You can target a specific
-     * element by passing it or its id or mask the form itself by passing in true.
-     * @type Mixed
-     */
+    loadMask : true,
     
     getAutoCreate : function(){
         
@@ -6262,10 +6386,13 @@ clientValidation  Boolean          Applies to submit only.  Pass true to call fo
     beforeAction : function(action){
         var o = action.options;
         
+        if(this.loadMask){
+            this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
+        }
         // not really supported yet.. ??
         
         //if(this.waitMsgTarget === true){
-            this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
+        //  this.el.mask(o.waitMsg || "Sending", 'x-mask-loading');
         //}else if(this.waitMsgTarget){
         //    this.waitMsgTarget = Roo.get(this.waitMsgTarget);
         //    this.waitMsgTarget.mask(o.waitMsg || "Sending", 'x-mask-loading');
@@ -10985,7 +11112,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;
     },
 
@@ -11009,7 +11136,12 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
                 if(this.editable && !this.tickable){
                     this.inputEl().dom.select();
                 }
-                if(!this.selectByValue(this.value, true) && this.autoFocus){
+                
+                if(
+                    !this.selectByValue(this.value, true) &&
+                    this.autoFocus && (typeof(this.store.lastOptions.add) == 'undefined' || 
+                    this.store.lastOptions.add != true)
+                ){
                     this.select(0, true);
                 }
             }else{
@@ -11472,8 +11604,6 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
             return;
         }
         
-        this.hasFocus = false;
-        
         this.list.hide();
         
         if(this.tickable){
@@ -11517,6 +11647,11 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
         if(this.isExpanded() || !this.hasFocus){
             return;
         }
+        
+        var lw = this.listWidth || Math.max(this.inputEl().getWidth(), this.minListWidth);
+        this.list.setWidth(lw);
+        
+        
          Roo.log('expand');
         
         this.list.show();
@@ -11656,7 +11791,7 @@ Roo.extend(Roo.bootstrap.ComboBox, Roo.bootstrap.TriggerField, {
     
     onViewScroll : function(e, t){
         
-        if(this.view.el.getScroll().top < this.view.el.dom.scrollHeight - this.view.el.dom.clientHeight || !this.hasFocus || !this.append || this.hasQuery){
+        if(this.view.el.getScroll().top == 0 ||this.view.el.getScroll().top < this.view.el.dom.scrollHeight - this.view.el.dom.clientHeight || !this.hasFocus || !this.append || this.hasQuery){
             return;
         }
         
@@ -14337,7 +14472,9 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
             }
         }
                 
-        this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.DateField.template);
+        this.pickerEl = Roo.get(document.body).createChild(Roo.bootstrap.DateField.template);
+        
+//        this.el.select('>.input-group', true).first().createChild(Roo.bootstrap.DateField.template);
         
         this.picker().setVisibilityMode(Roo.Element.DISPLAY).originalDisplay = 'block';
         
@@ -14381,7 +14518,8 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
     
     picker : function()
     {
-        return this.el.select('.datepicker', true).first();
+        return this.pickerEl;
+//        return this.el.select('.datepicker', true).first();
     },
     
     fillDow: function()
@@ -14435,8 +14573,7 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
     
     update: function()
     {
-        
-        this.date = (typeof(this.date) === 'undefined') ? this.UTCToday() : (typeof(this.date) === 'string') ? this.parseDate(this.date) : this.date;
+        this.date = (typeof(this.date) === 'undefined' || ((typeof(this.date) === 'string') && !this.date.length)) ? this.UTCToday() : (typeof(this.date) === 'string') ? this.parseDate(this.date) : this.date;
         
         if (this.date < this.startDate) {
             this.viewDate = new Date(this.startDate);
@@ -14616,14 +14753,14 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
              */
             
             this.picker().addClass('top');
-            this.picker().setTop(0 - this.picker().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
+            this.picker().setTop(this.inputEl().getTop() - this.picker().getHeight()).setLeft(this.inputEl().getLeft());
             
             return;
         }
         
         this.picker().addClass('bottom');
         
-        this.picker().setTop(this.inputEl().getHeight()).setLeft(this.inputEl().getLeft() - this.el.getLeft());
+        this.picker().setTop(this.inputEl().getBottom()).setLeft(this.inputEl().getLeft());
     },
     
     parseDate : function(value)
@@ -14664,9 +14801,7 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
         
         var d = this.inputEl().getValue();
         
-        if(d && d.length){
-            this.setValue(d);
-        }
+        this.setValue(d);
                 
         this.hide();
     },
@@ -14705,16 +14840,20 @@ Roo.extend(Roo.bootstrap.DateField, Roo.bootstrap.Input,  {
 
     setValue: function(v)
     {
-        Roo.bootstrap.DateField.superclass.setValue.call(this, v);
-        
-        var d = new Date(v);
+        var d = new Date(v).clearTime();
         
         if(isNaN(d.getTime())){
+            this.date = this.viewDate = '';
+            Roo.bootstrap.DateField.superclass.setValue.call(this, '');
             return;
         }
         
+        v = this.formatDate(d);
+        
+        Roo.bootstrap.DateField.superclass.setValue.call(this, v);
+        
         this.date = new Date(d.getTime() - d.getTimezoneOffset()*60000);
-
+     
         this.update();
 
         this.fireEvent('select', this, this.date);
@@ -16168,6 +16307,8 @@ Roo.HtmlEditorCore = function(config){
     
     
     Roo.HtmlEditorCore.superclass.constructor.call(this, config);
+    
+    
     this.addEvents({
         /**
          * @event initialize
@@ -16220,7 +16361,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();
+    
+    
+    
 };
 
 
@@ -16268,6 +16416,9 @@ Roo.extend(Roo.HtmlEditorCore, Roo.Component,  {
     
     clearUp: true,
     
+    // blacklist + whitelisted elements..
+    black: false,
+    white: false,
      
     
 
@@ -17145,8 +17296,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;
@@ -17196,15 +17350,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 = [];
@@ -17217,7 +17371,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;
@@ -17385,107 +17539,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
     /**
@@ -19767,6 +20013,16 @@ Roo.bootstrap.dash = Roo.bootstrap.dash || {};
 Roo.bootstrap.dash.TabPane = function(config){
     Roo.bootstrap.dash.TabPane.superclass.constructor.call(this, config);
     
+    this.addEvents({
+        // raw events
+        /**
+         * @event activate
+         * When a pane is activated
+         * @param {Roo.bootstrap.dash.TabPane} pane
+         */
+        "activate" : true
+         
+    });
 };
 
 Roo.extend(Roo.bootstrap.dash.TabPane, Roo.bootstrap.Component,  {