* @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.
Roo.bootstrap.NavGroup = function(config){
Roo.bootstrap.NavGroup.superclass.constructor.call(this, config);
this.navItems = [];
+
Roo.bootstrap.NavGroup.register(this);
this.addEvents({
/**
* @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
});
navId : '',
// private
- navItems : false,
+ navItems : false,
getAutoCreate : function()
{
cfg = {
tag : 'ul',
cls: '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 (['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 cfg;
},
-
+ /**
+ * sets the active Navigation item
+ * @param {Roo.bootstrap.NavItem} the new current navitem
+ */
setActiveItem : function(item)
{
var prev = false;
},
-
+ /**
+ * gets the active Navigation item
+ * @return {Roo.bootstrap.NavItem} the current navitem
+ */
getActive : function()
{
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);
return cn;
},
-
+ /**
+ * register a Navigation item
+ * @param {Roo.bootstrap.NavItem} the navitem to add
+ */
register : function(item)
{
this.navItems.push( item);
item.navId = this.navId;
},
+
+ /**
+ * clear all the Navigation item
+ */
+
+ clearAll : function()
+ {
+ this.navItems = [];
+ this.el.dom.innerHTML = '';
+ },
+
getNavItem: function(tabId)
{
var ret = false;
});
return ret;
- }
-
+ },
+ setActiveNext : function()
+ {
+ var i = this.indexOfNav(this.getActive());
+ if (i > this.navItems.length) {
+ return;
+ }
+ this.setActiveItem(this.navItems[i+1]);
+ },
+ setActivePrev : function()
+ {
+ 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;
+ }
});
Roo.apply(Roo.bootstrap.NavGroup, {
groups: {},
-
+ /**
+ * register a Navigation Group
+ * @param {Roo.bootstrap.NavGroup} the navgroup to add
+ */
register : function(navgrp)
{
this.groups[navgrp.navId] = navgrp;
},
+ /**
+ * fetch a Navigation Group based on the navigation ID
+ * @param {string} the navgroup to add
+ * @returns {Roo.bootstrap.NavGroup} the navgroup
+ */
get: function(navId) {
if (typeof(this.groups[navId]) == 'undefined') {
- new Roo.bootstrap.NavGroup({ navId : navId });
+ return false;
+ //this.register(new Roo.bootstrap.NavGroup({ navId : navId }));
}
return this.groups[navId] ;
- },
+ }