9 * @class Roo.bootstrap.NavProgressBar
10 * @extends Roo.bootstrap.Component
11 * Bootstrap NavProgressBar class
14 * Create a new nav progress bar - a bar indicating step along a process
15 * @param {Object} config The config object
18 Roo.bootstrap.NavProgressBar = function(config){
19 Roo.bootstrap.NavProgressBar.superclass.constructor.call(this, config);
21 this.bullets = this.bullets || [];
23 // Roo.bootstrap.NavProgressBar.register(this);
27 * Fires when the active item changes
28 * @param {Roo.bootstrap.NavProgressBar} this
29 * @param {Roo.bootstrap.NavProgressItem} selected The item selected
30 * @param {Roo.bootstrap.NavProgressItem} prev The previously selected item
37 Roo.extend(Roo.bootstrap.NavProgressBar, Roo.bootstrap.Component, {
39 * @cfg {Roo.bootstrap.NavProgressItem} NavProgressBar:bullets[]
40 * Bullets for the Nav Progress bar for the toolbar
45 getAutoCreate : function()
47 var cfg = Roo.apply({}, Roo.bootstrap.NavProgressBar.superclass.getAutoCreate.call(this));
51 cls : 'roo-navigation-bar-group',
55 cls : 'roo-navigation-top-bar'
59 cls : 'roo-navigation-bullets-bar',
63 cls : 'roo-navigation-bar'
70 cls : 'roo-navigation-bottom-bar'
80 initEvents: function()
85 onRender : function(ct, position)
87 Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
89 if(this.bullets.length){
90 Roo.each(this.bullets, function(b){
99 addItem : function(cfg)
101 var item = new Roo.bootstrap.NavProgressItem(cfg);
103 item.parentId = this.id;
104 item.render(this.el.select('.roo-navigation-bar', true).first(), null);
107 var top = new Roo.bootstrap.Element({
109 cls : 'roo-navigation-bar-text'
112 var bottom = new Roo.bootstrap.Element({
114 cls : 'roo-navigation-bar-text'
117 top.onRender(this.el.select('.roo-navigation-top-bar', true).first(), null);
118 bottom.onRender(this.el.select('.roo-navigation-bottom-bar', true).first(), null);
120 var topText = new Roo.bootstrap.Element({
122 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? cfg.html : ''
125 var bottomText = new Roo.bootstrap.Element({
127 html : (typeof(cfg.position) != 'undefined' && cfg.position == 'top') ? '' : cfg.html
130 topText.onRender(top.el, null);
131 bottomText.onRender(bottom.el, null);
134 item.bottomEl = bottom;
137 this.barItems.push(item);
142 getActive : function()
146 Roo.each(this.barItems, function(v){
160 setActiveItem : function(item)
164 Roo.each(this.barItems, function(v){
165 if (v.rid == item.rid) {
175 item.setActive(true);
177 this.fireEvent('changed', this, item, prev);
180 getBarItem: function(rid)
184 Roo.each(this.barItems, function(e) {
196 indexOfItem : function(item)
200 Roo.each(this.barItems, function(v, i){
202 if (v.rid != item.rid) {
213 setActiveNext : function()
215 var i = this.indexOfItem(this.getActive());
217 if (i > this.barItems.length) {
221 this.setActiveItem(this.barItems[i+1]);
224 setActivePrev : function()
226 var i = this.indexOfItem(this.getActive());
232 this.setActiveItem(this.barItems[i-1]);
237 if(!this.barItems.length){
241 var width = 100 / this.barItems.length;
243 Roo.each(this.barItems, function(i){
244 i.el.setStyle('width', width + '%');
245 i.topEl.el.setStyle('width', width + '%');
246 i.bottomEl.el.setStyle('width', width + '%');