9 * @class Roo.bootstrap.nav.ProgressBar
10 * @extends Roo.bootstrap.Component
11 * @children Roo.bootstrap.nav.ProgressBarItem
12 * Bootstrap NavProgressBar class
15 * Create a new nav progress bar - a bar indicating step along a process
16 * @param {Object} config The config object
19 Roo.bootstrap.nav.ProgressBar = function(config){
20 Roo.bootstrap.nav.ProgressBar.superclass.constructor.call(this, config);
22 this.bullets = this.bullets || [];
24 // Roo.bootstrap.nav.ProgressBar.register(this);
28 * Fires when the active item changes
29 * @param {Roo.bootstrap.nav.ProgressBar} this
30 * @param {Roo.bootstrap.nav.ProgressItem} selected The item selected
31 * @param {Roo.bootstrap.nav.ProgressItem} prev The previously selected item
38 Roo.extend(Roo.bootstrap.nav.ProgressBar, Roo.bootstrap.Component, {
40 * @cfg {Roo.bootstrap.nav.ProgressItem} NavProgressBar:bullets[]
41 * Bullets for the Nav Progress bar for the toolbar
46 getAutoCreate : function()
48 var cfg = Roo.apply({}, Roo.bootstrap.nav.ProgressBar.superclass.getAutoCreate.call(this));
52 cls : 'roo-navigation-bar-group',
56 cls : 'roo-navigation-top-bar'
60 cls : 'roo-navigation-bullets-bar',
64 cls : 'roo-navigation-bar'
71 cls : 'roo-navigation-bottom-bar'
81 initEvents: function()
86 onRender : function(ct, position)
88 Roo.bootstrap.nav.ProgressBar.superclass.onRender.call(this, ct, position);
90 if(this.bullets.length){
91 Roo.each(this.bullets, function(b){
100 addItem : function(cfg)
102 var item = new Roo.bootstrap.nav.ProgressItem(cfg);
104 item.parentId = this.id;
105 item.render(this.el.select('.roo-navigation-bar', true).first(), null);
108 var top = new Roo.bootstrap.Element({
110 cls : 'roo-navigation-bar-text'
113 var bottom = new Roo.bootstrap.Element({
115 cls : 'roo-navigation-bar-text'
118 top.onRender(this.el.select('.roo-navigation-top-bar', true).first(), null);
119 bottom.onRender(this.el.select('.roo-navigation-bottom-bar', true).first(), null);
121 var topText = new Roo.bootstrap.Element({
123 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? cfg.html : ''
126 var bottomText = new Roo.bootstrap.Element({
128 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? '' : cfg.html
131 topText.onRender(top.el, null);
132 bottomText.onRender(bottom.el, null);
135 item.bottomEl = bottom;
138 this.barItems.push(item);
143 getActive : function()
147 Roo.each(this.barItems, function(v){
161 setActiveItem : function(item)
165 Roo.each(this.barItems, function(v){
166 if (v.rid == item.rid) {
176 item.setActive(true);
178 this.fireEvent('changed', this, item, prev);
181 getBarItem: function(rid)
185 Roo.each(this.barItems, function(e) {
197 indexOfItem : function(item)
201 Roo.each(this.barItems, function(v, i){
203 if (v.rid != item.rid) {
214 setActiveNext : function()
216 var i = this.indexOfItem(this.getActive());
218 if (i > this.barItems.length) {
222 this.setActiveItem(this.barItems[i+1]);
225 setActivePrev : function()
227 var i = this.indexOfItem(this.getActive());
233 this.setActiveItem(this.barItems[i-1]);
238 if(!this.barItems.length){
242 var width = 100 / this.barItems.length;
244 Roo.each(this.barItems, function(i){
245 i.el.setStyle('width', width + '%');
246 i.topEl.el.setStyle('width', width + '%');
247 i.bottomEl.el.setStyle('width', width + '%');