bullets : [],
barItems : [],
-
getAutoCreate : function()
{
var cfg = Roo.apply({}, Roo.bootstrap.NavProgressBar.superclass.getAutoCreate.call(this));
cfg = {
- tag : 'ul',
- cls: 'roo-navigation-bar'
- }
+ tag : 'div',
+ cls : 'roo-navigation-bar-group',
+ cn : [
+ {
+ tag : 'div',
+ cls : 'roo-navigation-top-bar'
+ },
+ {
+ tag : 'div',
+ cls : 'roo-navigation-bullets-bar',
+ cn : [
+ {
+ tag : 'ul',
+ cls : 'roo-navigation-bar'
+ }
+ ]
+ },
+
+ {
+ tag : 'div',
+ cls : 'roo-navigation-bottom-bar'
+ }
+ ]
+
+ };
return cfg;
},
+ initEvents: function()
+ {
+
+ },
+
onRender : function(ct, position)
{
Roo.bootstrap.NavProgressBar.superclass.onRender.call(this, ct, position);
}, this);
}
+ this.format();
+
},
addItem : function(cfg)
var item = new Roo.bootstrap.NavProgressItem(cfg);
item.parentId = this.id;
- item.onRender(this.el, null);
+ 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;
},
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);
+
}
-
-
-// indexOfNav : function(item)
-// {
-// var index = false;
-//
-// Roo.each(this.items, function(v,i){
-//
-// if (v != item) {
-// return;
-// }
-//
-// index = i;
-// return false
-// });
-//
-// return index;
-// },
-//
- /**
- * adds a Navigation item
- * @param {Roo.bootstrap.NavProgressItem} the NavProgressItem to add
- */
-
-//
-// /**
-// * register a Navigation item
-// * @param {Roo.bootstrap.NavItem} the navitem to add
-// */
-// register : function(item)
-// {
-// this.items.push(item);
-// item.navId = this.navId;
-//
-// },
-//
-// /**
-// * clear all the Navigation item
-// */
-//
-// clearAll : function()
-// {
-// this.items = [];
-// this.el.dom.innerHTML = '';
-// },
-//
-// getNavItem: function(tabId)
-// {
-// var ret = false;
-// Roo.each(this.items, function(e) {
-// if (e.tabId == tabId) {
-// ret = e;
-// return false;
-// }
-// return true;
-//
-// });
-// return ret;
-// },
-//
-// setActiveNext : function()
-// {
-// var i = this.indexOfNav(this.getActive());
-//
-// if (i > this.items.length) {
-// return;
-// }
-//
-// this.setActiveItem(this.items[i+1]);
-// },
-//
-// setActivePrev : function()
-// {
-// var i = this.indexOfNav(this.getActive());
-//
-// if (i < 1) {
-// return;
-// }
-//
-// this.setActiveItem(this.items[i-1]);
-// },
-//
-// clearWasActive : function(except) {
-// Roo.each(this.items, function(e) {
-// if (e.tabId != except.tabId && e.was_active) {
-// e.was_active = false;
-// return false;
-// }
-// return true;
-//
-// });
-// },
-//
-// getWasActive : function ()
-// {
-// var r = false;
-// Roo.each(this.items, function(e) {
-// if (e.was_active) {
-// r = e;
-// return false;
-// }
-// return true;
-//
-// });
-// return r;
-// }
-
-
});
-
-//
-//Roo.apply(Roo.bootstrap.NavProgressBar, {
-//
-// groups: {},
-// /**
-// * register a Navigation Group
-// * @param {Roo.bootstrap.NavGroup} the navgroup to add
-// */
-// register : function(bar)
-// {
-// this.groups[bar.navId] = bar;
-//
-// },
-// /**
-// * fetch a Navigation Bar based on the navigation ID
-// * @param {string} the nav bar to add
-// * @returns {Roo.bootstrap.NavProgressBar} the nav bar
-// */
-// get: function(navId)
-// {
-// if (typeof(this.groups[navId]) == 'undefined') {
-// return false;
-// }
-//
-// return this.groups[navId] ;
-// }
-//
-//});
-
-
\ No newline at end of file