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

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