4 * Copyright(c) 2006-2007, Ext JS, LLC.
6 * Originally Released Under LGPL - original licence link has changed is not relivant.
9 * <script type="text/javascript">
13 * @extends Roo.util.Observable
14 * A lightweight tab container.
18 // basic tabs 1, built from existing content
19 var tabs = new Roo.TabPanel("tabs1");
20 tabs.addTab("script", "View Script");
21 tabs.addTab("markup", "View Markup");
22 tabs.activate("script");
24 // more advanced tabs, built from javascript
25 var jtabs = new Roo.TabPanel("jtabs");
26 jtabs.addTab("jtabs-1", "Normal Tab", "My content was added during construction.");
28 // set up the UpdateManager
29 var tab2 = jtabs.addTab("jtabs-2", "Ajax Tab 1");
30 var updater = tab2.getUpdateManager();
31 updater.setDefaultUrl("ajax1.htm");
32 tab2.on('activate', updater.refresh, updater, true);
34 // Use setUrl for Ajax loading
35 var tab3 = jtabs.addTab("jtabs-3", "Ajax Tab 2");
36 tab3.setUrl("ajax2.htm", null, true);
39 var tab4 = jtabs.addTab("tabs1-5", "Disabled Tab", "Can't see me cause I'm disabled");
42 jtabs.activate("jtabs-1");
45 * Create a new TabPanel.
46 * @param {String/HTMLElement/Roo.Element} container The id, DOM element or Roo.Element container where this TabPanel is to be rendered.
47 * @param {Object/Boolean} config Config object to set any properties for this TabPanel, or true to render the tabs on the bottom.
49 Roo.bootstrap.panel.Tabs = function(config){
51 * The container element for this TabPanel.
54 this.el = Roo.get(config.el);
57 if(typeof config == "boolean"){
58 this.tabPosition = config ? "bottom" : "top";
60 Roo.apply(this, config);
64 if(this.tabPosition == "bottom"){
65 // if tabs are at the bottom = create the body first.
66 this.bodyEl = Roo.get(this.createBody(this.el.dom));
67 this.el.addClass("roo-tabs-bottom");
69 // next create the tabs holders
71 if (this.tabPosition == "west"){
73 var reg = this.region; // fake it..
75 if (!reg.mgr.parent) {
78 reg = reg.mgr.parent.region;
82 if (reg.mgr.getRegion('west')) {
83 var ctrdom = reg.mgr.getRegion('west').bodyEl.dom;
84 this.stripWrap = Roo.get(this.createStrip(ctrdom ), true);
85 this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
86 this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
87 this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
95 this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
96 this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
97 this.stripEl.setVisibilityMode(Roo.Element.DISPLAY);
98 this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
103 Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
106 // finally - if tabs are at the top, then create the body last..
107 if(this.tabPosition != "bottom"){
108 /** The body element that contains {@link Roo.TabPanelItem} bodies. +
111 this.bodyEl = Roo.get(this.createBody(this.el.dom));
112 this.el.addClass("roo-tabs-top");
116 this.bodyEl.setStyle("position", "relative");
119 this.activateDelegate = this.activate.createDelegate(this);
124 * Fires when the active tab changes
125 * @param {Roo.TabPanel} this
126 * @param {Roo.TabPanelItem} activePanel The new active tab
130 * @event beforetabchange
131 * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
132 * @param {Roo.TabPanel} this
133 * @param {Object} e Set cancel to true on this object to cancel the tab change
134 * @param {Roo.TabPanelItem} tab The tab being changed to
136 "beforetabchange" : true
139 Roo.EventManager.onWindowResize(this.onResize, this);
140 this.cpad = this.el.getPadding("lr");
141 this.hiddenCount = 0;
144 // toolbar on the tabbar support...
146 alert("no toolbar support yet");
147 this.toolbar = false;
149 var tcfg = this.toolbar;
150 tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');
151 this.toolbar = new Roo.Toolbar(tcfg);
153 var tbl = tcfg.container.child('table', true);
154 tbl.setAttribute('width', '100%');
162 Roo.bootstrap.panel.Tabs.superclass.constructor.call(this);
165 Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, {
167 *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
171 *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
175 *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
179 *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
183 *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
185 preferredTabWidth : 175,
187 *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
191 *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
193 monitorResize : true,
195 *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar.
197 toolbar : false, // set by caller..
199 region : false, /// set by caller
201 disableTooltips : true, // not used yet...
204 * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
205 * @param {String} id The id of the div to use <b>or create</b>
206 * @param {String} text The text for the tab
207 * @param {String} content (optional) Content to put in the TabPanelItem body
208 * @param {Boolean} closable (optional) True to create a close icon on the tab
209 * @return {Roo.TabPanelItem} The created TabPanelItem
211 addTab : function(id, text, content, closable, tpl)
213 var item = new Roo.bootstrap.panel.TabItem({
220 this.addTabItem(item);
222 item.setContent(content);
228 * Returns the {@link Roo.TabPanelItem} with the specified id/index
229 * @param {String/Number} id The id or index of the TabPanelItem to fetch.
230 * @return {Roo.TabPanelItem}
232 getTab : function(id){
233 return this.items[id];
237 * Hides the {@link Roo.TabPanelItem} with the specified id/index
238 * @param {String/Number} id The id or index of the TabPanelItem to hide.
240 hideTab : function(id){
241 var t = this.items[id];
250 * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
251 * @param {String/Number} id The id or index of the TabPanelItem to unhide.
253 unhideTab : function(id){
254 var t = this.items[id];
263 * Adds an existing {@link Roo.TabPanelItem}.
264 * @param {Roo.TabPanelItem} item The TabPanelItem to add
266 addTabItem : function(item)
268 this.items[item.id] = item;
269 this.items.push(item);
271 // if(this.resizeTabs){
272 // item.setWidth(this.currentTabWidth || this.preferredTabWidth);
273 // this.autoSizeTabs();
280 * Removes a {@link Roo.TabPanelItem}.
281 * @param {String/Number} id The id or index of the TabPanelItem to remove.
283 removeTab : function(id){
284 var items = this.items;
287 var index = items.indexOf(tab);
288 if(this.active == tab && items.length > 1){
289 var newTab = this.getNextAvailable(index);
294 this.stripEl.dom.removeChild(tab.pnode.dom);
295 if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
296 this.bodyEl.dom.removeChild(tab.bodyEl.dom);
298 items.splice(index, 1);
299 delete this.items[tab.id];
300 tab.fireEvent("close", tab);
301 tab.purgeListeners();
305 getNextAvailable : function(start){
306 var items = this.items;
308 // look for a next tab that will slide over to
309 // replace the one being removed
310 while(index < items.length){
311 var item = items[++index];
312 if(item && !item.isHidden()){
316 // if one isn't found select the previous tab (on the left)
319 var item = items[--index];
320 if(item && !item.isHidden()){
328 * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
329 * @param {String/Number} id The id or index of the TabPanelItem to disable.
331 disableTab : function(id){
332 var tab = this.items[id];
333 if(tab && this.active != tab){
339 * Enables a {@link Roo.TabPanelItem} that is disabled.
340 * @param {String/Number} id The id or index of the TabPanelItem to enable.
342 enableTab : function(id){
343 var tab = this.items[id];
348 * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
349 * @param {String/Number} id The id or index of the TabPanelItem to activate.
350 * @return {Roo.TabPanelItem} The TabPanelItem.
352 activate : function(id)
354 //Roo.log('activite:' + id);
356 var tab = this.items[id];
360 if(tab == this.active || tab.disabled){
364 this.fireEvent("beforetabchange", this, e, tab);
365 if(e.cancel !== true && !tab.disabled){
369 this.active = this.items[id];
371 this.fireEvent("tabchange", this, this.active);
377 * Gets the active {@link Roo.TabPanelItem}.
378 * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
380 getActiveTab : function(){
385 * Updates the tab body element to fit the height of the container element
386 * for overflow scrolling
387 * @param {Number} targetHeight (optional) Override the starting height from the elements height
389 syncHeight : function(targetHeight){
390 var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
391 var bm = this.bodyEl.getMargins();
392 var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
393 this.bodyEl.setHeight(newHeight);
397 onResize : function(){
398 if(this.monitorResize){
404 * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
406 beginUpdate : function(){
407 this.updating = true;
411 * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
413 endUpdate : function(){
414 this.updating = false;
419 * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
421 autoSizeTabs : function()
423 var count = this.items.length;
424 var vcount = count - this.hiddenCount;
432 if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) {
437 var w = Math.max(this.el.getWidth() - this.cpad, 10);
438 var availWidth = Math.floor(w / vcount);
439 var b = this.stripBody;
440 if(b.getWidth() > w){
441 var tabs = this.items;
442 this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
443 if(availWidth < this.minTabWidth){
444 /*if(!this.sleft){ // incomplete scrolling code
445 this.createScrollButtons();
448 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
451 if(this.currentTabWidth < this.preferredTabWidth){
452 this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
458 * Returns the number of tabs in this TabPanel.
461 getCount : function(){
462 return this.items.length;
466 * Resizes all the tabs to the passed width
467 * @param {Number} The new width
469 setTabWidth : function(width){
470 this.currentTabWidth = width;
471 for(var i = 0, len = this.items.length; i < len; i++) {
472 if(!this.items[i].isHidden()) {
473 this.items[i].setWidth(width);
479 * Destroys this TabPanel
480 * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
482 destroy : function(removeEl){
483 Roo.EventManager.removeResizeListener(this.onResize, this);
484 for(var i = 0, len = this.items.length; i < len; i++){
485 this.items[i].purgeListeners();
487 if(removeEl === true){
493 createStrip : function(container)
495 var strip = document.createElement("nav");
496 strip.className = Roo.bootstrap.version == 4 ?
497 "navbar-light bg-light" :
498 "navbar navbar-default"; //"x-tabs-wrap";
499 container.appendChild(strip);
503 createStripList : function(strip)
505 // div wrapper for retard IE
506 // returns the "tr" element.
507 strip.innerHTML = '<ul class="nav nav-tabs" role="tablist"></ul>';
508 //'<div class="x-tabs-strip-wrap">'+
509 // '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
510 // '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
511 return strip.firstChild; //.firstChild.firstChild.firstChild;
513 createBody : function(container)
515 var body = document.createElement("div");
516 Roo.id(body, "tab-body");
517 //Roo.fly(body).addClass("x-tabs-body");
518 Roo.fly(body).addClass("tab-content");
519 container.appendChild(body);
522 createItemBody :function(bodyEl, id){
523 var body = Roo.getDom(id);
525 body = document.createElement("div");
528 //Roo.fly(body).addClass("x-tabs-item-body");
529 Roo.fly(body).addClass("tab-pane");
530 bodyEl.insertBefore(body, bodyEl.firstChild);
534 createStripElements : function(stripEl, text, closable, tpl)
536 var td = document.createElement("li"); // was td..
537 td.className = 'nav-item';
539 //stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
542 stripEl.appendChild(td);
544 td.className = "x-tabs-closable";
546 this.closeTpl = new Roo.Template(
547 '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
548 '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
549 '<div unselectable="on" class="close-icon"> </div></em></span></a>'
552 var el = this.closeTpl.overwrite(td, {"text": text});
553 var close = el.getElementsByTagName("div")[0];
554 var inner = el.getElementsByTagName("em")[0];
555 return {"el": el, "close": close, "inner": inner};
558 // not sure what this is..
560 //this.tabTpl = new Roo.Template(
561 // '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
562 // '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
564 // this.tabTpl = new Roo.Template(
566 // '<span unselectable="on"' +
567 // (this.disableTooltips ? '' : ' title="{text}"') +
568 // ' >{text}</span></a>'
574 var template = tpl || this.tabTpl || false;
577 template = new Roo.Template(
578 Roo.bootstrap.version == 4 ?
580 '<a class="nav-link" href="#" unselectable="on"' +
581 (this.disableTooltips ? '' : ' title="{text}"') +
584 '<a class="nav-link" href="#">' +
585 '<span unselectable="on"' +
586 (this.disableTooltips ? '' : ' title="{text}"') +
587 ' >{text}</span></a>'
592 switch (typeof(template)) {
596 template = new Roo.Template(template);
602 var el = template.overwrite(td, {"text": text});
604 var inner = el.getElementsByTagName("span")[0];
606 return {"el": el, "inner": inner};