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)
11 Roo.bootstrap.panel.TabItem = function(config){
13 * The {@link Roo.TabPanel} this TabPanelItem belongs to
16 this.tabPanel = config.panel;
18 * The id for this TabPanelItem
23 this.disabled = false;
25 this.text = config.text;
28 this.closable = config.closable;
31 * The body element for this TabPanelItem.
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");
40 var els = this.tabPanel.createStripElements(this.tabPanel.stripEl.dom, config.text, config.closable, config.tpl);
42 this.el = Roo.get(els.el);
43 this.inner = Roo.get(els.inner, true);
44 this.textEl = Roo.bootstrap.version == 4 ?
45 this.el : Roo.get(this.el.dom.firstChild, true);
47 this.linode = Roo.get(els.el.parentNode, true);
48 this.status_node = Roo.bootstrap.version == 4 ? this.el : this.linode;
51 // this.el.on("mousedown", this.onTabMouseDown, this);
52 this.el.on("click", this.onTabClick, this);
55 var c = Roo.get(els.close, true);
56 c.dom.title = this.closeText;
57 c.addClassOnOver("close-over");
58 c.on("click", this.closeClick, this);
64 * Fires when this tab becomes the active tab.
65 * @param {Roo.TabPanel} tabPanel The parent TabPanel
66 * @param {Roo.TabPanelItem} this
71 * Fires before this tab is closed. To cancel the close, set cancel to true on e (e.cancel = true).
72 * @param {Roo.TabPanelItem} this
73 * @param {Object} e Set cancel to true on this object to cancel the close.
78 * Fires when this tab is closed.
79 * @param {Roo.TabPanelItem} this
84 * Fires when this tab is no longer the active tab.
85 * @param {Roo.TabPanel} tabPanel The parent TabPanel
86 * @param {Roo.TabPanelItem} this
92 Roo.bootstrap.panel.TabItem.superclass.constructor.call(this);
95 Roo.extend(Roo.bootstrap.panel.TabItem, Roo.util.Observable,
97 purgeListeners : function(){
98 Roo.util.Observable.prototype.purgeListeners.call(this);
99 this.el.removeAllListeners();
102 * Shows this TabPanelItem -- this <b>does not</b> deactivate the currently active TabPanelItem.
105 this.status_node.addClass("active");
108 this.tabPanel.stripWrap.repaint();
110 this.fireEvent("activate", this.tabPanel, this);
114 * Returns true if this tab is the active tab.
117 isActive : function(){
118 return this.tabPanel.getActiveTab() == this;
122 * Hides this TabPanelItem -- if you don't activate another TabPanelItem this could look odd.
125 this.status_node.removeClass("active");
127 this.fireEvent("deactivate", this.tabPanel, this);
130 hideAction : function(){
132 this.bodyEl.setStyle("position", "absolute");
133 this.bodyEl.setLeft("-20000px");
134 this.bodyEl.setTop("-20000px");
137 showAction : function(){
138 this.bodyEl.setStyle("position", "relative");
139 this.bodyEl.setTop("");
140 this.bodyEl.setLeft("");
145 * Set the tooltip for the tab.
146 * @param {String} tooltip The tab's tooltip
148 setTooltip : function(text){
149 if(Roo.QuickTips && Roo.QuickTips.isEnabled()){
150 this.textEl.dom.qtip = text;
151 this.textEl.dom.removeAttribute('title');
153 this.textEl.dom.title = text;
157 onTabClick : function(e){
159 this.tabPanel.activate(this.id);
162 onTabMouseDown : function(e){
164 this.tabPanel.activate(this.id);
167 getWidth : function(){
168 return this.inner.getWidth();
171 setWidth : function(width){
172 var iwidth = width - this.linode.getPadding("lr");
173 this.inner.setWidth(iwidth);
174 this.textEl.setWidth(iwidth-this.inner.getPadding("lr"));
175 this.linode.setWidth(width);
179 * Show or hide the tab
180 * @param {Boolean} hidden True to hide or false to show.
182 setHidden : function(hidden){
183 this.hidden = hidden;
184 this.linode.setStyle("display", hidden ? "none" : "");
188 * Returns true if this tab is "hidden"
191 isHidden : function(){
196 * Returns the text for this tab
199 getText : function(){
203 autoSize : function(){
204 //this.el.beginMeasure();
205 this.textEl.setWidth(1);
207 * #2804 [new] Tabs in Roojs
208 * increase the width by 2-4 pixels to prevent the ellipssis showing in chrome
210 //this.setWidth(this.textEl.dom.scrollWidth+this.linode.getPadding("lr")+this.inner.getPadding("lr") + 2);
211 //this.el.endMeasure();
215 * Sets the text for the tab (Note: this also sets the tooltip text)
216 * @param {String} text The tab's text and tooltip
218 setText : function(text){
220 this.textEl.update(text);
221 this.setTooltip(text);
222 //if(!this.tabPanel.resizeTabs){
227 * Activates this TabPanelItem -- this <b>does</b> deactivate the currently active TabPanelItem.
229 activate : function(){
230 this.tabPanel.activate(this.id);
234 * Disables this TabPanelItem -- this does nothing if this is the active TabPanelItem.
236 disable : function(){
237 if(this.tabPanel.active != this){
238 this.disabled = true;
239 this.status_node.addClass("disabled");
244 * Enables this TabPanelItem if it was previously disabled.
247 this.disabled = false;
248 this.status_node.removeClass("disabled");
252 * Sets the content for this TabPanelItem.
253 * @param {String} content The content
254 * @param {Boolean} loadScripts true to look for and load scripts
256 setContent : function(content, loadScripts){
257 this.bodyEl.update(content, loadScripts);
261 * Gets the {@link Roo.UpdateManager} for the body of this TabPanelItem. Enables you to perform Ajax updates.
262 * @return {Roo.UpdateManager} The UpdateManager
264 getUpdateManager : function(){
265 return this.bodyEl.getUpdateManager();
269 * Set a URL to be used to load the content for this TabPanelItem.
270 * @param {String/Function} url The URL to load the content from, or a function to call to get the URL
271 * @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)
272 * @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)
273 * @return {Roo.UpdateManager} The UpdateManager
275 setUrl : function(url, params, loadOnce){
276 if(this.refreshDelegate){
277 this.un('activate', this.refreshDelegate);
279 this.refreshDelegate = this._handleRefresh.createDelegate(this, [url, params, loadOnce]);
280 this.on("activate", this.refreshDelegate);
281 return this.bodyEl.getUpdateManager();
285 _handleRefresh : function(url, params, loadOnce){
286 if(!loadOnce || !this.loaded){
287 var updater = this.bodyEl.getUpdateManager();
288 updater.update(url, params, this._setLoaded.createDelegate(this));
293 * Forces a content refresh from the URL specified in the {@link #setUrl} method.
294 * Will fail silently if the setUrl method has not been called.
295 * This does not activate the panel, just updates its content.
297 refresh : function(){
298 if(this.refreshDelegate){
300 this.refreshDelegate();
305 _setLoaded : function(){
310 closeClick : function(e){
313 this.fireEvent("beforeclose", this, o);
314 if(o.cancel !== true){
315 this.tabPanel.removeTab(this.id);
319 * The text displayed in the tooltip for the close icon.
322 closeText : "Close this tab"