* Bootstrap NavProgressBar class
*
* @constructor
- * Create a new nav progress bar
+ * Create a new nav progress bar - a bar indicating step along a process
* @param {Object} config The config object
*/
};
Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component, {
-
+ /**
+ * @cfg {Roo.bootstrap.NavProgressItem} NavProgressBar:bullets[]
+ * Bullets for the Nav Progress bar for the toolbar
+ */
bullets : [],
barItems : [],
cn : [
{
tag : 'div',
- cls : 'roo-navigation-bar-top'
+ cls : 'roo-navigation-top-bar'
},
{
tag : 'div',
- cls : 'roo-navigation-bar',
+ cls : 'roo-navigation-bullets-bar',
cn : [
{
tag : 'ul',
- cls : 'roo-navigation-bar-list'
+ cls : 'roo-navigation-bar'
}
]
},
{
tag : 'div',
- cls : 'roo-navigation-bar-bottom'
+ cls : 'roo-navigation-bottom-bar'
}
]
initEvents: function()
{
- this.topEl = this.el.select('.roo-navigation-bar-top', true).first();
- this.iconEl = this.el.select('.roo-navigation-bar', true).first();
- this.bottomEl = this.el.select('.roo-navigation-bar-bottom', true).first();
},
}, this);
}
+ this.format();
+
},
addItem : function(cfg)
item.render(this.el.select('.roo-navigation-bar', true).first(), null);
if(cfg.html){
- var html = new Roo.bootstrap.Element({
+ 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',
- html : cfg.html
+ cls : 'roo-navigation-bar-text'
});
- var pos = (['top', 'bottom'].indexOf(cfg.position) !== -1) ? cfg.position : 'bottom';
+ 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
+ });
- html.onRender(this.el.select('.roo-navigation-bar-' + pos, true).first(), null);
+ topText.onRender(top.el, null);
+ bottomText.onRender(bottom.el, null);
+
+ item.topEl = top;
+ item.bottomEl = bottom;
}
this.barItems.push(item);
- this.formatBullets();
-
return item;
},
this.setActiveItem(this.barItems[i-1]);
},
- formatBullets : function()
+ format : function()
{
if(!this.barItems.length){
return;
}
-
+
var width = 100 / this.barItems.length;
- Roo.each(this.topEl.select('.roo-navigation-bar-text', true).elements, function(el){
- el.setStyle('width', width + '%');
- });
-
- Roo.each(this.bottomEl.select('.roo-navigation-bar-text', true).elements, function(el){
- el.setStyle('width', width + '%');
- });
-
- Roo.each(this.iconEl.select('.roo-navigation-bar-item', true).elements, function(el){
- el.setStyle('width', width + '%');
- });
+ Roo.each(this.barItems, function(i){
+ i.el.setStyle('width', width + '%');
+ i.topEl.el.setStyle('width', width + '%');
+ i.bottomEl.el.setStyle('width', width + '%');
+ }, this);
}