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.TabPanel = function(container, config){
51 * The container element for this TabPanel.
54 this.el = Roo.get(container, true);
56 if(typeof config == "boolean"){
57 this.tabPosition = config ? "bottom" : "top";
59 Roo.apply(this, config);
62 Roo.log('running!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!');
64 if(this.tabPosition == "bottom"){
65 this.bodyEl = Roo.get(this.createBody(this.el.dom));
66 this.el.addClass("x-tabs-bottom");
68 this.stripWrap = Roo.get(this.createStrip(this.el.dom), true);
69 this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true);
70 this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true);
72 Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden");
74 if(this.tabPosition != "bottom"){
75 /** The body element that contains {@link Roo.TabPanelItem} bodies. +
78 this.bodyEl = Roo.get(this.createBody(this.el.dom));
79 this.el.addClass("x-tabs-top");
83 this.bodyEl.setStyle("position", "relative");
86 this.activateDelegate = this.activate.createDelegate(this);
91 * Fires when the active tab changes
92 * @param {Roo.TabPanel} this
93 * @param {Roo.TabPanelItem} activePanel The new active tab
97 * @event beforetabchange
98 * Fires before the active tab changes, set cancel to true on the "e" parameter to cancel the change
99 * @param {Roo.TabPanel} this
100 * @param {Object} e Set cancel to true on this object to cancel the tab change
101 * @param {Roo.TabPanelItem} tab The tab being changed to
103 "beforetabchange" : true
106 Roo.EventManager.onWindowResize(this.onResize, this);
107 this.cpad = this.el.getPadding("lr");
108 this.hiddenCount = 0;
111 // toolbar on the tabbar support...
113 var tcfg = this.toolbar;
114 tcfg.container = this.stripEl.child('td.x-tab-strip-toolbar');
115 this.toolbar = new Roo.Toolbar(tcfg);
117 var tbl = tcfg.container.child('table', true);
118 tbl.setAttribute('width', '100%');
125 Roo.TabPanel.superclass.constructor.call(this);
128 Roo.extend(Roo.TabPanel, Roo.util.Observable, {
130 *@cfg {String} tabPosition "top" or "bottom" (defaults to "top")
134 *@cfg {Number} currentTabWidth The width of the current tab (defaults to 0)
138 *@cfg {Number} minTabWidth The minimum width of a tab (defaults to 40) (ignored if {@link #resizeTabs} is not true)
142 *@cfg {Number} maxTabWidth The maximum width of a tab (defaults to 250) (ignored if {@link #resizeTabs} is not true)
146 *@cfg {Number} preferredTabWidth The preferred (default) width of a tab (defaults to 175) (ignored if {@link #resizeTabs} is not true)
148 preferredTabWidth : 175,
150 *@cfg {Boolean} resizeTabs True to enable dynamic tab resizing (defaults to false)
154 *@cfg {Boolean} monitorResize Set this to true to turn on window resize monitoring (ignored if {@link #resizeTabs} is not true) (defaults to true)
156 monitorResize : true,
158 *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar.
163 * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one.
164 * @param {String} id The id of the div to use <b>or create</b>
165 * @param {String} text The text for the tab
166 * @param {String} content (optional) Content to put in the TabPanelItem body
167 * @param {Boolean} closable (optional) True to create a close icon on the tab
168 * @return {Roo.TabPanelItem} The created TabPanelItem
170 addTab : function(id, text, content, closable){
171 var item = new Roo.TabPanelItem(this, id, text, closable);
172 this.addTabItem(item);
174 item.setContent(content);
180 * Returns the {@link Roo.TabPanelItem} with the specified id/index
181 * @param {String/Number} id The id or index of the TabPanelItem to fetch.
182 * @return {Roo.TabPanelItem}
184 getTab : function(id){
185 return this.items[id];
189 * Hides the {@link Roo.TabPanelItem} with the specified id/index
190 * @param {String/Number} id The id or index of the TabPanelItem to hide.
192 hideTab : function(id){
193 var t = this.items[id];
202 * "Unhides" the {@link Roo.TabPanelItem} with the specified id/index.
203 * @param {String/Number} id The id or index of the TabPanelItem to unhide.
205 unhideTab : function(id){
206 var t = this.items[id];
215 * Adds an existing {@link Roo.TabPanelItem}.
216 * @param {Roo.TabPanelItem} item The TabPanelItem to add
218 addTabItem : function(item){
219 this.items[item.id] = item;
220 this.items.push(item);
222 item.setWidth(this.currentTabWidth || this.preferredTabWidth);
230 * Removes a {@link Roo.TabPanelItem}.
231 * @param {String/Number} id The id or index of the TabPanelItem to remove.
233 removeTab : function(id){
234 var items = this.items;
237 var index = items.indexOf(tab);
238 if(this.active == tab && items.length > 1){
239 var newTab = this.getNextAvailable(index);
244 this.stripEl.dom.removeChild(tab.pnode.dom);
245 if(tab.bodyEl.dom.parentNode == this.bodyEl.dom){ // if it was moved already prevent error
246 this.bodyEl.dom.removeChild(tab.bodyEl.dom);
248 items.splice(index, 1);
249 delete this.items[tab.id];
250 tab.fireEvent("close", tab);
251 tab.purgeListeners();
255 getNextAvailable : function(start){
256 var items = this.items;
258 // look for a next tab that will slide over to
259 // replace the one being removed
260 while(index < items.length){
261 var item = items[++index];
262 if(item && !item.isHidden()){
266 // if one isn't found select the previous tab (on the left)
269 var item = items[--index];
270 if(item && !item.isHidden()){
278 * Disables a {@link Roo.TabPanelItem}. It cannot be the active tab, if it is this call is ignored.
279 * @param {String/Number} id The id or index of the TabPanelItem to disable.
281 disableTab : function(id){
282 var tab = this.items[id];
283 if(tab && this.active != tab){
289 * Enables a {@link Roo.TabPanelItem} that is disabled.
290 * @param {String/Number} id The id or index of the TabPanelItem to enable.
292 enableTab : function(id){
293 var tab = this.items[id];
298 * Activates a {@link Roo.TabPanelItem}. The currently active one will be deactivated.
299 * @param {String/Number} id The id or index of the TabPanelItem to activate.
300 * @return {Roo.TabPanelItem} The TabPanelItem.
302 activate : function(id){
303 var tab = this.items[id];
307 if(tab == this.active || tab.disabled){
311 this.fireEvent("beforetabchange", this, e, tab);
312 if(e.cancel !== true && !tab.disabled){
316 this.active = this.items[id];
318 this.fireEvent("tabchange", this, this.active);
324 * Gets the active {@link Roo.TabPanelItem}.
325 * @return {Roo.TabPanelItem} The active TabPanelItem or null if none are active.
327 getActiveTab : function(){
332 * Updates the tab body element to fit the height of the container element
333 * for overflow scrolling
334 * @param {Number} targetHeight (optional) Override the starting height from the elements height
336 syncHeight : function(targetHeight){
337 var height = (targetHeight || this.el.getHeight())-this.el.getBorderWidth("tb")-this.el.getPadding("tb");
338 var bm = this.bodyEl.getMargins();
339 var newHeight = height-(this.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
340 this.bodyEl.setHeight(newHeight);
344 onResize : function(){
345 if(this.monitorResize){
351 * Disables tab resizing while tabs are being added (if {@link #resizeTabs} is false this does nothing)
353 beginUpdate : function(){
354 this.updating = true;
358 * Stops an update and resizes the tabs (if {@link #resizeTabs} is false this does nothing)
360 endUpdate : function(){
361 this.updating = false;
366 * Manual call to resize the tabs (if {@link #resizeTabs} is false this does nothing)
368 autoSizeTabs : function(){
369 var count = this.items.length;
370 var vcount = count - this.hiddenCount;
371 if(!this.resizeTabs || count < 1 || vcount < 1 || this.updating) return;
372 var w = Math.max(this.el.getWidth() - this.cpad, 10);
373 var availWidth = Math.floor(w / vcount);
374 var b = this.stripBody;
375 if(b.getWidth() > w){
376 var tabs = this.items;
377 this.setTabWidth(Math.max(availWidth, this.minTabWidth)-2);
378 if(availWidth < this.minTabWidth){
379 /*if(!this.sleft){ // incomplete scrolling code
380 this.createScrollButtons();
383 this.stripClip.setWidth(w - (this.sleft.getWidth()+this.sright.getWidth()));*/
386 if(this.currentTabWidth < this.preferredTabWidth){
387 this.setTabWidth(Math.min(availWidth, this.preferredTabWidth)-2);
393 * Returns the number of tabs in this TabPanel.
396 getCount : function(){
397 return this.items.length;
401 * Resizes all the tabs to the passed width
402 * @param {Number} The new width
404 setTabWidth : function(width){
405 this.currentTabWidth = width;
406 for(var i = 0, len = this.items.length; i < len; i++) {
407 if(!this.items[i].isHidden())this.items[i].setWidth(width);
412 * Destroys this TabPanel
413 * @param {Boolean} removeEl (optional) True to remove the element from the DOM as well (defaults to undefined)
415 destroy : function(removeEl){
416 Roo.EventManager.removeResizeListener(this.onResize, this);
417 for(var i = 0, len = this.items.length; i < len; i++){
418 this.items[i].purgeListeners();
420 if(removeEl === true){
428 * @class Roo.TabPanelItem
429 * @extends Roo.util.Observable
430 * Represents an individual item (tab plus body) in a TabPanel.
431 * @param {Roo.TabPanel} tabPanel The {@link Roo.TabPanel} this TabPanelItem belongs to
432 * @param {String} id The id of this TabPanelItem
433 * @param {String} text The text for the tab of this TabPanelItem
434 * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
436 Roo.TabPanelItem = function(tabPanel, id, text, closable){
438 * The {@link Roo.TabPanel} this TabPanelItem belongs to
441 this.tabPanel = tabPanel;
443 * The id for this TabPanelItem
448 this.disabled = false;
453 this.closable = closable;
456 * The body element for this TabPanelItem.
459 this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
460 this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
461 this.bodyEl.setStyle("display", "block");
462 this.bodyEl.setStyle("zoom", "1");
465 var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
467 this.el = Roo.get(els.el, true);
468 this.inner = Roo.get(els.inner, true);
469 this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
470 this.pnode = Roo.get(els.el.parentNode, true);
471 this.el.on("mousedown", this.onTabMouseDown, this);
472 this.el.on("click", this.onTabClick, this);
475 var c = Roo.get(els.close, true);
476 c.dom.title = this.closeText;
477 c.addClassOnOver("close-over");
478 c.on("click", this.closeClick, this);
484 * Fires when this tab becomes the active tab.
485 * @param {Roo.TabPanel} tabPanel The parent TabPanel
486 * @param {Roo.TabPanelItem} this
491 * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
492 * @param {Roo.TabPanelItem} this
493 * @param {Object} e Set cancel to true on this object to cancel the close.
498 * Fires when this tab is closed.
499 * @param {Roo.TabPanelItem} this
504 * Fires when this tab is no longer the active tab.
505 * @param {Roo.TabPanel} tabPanel The parent TabPanel
506 * @param {Roo.TabPanelItem} this
512 Roo.TabPanelItem.superclass.constructor.call(this);
515 Roo.extend(Roo.TabPanelItem, Roo.util.Observable, {
516 purgeListeners : function(){
517 Roo.util.Observable.prototype.purgeListeners.call(this);
518 this.el.removeAllListeners();
521 * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
524 this.pnode.addClass("on");
527 this.tabPanel.stripWrap.repaint();
529 this.fireEvent("activate", this.tabPanel, this);
533 * Returns true if this tab is the active tab.
536 isActive : function(){
537 return this.tabPanel.getActiveTab() == this;
541 * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
544 this.pnode.removeClass("on");
546 this.fireEvent("deactivate", this.tabPanel, this);
549 hideAction : function(){
551 this.bodyEl.setStyle("position", "absolute");
552 this.bodyEl.setLeft("-20000px");
553 this.bodyEl.setTop("-20000px");
556 showAction : function(){
557 this.bodyEl.setStyle("position", "relative");
558 this.bodyEl.setTop("");
559 this.bodyEl.setLeft("");
564 * Set the tooltip for the tab.
565 * @param {String} tooltip The tab's tooltip
567 setTooltip : function(text){
568 if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
569 this.textEl.dom.qtip = text;
570 this.textEl.dom.removeAttribute('title');
572 this.textEl.dom.title = text;
576 onTabClick : function(e){
578 this.tabPanel.activate(this.id);
581 onTabMouseDown : function(e){
583 this.tabPanel.activate(this.id);
586 getWidth : function(){
587 return this.inner.getWidth();
590 setWidth : function(width){
591 var iwidth = width - this.pnode.getPadding("lr");
592 this.inner.setWidth(iwidth);
593 this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
594 this.pnode.setWidth(width);
598 * Show or hide the tab
599 * @param {Boolean} hidden True to hide or false to show.
601 setHidden : function(hidden){
602 this.hidden = hidden;
603 this.pnode.setStyle("display", hidden ? "none" : "");
607 * Returns true if this tab is "hidden"
610 isHidden : function(){
615 * Returns the text for this tab
618 getText : function(){
622 autoSize : function(){
623 //this.el.beginMeasure();
624 this.textEl.setWidth(1);
625 this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr"));
626 //this.el.endMeasure();
630 * Sets the text for the tab (Note: this also sets the tooltip text)
631 * @param {String} text The tab's text and tooltip
633 setText : function(text){
635 this.textEl.update(text);
636 this.setTooltip(text);
637 if(!this.tabPanel.resizeTabs){
642 * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
644 activate : function(){
645 this.tabPanel.activate(this.id);
649 * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
651 disable : function(){
652 if(this.tabPanel.active != this){
653 this.disabled = true;
654 this.pnode.addClass("disabled");
659 * Enables this TabPanelItem if it was previously disabled.
662 this.disabled = false;
663 this.pnode.removeClass("disabled");
667 * Sets the content for this TabPanelItem.
668 * @param {String} content The content
669 * @param {Boolean} loadScripts true to look for and load scripts
671 setContent : function(content, loadScripts){
672 this.bodyEl.update(content, loadScripts);
676 * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
677 * @return {Roo.UpdateManager} The UpdateManager
679 getUpdateManager : function(){
680 return this.bodyEl.getUpdateManager();
684 * Set a URL to be used to load the content for this TabPanelItem.
685 * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
686 * @param {String/Object} params (optional) The string params for the update call or an object of the params. See {@link Roo.UpdateManager#update} for more details. (Defaults to null)
687 * @param {Boolean} loadOnce (optional) Whether to only load the content once. If this is false it makes the Ajax call every time this TabPanelItem is activated. (Defaults to false)
688 * @return {Roo.UpdateManager} The UpdateManager
690 setUrl : function(url, params, loadOnce){
691 if(this.refreshDelegate){
692 this.un('activate', this.refreshDelegate);
694 this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
695 this.on("activate", this.refreshDelegate);
696 return this.bodyEl.getUpdateManager();
700 _handleRefresh : function(url, params, loadOnce){
701 if(!loadOnce || !this.loaded){
702 var updater = this.bodyEl.getUpdateManager();
703 updater.update(url, params, this._setLoaded.createDelegate(this));
708 * Forces a content refresh from the URL specified in the {@link #setUrl} method.
709 * Will fail silently if the setUrl method has not been called.
710 * This does not activate the panel, just updates its content.
712 refresh : function(){
713 if(this.refreshDelegate){
715 this.refreshDelegate();
720 _setLoaded : function(){
725 closeClick : function(e){
728 this.fireEvent("beforeclose", this, o);
729 if(o.cancel !== true){
730 this.tabPanel.removeTab(this.id);
734 * The text displayed in the tooltip for the close icon.
737 closeText : "Close this tab"
741 Roo.TabPanel.prototype.createStrip = function(container){
742 var strip = document.createElement("div");
743 strip.className = "x-tabs-wrap";
744 container.appendChild(strip);
748 Roo.TabPanel.prototype.createStripList = function(strip){
749 // div wrapper for retard IE
750 // returns the "tr" element.
751 strip.innerHTML = '<div class="x-tabs-strip-wrap">'+
752 '<table class="x-tabs-strip" cellspacing="0" cellpadding="0" border="0"><tbody><tr>'+
753 '<td class="x-tab-strip-toolbar"></td></tr></tbody></table></div>';
754 return strip.firstChild.firstChild.firstChild.firstChild;
757 Roo.TabPanel.prototype.createBody = function(container){
758 var body = document.createElement("div");
759 Roo.id(body, "tab-body");
760 Roo.fly(body).addClass("x-tabs-body");
761 container.appendChild(body);
765 Roo.TabPanel.prototype.createItemBody = function(bodyEl, id){
766 var body = Roo.getDom(id);
768 body = document.createElement("div");
771 Roo.fly(body).addClass("x-tabs-item-body");
772 bodyEl.insertBefore(body, bodyEl.firstChild);
776 Roo.TabPanel.prototype.createStripElements = function(stripEl, text, closable){
777 var td = document.createElement("td");
778 stripEl.insertBefore(td, stripEl.childNodes[stripEl.childNodes.length-1]);
779 //stripEl.appendChild(td);
781 td.className = "x-tabs-closable";
783 this.closeTpl = new Roo.Template(
784 '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
785 '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span>' +
786 '<div unselectable="on" class="close-icon"> </div></em></span></a>'
789 var el = this.closeTpl.overwrite(td, {"text": text});
790 var close = el.getElementsByTagName("div")[0];
791 var inner = el.getElementsByTagName("em")[0];
792 return {"el": el, "close": close, "inner": inner};
795 this.tabTpl = new Roo.Template(
796 '<a href="#" class="x-tabs-right"><span class="x-tabs-left"><em class="x-tabs-inner">' +
797 '<span unselectable="on"' + (this.disableTooltips ? '' : ' title="{text}"') +' class="x-tabs-text">{text}</span></em></span></a>'
800 var el = this.tabTpl.overwrite(td, {"text": text});
801 var inner = el.getElementsByTagName("em")[0];
802 return {"el": el, "inner": inner};