git.roojs.org Git - roojs1/blob - Roo/panel/TabItem.js

   1 /**
   2  * @class Roo.panel.TabItem
   3  * @extends Roo.util.Observable
   4  * Represents an individual item (tab plus body) in a TabPanel.
   5  * @param {Roo.panel.Tab} tabPanel The {@link Roo.panel.Tab} this TabPanelItem belongs to
   6  * @param {String} id The id of this TabPanelItem
   7  * @param {String} text The text for the tab of this TabPanelItem
   8  * @param {Boolean} closable True to allow this TabPanelItem to be closable (defaults to false)
   9  */
  10  Roo.panel.TabItem = function(tabPanel, id, text, closable){
  11     /**
  12      * The {@link Roo.panel.Tab} this TabPanelItem belongs to
  13      * @type Roo.panel.Tab
  14      */
  15     this.tabPanel = tabPanel;
  16     /**
  17      * The id for this TabPanelItem
  18      * @type String
  19      */
  20     this.id = id;
  21     /** @private */
  22     this.disabled = false;
  23     /** @private */
  24     this.text = text;
  25     /** @private */
  26     this.loaded = false;
  27     this.closable = closable;
  28
  29     /**
  30      * The body element for this TabPanelItem.
  31      * @type Roo.Element
  32      */
  33     this.bodyEl = Roo.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
  34     this.bodyEl.setVisibilityMode(Roo.Element.VISIBILITY);
  35     this.bodyEl.setStyle("display", "block");
  36     this.bodyEl.setStyle("zoom", "1");
  37     this.hideAction();
  38
  39     var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
  40     /** @private */
  41     this.el = Roo.get(els.el, true);
  42     this.inner = Roo.get(els.inner, true);
  43     this.textEl = Roo.get(this.el.dom.firstChild.firstChild.firstChild, true);
  44     this.pnode = Roo.get(els.el.parentNode, true);
  45     this.el.on("mousedown", this.onTabMouseDown, this);
  46     this.el.on("click", this.onTabClick, this);
  47     /** @private */
  48     if(closable){
  49         var c = Roo.get(els.close, true);
  50         c.dom.title = this.closeText;
  51         c.addClassOnOver("close-over");
  52         c.on("click", this.closeClick, this);
  53      }
  54
  55     this.addEvents({
  56          /**
  57          * @event activate
  58          * Fires when this tab becomes the active tab.
  59          * @param {Roo.panel.Tab} tabPanel The parent TabPanel
  60          * @param {Roo.panel.TabItem} this
  61          */
  62         "activate": true,
  63         /**
  64          * @event beforeclose
  65          * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
  66          * @param {Roo.panel.TabItem} this
  67          * @param {Object} e Set cancel to true on this object to cancel the close.
  68          */
  69         "beforeclose": true,
  70         /**
  71          * @event close
  72          * Fires when this tab is closed.
  73          * @param {Roo.panel.TabItem} this
  74          */
  75          "close": true,
  76         /**
  77          * @event deactivate
  78          * Fires when this tab is no longer the active tab.
  79          * @param {Roo.panel.Tab} tabPanel The parent TabPanel
  80          * @param {Roo.panel.TabItem} this
  81          */
  82          "deactivate" : true
  83     });
  84     this.hidden = false;
  85
  86     Roo.panel.TabItem.superclass.constructor.call(this);
  87 };
  88
  89 Roo.extend(Roo.panel.TabItem, Roo.util.Observable, {
  90     purgeListeners : function(){
  91        Roo.util.Observable.prototype.purgeListeners.call(this);
  92        this.el.removeAllListeners();
  93     },
  94     /**
  95      * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
  96      */
  97     show : function(){
  98         this.pnode.addClass("on");
  99         this.showAction();
 100         if(Roo.isOpera){
 101             this.tabPanel.stripWrap.repaint();
 102         }
 103         this.fireEvent("activate", this.tabPanel, this);
 104     },
 105
 106     /**
 107      * Returns true if this tab is the active tab.
 108      * @return {Boolean}
 109      */
 110     isActive : function(){
 111         return this.tabPanel.getActiveTab() == this;
 112     },
 113
 114     /**
 115      * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
 116      */
 117     hide : function(){
 118         this.pnode.removeClass("on");
 119         this.hideAction();
 120         this.fireEvent("deactivate", this.tabPanel, this);
 121     },
 122
 123     hideAction : function(){
 124         this.bodyEl.hide();
 125         this.bodyEl.setStyle("position", "absolute");
 126         this.bodyEl.setLeft("-20000px");
 127         this.bodyEl.setTop("-20000px");
 128     },
 129
 130     showAction : function(){
 131         this.bodyEl.setStyle("position", "relative");
 132         this.bodyEl.setTop("");
 133         this.bodyEl.setLeft("");
 134         this.bodyEl.show();
 135     },
 136
 137     /**
 138      * Set the tooltip for the tab.
 139      * @param {String} tooltip The tab's tooltip
 140      */
 141     setTooltip : function(text){
 142         if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
 143             this.textEl.dom.qtip = text;
 144             this.textEl.dom.removeAttribute('title');
 145         }else{
 146             this.textEl.dom.title = text;
 147         }
 148     },
 149
 150     onTabClick : function(e){
 151         e.preventDefault();
 152         this.tabPanel.activate(this.id);
 153     },
 154
 155     onTabMouseDown : function(e){
 156         e.preventDefault();
 157         this.tabPanel.activate(this.id);
 158     },
 159
 160     getWidth : function(){
 161         return this.inner.getWidth();
 162     },
 163
 164     setWidth : function(width){
 165         var iwidth = width - this.pnode.getPadding("lr");
 166         this.inner.setWidth(iwidth);
 167         this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
 168         this.pnode.setWidth(width);
 169     },
 170
 171     /**
 172      * Show or hide the tab
 173      * @param {Boolean} hidden True to hide or false to show.
 174      */
 175     setHidden : function(hidden){
 176         this.hidden = hidden;
 177         this.pnode.setStyle("display", hidden ? "none" : "");
 178     },
 179
 180     /**
 181      * Returns true if this tab is "hidden"
 182      * @return {Boolean}
 183      */
 184     isHidden : function(){
 185         return this.hidden;
 186     },
 187
 188     /**
 189      * Returns the text for this tab
 190      * @return {String}
 191      */
 192     getText : function(){
 193         return this.text;
 194     },
 195
 196     autoSize : function(){
 197         //this.el.beginMeasure();
 198         this.textEl.setWidth(1);
 199         /*
 200          *  #2804 [new] Tabs in Roojs
 201          *  increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
 202          */
 203         this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
 204         //this.el.endMeasure();
 205     },
 206
 207     /**
 208      * Sets the text for the tab (Note: this also sets the tooltip text)
 209      * @param {String} text The tab's text and tooltip
 210      */
 211     setText : function(text){
 212         this.text = text;
 213         this.textEl.update(text);
 214         this.setTooltip(text);
 215         if(!this.tabPanel.resizeTabs){
 216             this.autoSize();
 217         }
 218     },
 219     /**
 220      * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
 221      */
 222     activate : function(){
 223         this.tabPanel.activate(this.id);
 224     },
 225
 226     /**
 227      * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
 228      */
 229     disable : function(){
 230         if(this.tabPanel.active != this){
 231             this.disabled = true;
 232             this.pnode.addClass("disabled");
 233         }
 234     },
 235
 236     /**
 237      * Enables this TabPanelItem if it was previously disabled.
 238      */
 239     enable : function(){
 240         this.disabled = false;
 241         this.pnode.removeClass("disabled");
 242     },
 243
 244     /**
 245      * Sets the content for this TabPanelItem.
 246      * @param {String} content The content
 247      * @param {Boolean} loadScripts true to look for and load scripts
 248      */
 249     setContent : function(content, loadScripts){
 250         this.bodyEl.update(content, loadScripts);
 251     },
 252
 253     /**
 254      * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
 255      * @return {Roo.UpdateManager} The UpdateManager
 256      */
 257     getUpdateManager : function(){
 258         return this.bodyEl.getUpdateManager();
 259     },
 260
 261     /**
 262      * Set a URL to be used to load the content for this TabPanelItem.
 263      * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
 264      * @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)
 265      * @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)
 266      * @return {Roo.UpdateManager} The UpdateManager
 267      */
 268     setUrl : function(url, params, loadOnce){
 269         if(this.refreshDelegate){
 270             this.un('activate', this.refreshDelegate);
 271         }
 272         this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
 273         this.on("activate", this.refreshDelegate);
 274         return this.bodyEl.getUpdateManager();
 275     },
 276
 277     /** @private */
 278     _handleRefresh : function(url, params, loadOnce){
 279         if(!loadOnce || !this.loaded){
 280             var updater = this.bodyEl.getUpdateManager();
 281             updater.update(url, params, this._setLoaded.createDelegate(this));
 282         }
 283     },
 284
 285     /**
 286      *   Forces a content refresh from the URL specified in the {@link #setUrl} method.
 287      *   Will fail silently if the setUrl method has not been called.
 288      *   This does not activate the panel, just updates its content.
 289      */
 290     refresh : function(){
 291         if(this.refreshDelegate){
 292            this.loaded = false;
 293            this.refreshDelegate();
 294         }
 295     },
 296
 297     /** @private */
 298     _setLoaded : function(){
 299         this.loaded = true;
 300     },
 301
 302     /** @private */
 303     closeClick : function(e){
 304         var o = {};
 305         e.stopEvent();
 306         this.fireEvent("beforeclose", this, o);
 307         if(o.cancel !== true){
 308             this.tabPanel.removeTab(this.id);
 309         }
 310     },
 311     /**
 312      * The text displayed in the tooltip for the close icon.
 313      * @type String
 314      */
 315     closeText : "Close this tab"
 316 });
 317
 318 /** @private */
 319 Roo.panel.Tab.prototype.createStrip = function(container){
 320     var strip = document.createElement("div");
 321     strip.className = "x-tabs-wrap";
 322     container.appendChild(strip);
 323     return strip;
 324 };