9 * @class Roo.bootstrap.nav.Group
10 * @extends Roo.bootstrap.Component
11 * @children Roo.bootstrap.nav.Item
12 * Bootstrap NavGroup class
13 * @cfg {String} align (left|right)
14 * @cfg {Boolean} inverse
15 * @cfg {String} type (nav|pills|tab) default nav
16 * @cfg {String} navId - reference Id for navbar.
17 * @cfg {Boolean} pilltype default true (turn to off to disable active toggle)
20 * Create a new nav group
21 * @param {Object} config The config object
24 Roo.bootstrap.nav.Group = function(config){
25 Roo.bootstrap.nav.Group.superclass.constructor.call(this, config);
28 Roo.bootstrap.nav.Group.register(this);
32 * Fires when the active item changes
33 * @param {Roo.bootstrap.nav.Group} this
34 * @param {Roo.bootstrap.Navbar.Item} selected The item selected
35 * @param {Roo.bootstrap.Navbar.Item} prev The previously selected item
42 Roo.extend(Roo.bootstrap.nav.Group, Roo.bootstrap.Component, {
54 getAutoCreate : function()
56 var cfg = Roo.apply({}, Roo.bootstrap.nav.Group.superclass.getAutoCreate.call(this));
62 if (Roo.bootstrap.version == 4) {
63 if (['tabs','pills'].indexOf(this.type) != -1) {
64 cfg.cls += ' nav-' + this.type;
66 // trying to remove so header bar can right align top?
67 if (this.parent() && this.parent().xtype != 'NavHeaderbar') {
68 // do not use on header bar...
69 cfg.cls += ' navbar-nav';
74 if (['tabs','pills'].indexOf(this.type) != -1) {
75 cfg.cls += ' nav-' + this.type
77 if (this.type !== 'nav') {
78 Roo.log('nav type must be nav/tabs/pills')
80 cfg.cls += ' navbar-nav'
84 if (this.parent() && this.parent().sidebar) {
87 cls: 'dashboard-menu sidebar-menu'
93 if (this.form === true) {
96 cls: 'navbar-form form-inline'
98 //nav navbar-right ml-md-auto
99 if (this.align === 'right') {
100 cfg.cls += ' navbar-right ml-md-auto';
102 cfg.cls += ' navbar-left';
106 if (this.align === 'right') {
107 cfg.cls += ' navbar-right ml-md-auto';
109 cfg.cls += ' mr-auto';
113 cfg.cls += ' navbar-inverse';
121 * sets the active Navigation item
122 * @param {Roo.bootstrap.nav.Item} the new current navitem
124 setActiveItem : function(item)
127 Roo.each(this.navItems, function(v){
132 v.setActive(false, true);
139 item.setActive(true, true);
140 this.fireEvent('changed', this, item, prev);
145 * gets the active Navigation item
146 * @return {Roo.bootstrap.nav.Item} the current navitem
148 getActive : function()
152 Roo.each(this.navItems, function(v){
163 indexOfNav : function()
167 Roo.each(this.navItems, function(v,i){
178 * adds a Navigation item
179 * @param {Roo.bootstrap.nav.Item} the navitem to add
181 addItem : function(cfg)
183 if (this.form && Roo.bootstrap.version == 4) {
186 var cn = new Roo.bootstrap.nav.Item(cfg);
188 cn.parentId = this.id;
189 cn.onRender(this.el, null);
193 * register a Navigation item
194 * @param {Roo.bootstrap.nav.Item} the navitem to add
196 register : function(item)
198 this.navItems.push( item);
199 item.navId = this.navId;
204 * clear all the Navigation item
207 clearAll : function()
210 this.el.dom.innerHTML = '';
213 getNavItem: function(tabId)
216 Roo.each(this.navItems, function(e) {
217 if (e.tabId == tabId) {
227 setActiveNext : function()
229 var i = this.indexOfNav(this.getActive());
230 if (i > this.navItems.length) {
233 this.setActiveItem(this.navItems[i+1]);
235 setActivePrev : function()
237 var i = this.indexOfNav(this.getActive());
241 this.setActiveItem(this.navItems[i-1]);
243 clearWasActive : function(except) {
244 Roo.each(this.navItems, function(e) {
245 if (e.tabId != except.tabId && e.was_active) {
246 e.was_active = false;
253 getWasActive : function ()
256 Roo.each(this.navItems, function(e) {
271 Roo.apply(Roo.bootstrap.nav.Group, {
275 * register a Navigation Group
276 * @param {Roo.bootstrap.nav.Group} the navgroup to add
278 register : function(navgrp)
280 this.groups[navgrp.navId] = navgrp;
284 * fetch a Navigation Group based on the navigation ID
285 * @param {string} the navgroup to add
286 * @returns {Roo.bootstrap.nav.Group} the navgroup
288 get: function(navId) {
289 if (typeof(this.groups[navId]) == 'undefined') {
291 //this.register(new Roo.bootstrap.nav.Group({ navId : navId }));
293 return this.groups[navId] ;