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)
10 Roo.panel.TabItem = function(tabPanel, id, text, closable){
12 * The {@link Roo.panel.Tab} this TabPanelItem belongs to
15 this.tabPanel = tabPanel;
17 * The id for this TabPanelItem
22 this.disabled = false;
27 this.closable = closable;
30 * The body element for this TabPanelItem.
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");
39 var els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
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);
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);
58 * Fires when this tab becomes the active tab.
59 * @param {Roo.panel.Tab} tabPanel The parent TabPanel
60 * @param {Roo.panel.TabItem} this
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.
72 * Fires when this tab is closed.
73 * @param {Roo.panel.TabItem} this
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
86 Roo.panel.TabItem.superclass.constructor.call(this);
89 Roo.extend(Roo.panel.TabItem, Roo.util.Observable, {
90 purgeListeners : function(){
91 Roo.util.Observable.prototype.purgeListeners.call(this);
92 this.el.removeAllListeners();
95 * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
98 this.pnode.addClass("on");
101 this.tabPanel.stripWrap.repaint();
103 this.fireEvent("activate", this.tabPanel, this);
107 * Returns true if this tab is the active tab.
110 isActive : function(){
111 return this.tabPanel.getActiveTab() == this;
115 * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
118 this.pnode.removeClass("on");
120 this.fireEvent("deactivate", this.tabPanel, this);
123 hideAction : function(){
125 this.bodyEl.setStyle("position", "absolute");
126 this.bodyEl.setLeft("-20000px");
127 this.bodyEl.setTop("-20000px");
130 showAction : function(){
131 this.bodyEl.setStyle("position", "relative");
132 this.bodyEl.setTop("");
133 this.bodyEl.setLeft("");
138 * Set the tooltip for the tab.
139 * @param {String} tooltip The tab's tooltip
141 setTooltip : function(text){
142 if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
143 this.textEl.dom.qtip = text;
144 this.textEl.dom.removeAttribute('title');
146 this.textEl.dom.title = text;
150 onTabClick : function(e){
152 this.tabPanel.activate(this.id);
155 onTabMouseDown : function(e){
157 this.tabPanel.activate(this.id);
160 getWidth : function(){
161 return this.inner.getWidth();
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);
172 * Show or hide the tab
173 * @param {Boolean} hidden True to hide or false to show.
175 setHidden : function(hidden){
176 this.hidden = hidden;
177 this.pnode.setStyle("display", hidden ? "none" : "");
181 * Returns true if this tab is "hidden"
184 isHidden : function(){
189 * Returns the text for this tab
192 getText : function(){
196 autoSize : function(){
197 //this.el.beginMeasure();
198 this.textEl.setWidth(1);
200 * #2804 [new] Tabs in Roojs
201 * increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
203 this.setWidth(this.textEl.dom.scrollWidth+this.pnode.getPadding("lr")+this.inner.getPadding("lr") + 2);
204 //this.el.endMeasure();
208 * Sets the text for the tab (Note: this also sets the tooltip text)
209 * @param {String} text The tab's text and tooltip
211 setText : function(text){
213 this.textEl.update(text);
214 this.setTooltip(text);
215 if(!this.tabPanel.resizeTabs){
220 * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
222 activate : function(){
223 this.tabPanel.activate(this.id);
227 * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
229 disable : function(){
230 if(this.tabPanel.active != this){
231 this.disabled = true;
232 this.pnode.addClass("disabled");
237 * Enables this TabPanelItem if it was previously disabled.
240 this.disabled = false;
241 this.pnode.removeClass("disabled");
245 * Sets the content for this TabPanelItem.
246 * @param {String} content The content
247 * @param {Boolean} loadScripts true to look for and load scripts
249 setContent : function(content, loadScripts){
250 this.bodyEl.update(content, loadScripts);
254 * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
255 * @return {Roo.UpdateManager} The UpdateManager
257 getUpdateManager : function(){
258 return this.bodyEl.getUpdateManager();
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
268 setUrl : function(url, params, loadOnce){
269 if(this.refreshDelegate){
270 this.un('activate', this.refreshDelegate);
272 this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
273 this.on("activate", this.refreshDelegate);
274 return this.bodyEl.getUpdateManager();
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));
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.
290 refresh : function(){
291 if(this.refreshDelegate){
293 this.refreshDelegate();
298 _setLoaded : function(){
303 closeClick : function(e){
306 this.fireEvent("beforeclose", this, o);
307 if(o.cancel !== true){
308 this.tabPanel.removeTab(this.id);
312 * The text displayed in the tooltip for the close icon.
315 closeText : "Close this tab"
319 Roo.panel.Tab.prototype.createStrip = function(container){
320 var strip = document.createElement("div");
321 strip.className = "x-tabs-wrap";
322 container.appendChild(strip);