* @class Roo.bootstrap.NavGroup
* @extends Roo.bootstrap.Component
* Bootstrap NavGroup class
- * @cfg {String} align left | right
- * @cfg {Boolean} inverse false | true
+ * @cfg {String} align (left|right)
+ * @cfg {Boolean} inverse
* @cfg {String} type (nav|pills|tab) default nav
* @cfg {String} navId - reference Id for navbar.
-
+ * @cfg {Boolean} pilltype default true (turn to off to disable active toggle)
*
* @constructor
* Create a new nav group
* @event changed
* Fires when the active item changes
* @param {Roo.bootstrap.NavGroup} this
- * @param {Roo.bootstrap.Navbar.Item} item The item selected
- * @param {Roo.bootstrap.Navbar.Item} item The previously selected item
+ * @param {Roo.bootstrap.Navbar.Item} selected The item selected
+ * @param {Roo.bootstrap.Navbar.Item} prev The previously selected item
*/
'changed': true
});
type: 'nav',
navId : '',
// private
+ pilltype : true,
navItems : false,
cfg = {
tag : 'ul',
cls: 'nav'
- }
-
- if (['tabs','pills'].indexOf(this.type)!==-1) {
- cfg.cls += ' nav-' + this.type
- } else {
- if (this.type!=='nav') {
- Roo.log('nav type must be nav/tabs/pills')
- }
- cfg.cls += ' navbar-nav'
- }
+ };
+ if (Roo.bootstrap.version == 4) {
+ if (['tabs','pills'].indexOf(this.type) != -1) {
+ cfg.cls += ' nav-' + this.type;
+ } else {
+ // trying to remove so header bar can right align top?
+ if (this.parent() && this.parent().xtype != 'NavHeaderbar') {
+ // do not use on header bar...
+ cfg.cls += ' navbar-nav';
+ }
+ }
+
+ } else {
+ if (['tabs','pills'].indexOf(this.type) != -1) {
+ cfg.cls += ' nav-' + this.type
+ } else {
+ if (this.type !== 'nav') {
+ Roo.log('nav type must be nav/tabs/pills')
+ }
+ cfg.cls += ' navbar-nav'
+ }
+ }
- if (this.parent().sidebar) {
+ if (this.parent() && this.parent().sidebar) {
cfg = {
tag: 'ul',
cls: 'dashboard-menu sidebar-menu'
- }
+ };
return cfg;
}
if (this.form === true) {
cfg = {
tag: 'form',
- cls: 'navbar-form'
- }
-
+ cls: 'navbar-form form-inline'
+ };
+ //nav navbar-right ml-md-auto
if (this.align === 'right') {
- cfg.cls += ' navbar-right';
+ cfg.cls += ' navbar-right ml-md-auto';
} else {
cfg.cls += ' navbar-left';
}
}
if (this.align === 'right') {
- cfg.cls += ' navbar-right';
- }
+ cfg.cls += ' navbar-right ml-md-auto';
+ } else {
+ cfg.cls += ' mr-auto';
+ }
if (this.inverse) {
cfg.cls += ' navbar-inverse';
});
return prev;
},
+
+ indexOfNav : function()
+ {
+
+ var prev = false;
+ Roo.each(this.navItems, function(v,i){
+
+ if (v.isActive()) {
+ prev = i;
+
+ }
+
+ });
+ return prev;
+ },
/**
* adds a Navigation item
* @param {Roo.bootstrap.NavItem} the navitem to add
*/
addItem : function(cfg)
{
- var cn = new Roo.bootstrap.NavItem(cfg);
+ if (this.form && Roo.bootstrap.version == 4) {
+ cfg.tag = 'div';
+ }
+ var cn = new Roo.bootstrap.NavItem(cfg);
this.register(cn);
cn.parentId = this.id;
cn.onRender(this.el, null);
item.navId = this.navId;
},
-
+
+ /**
+ * clear all the Navigation item
+ */
+
+ clearAll : function()
+ {
+ this.navItems = [];
+ this.el.dom.innerHTML = '';
+ },
getNavItem: function(tabId)
{
return ret;
},
- showPanelNext : function()
+ setActiveNext : function()
{
- var i = this.indexOfPanel(this.getActiveNav());
+ var i = this.indexOfNav(this.getActive());
if (i > this.navItems.length) {
return;
}
this.setActiveItem(this.navItems[i+1]);
},
- showPanelPrev : function()
+ setActivePrev : function()
{
- var i = this.indexOfPanel(this.getActiveNav());
+ var i = this.indexOfNav(this.getActive());
if (i < 1) {
return;
}
this.setActiveItem(this.navItems[i-1]);
+ },
+ clearWasActive : function(except) {
+ Roo.each(this.navItems, 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.navItems, function(e) {
+ if (e.was_active) {
+ r = e;
+ return false;
+ }
+ return true;
+
+ });
+ return r;
}