Fix #6464 - card header

[roojs1] / Roo / bootstrap / NavProgressBar.js

diff --git a/Roo/bootstrap/NavProgressBar.js b/Roo/bootstrap/NavProgressBar.js
index 756f636..7afa07c 100644 (file)
--- a/Roo/bootstrap/NavProgressBar.js
+++ b/Roo/bootstrap/NavProgressBar.js
@@ -52,9 +52,16 @@ Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component,  {
                     cls : 'roo-navigation-top-bar'
                 },
                 {
-                    tag : 'ul',
-                    cls : 'roo-navigation-bar'
+                    tag : 'div',
+                    cls : 'roo-navigation-bullets-bar',
+                    cn : [
+                        {
+                            tag : 'ul',
+                            cls : 'roo-navigation-bar'
+                        }
+                    ]
                 },
+                
                 {
                     tag : 'div',
                     cls : 'roo-navigation-bottom-bar'
@@ -69,26 +76,21 @@ Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component,  {
     
     initEvents: function() 
     {
-        Roo.log(this.iconEl);
         
     },
     
     onRender : function(ct, position) 
     {
-        Roo.log('render bar???');
-        
         Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
         
-        this.topEl = this.el.select('.roo-navigation-top-bar', true).first();
-        this.iconEl = this.el.select('.roo-navigation-bar', true).first();
-        this.bottomEl = this.el.select('.roo-navigation-bottom-bar', true).first();
-        
         if(this.bullets.length){
             Roo.each(this.bullets, function(b){
                this.addItem(b);
             }, this);
         }
         
+        this.format();
+        
     },
     
     addItem : function(cfg)
@@ -98,9 +100,38 @@ Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component,  {
         item.parentId = this.id;
         item.render(this.el.select('.roo-navigation-bar', true).first(), null);
         
-        this.barItems.push(item);
+        if(cfg.html){
+            var top = new Roo.bootstrap.Element({
+                tag : 'div',
+                cls : 'roo-navigation-bar-text'
+            });
+            
+            var bottom = new Roo.bootstrap.Element({
+                tag : 'div',
+                cls : 'roo-navigation-bar-text'
+            });
+            
+            top.onRender(this.el.select('.roo-navigation-top-bar', true).first(), null);
+            bottom.onRender(this.el.select('.roo-navigation-bottom-bar', true).first(), null);
+            
+            var topText = new Roo.bootstrap.Element({
+                tag : 'span',
+                html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? cfg.html : ''
+            });
+            
+            var bottomText = new Roo.bootstrap.Element({
+                tag : 'span',
+                html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? '' : cfg.html
+            });
+            
+            topText.onRender(top.el, null);
+            bottomText.onRender(bottom.el, null);
+            
+            item.topEl = top;
+            item.bottomEl = bottom;
+        }
         
-        this.formatBullets();
+        this.barItems.push(item);
         
         return item;
     },
@@ -198,17 +229,20 @@ Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component,  {
         this.setActiveItem(this.barItems[i-1]);
     },
     
-    formatBullets : function()
+    format : function()
     {
         if(!this.barItems.length){
             return;
         }
-        
+     
         var width = 100 / this.barItems.length;
         
         Roo.each(this.barItems, function(i){
             i.el.setStyle('width', width + '%');
+            i.topEl.el.setStyle('width', width + '%');
+            i.bottomEl.el.setStyle('width', width + '%');
         }, this);
+        
     }
     
 });