oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/extjs/docs/output/TabPanel.jss.html

744 lines
No EOL
30 KiB
HTML
Raw Blame History

<html><head><title>TabPanel.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>TabPanel.js</h1><pre class="highlighted"><code><i>/**
* @class Ext.TabPanel
* @extends Ext.util.Observable
* Creates a lightweight TabPanel component using Yahoo! UI.
* &lt;br&gt;&lt;br&gt;
* Usage:
* &lt;pre&gt;&lt;code&gt;
&lt;font color=&quot;#008000&quot;&gt;<i>// basic tabs 1, built from existing content&lt;/font&gt;</i>
<b>var</b> tabs = <b>new</b> Ext.TabPanel(&quot;tabs1&quot;);
tabs.addTab(&quot;script&quot;, &quot;View Script&quot;);
tabs.addTab(&quot;markup&quot;, &quot;View Markup&quot;);
tabs.activate(&quot;script&quot;);
&lt;font color=&quot;#008000&quot;&gt;<i>// more advanced tabs, built from javascript&lt;/font&gt;</i>
<b>var</b> jtabs = <b>new</b> Ext.TabPanel(&quot;jtabs&quot;);
jtabs.addTab(&quot;jtabs-1&quot;, &quot;Normal Tab&quot;, &quot;My content was added during construction.&quot;);
&lt;font color=&quot;#008000&quot;&gt;<i>// set up the UpdateManager&lt;/font&gt;</i>
<b>var</b> tab2 = jtabs.addTab(&quot;jtabs-2&quot;, &quot;Ajax Tab 1&quot;);
<b>var</b> updater = tab2.getUpdateManager();
updater.setDefaultUrl(&quot;ajax1.htm&quot;);
tab2.on('activate', updater.refresh, updater, true);
&lt;font color=&quot;#008000&quot;&gt;<i>// Use setUrl <b>for</b> Ajax loading&lt;/font&gt;</i>
<b>var</b> tab3 = jtabs.addTab(&quot;jtabs-3&quot;, &quot;Ajax Tab 2&quot;);
tab3.setUrl(&quot;ajax2.htm&quot;, null, true);
&lt;font color=&quot;#008000&quot;&gt;<i>// Disabled tab&lt;/font&gt;</i>
<b>var</b> tab4 = jtabs.addTab(&quot;tabs1-5&quot;, &quot;Disabled Tab&quot;, &quot;Can&quot;t see me cause I&quot;m disabled&quot;);
tab4.disable();
jtabs.activate(&quot;jtabs-1&quot;);
}
* &lt;/code&gt;&lt;/pre&gt;
* @constructor
* Create <b>new</b> TabPanel.
* @param {String/HTMLElement/Element} container The id, DOM element or Ext.Element container where <b>this</b> TabPanel is to be rendered.
* @param {Boolean} config Config object to set any properties <b>for</b> this TabPanel or true to render the tabs on the bottom.
*/</i>
Ext.TabPanel = <b>function</b>(container, config){
<i>/**
* The container element <b>for</b> this TabPanel.
* @type Ext.Element
*/</i>
<b>this</b>.el = Ext.get(container, true);
<b>if</b>(config){
<b>if</b>(typeof config == &quot;boolean&quot;){
<b>this</b>.tabPosition = config ? &quot;bottom&quot; : &quot;top&quot;;
}<b>else</b>{
Ext.apply(<b>this</b>, config);
}
}
<b>if</b>(this.tabPosition == &quot;bottom&quot;){
<b>this</b>.bodyEl = Ext.get(<b>this</b>.createBody(<b>this</b>.el.dom));
<b>this</b>.el.addClass(&quot;x-tabs-bottom&quot;);
}
<b>this</b>.stripWrap = Ext.get(<b>this</b>.createStrip(<b>this</b>.el.dom), true);
<b>this</b>.stripEl = Ext.get(<b>this</b>.createStripList(<b>this</b>.stripWrap.dom), true);
<b>this</b>.stripBody = Ext.get(<b>this</b>.stripWrap.dom.firstChild.firstChild, true);
<b>if</b>(Ext.isIE){
Ext.fly(<b>this</b>.stripWrap.dom.firstChild).setStyle(&quot;overflow-x&quot;, &quot;hidden&quot;);
}
<b>if</b>(this.tabPosition != &quot;bottom&quot;){
<i>/** The body element that contains TabPaneItem bodies.
* @type Ext.Element
*/</i>
<b>this</b>.bodyEl = Ext.get(<b>this</b>.createBody(<b>this</b>.el.dom));
<b>this</b>.el.addClass(&quot;x-tabs-top&quot;);
}
<b>this</b>.items = [];
<b>this</b>.bodyEl.setStyle(&quot;position&quot;, &quot;relative&quot;);
<b>this</b>.active = null;
<b>this</b>.activateDelegate = <b>this</b>.activate.createDelegate(<b>this</b>);
<b>this</b>.addEvents({
<i>/**
* @event tabchange
* Fires when the active tab changes
* @param {Ext.TabPanel} <b>this</b>
* @param {Ext.TabPanelItem} activePanel The <b>new</b> active tab
*/</i>
&quot;tabchange&quot;: true,
<i>/**
* @event beforetabchange
* Fires before the active tab changes, set cancel to true on the &quot;e&quot; parameter to cancel the change
* @param {Ext.TabPanel} <b>this</b>
* @param {Object} e Set cancel to true on <b>this</b> object to cancel the tab change
* @param {Ext.TabPanelItem} tab The tab being changed to
*/</i>
&quot;beforetabchange&quot; : true
});
Ext.EventManager.onWindowResize(<b>this</b>.onResize, <b>this</b>);
<b>this</b>.cpad = <b>this</b>.el.getPadding(&quot;lr&quot;);
<b>this</b>.hiddenCount = 0;
Ext.TabPanel.superclass.constructor.call(<b>this</b>);
};
Ext.extend(Ext.TabPanel, Ext.util.Observable, {
<i>/** The position of the tabs. Can be &quot;top&quot; or &quot;bottom&quot; @type String */</i>
tabPosition : &quot;top&quot;,
currentTabWidth : 0,
<i>/** The minimum width of a tab (ignored <b>if</b> resizeTabs is not true). @type Number */</i>
minTabWidth : 40,
<i>/** The maximum width of a tab (ignored <b>if</b> resizeTabs is not true). @type Number */</i>
maxTabWidth : 250,
<i>/** The preferred (<b>default</b>) width of a tab (ignored <b>if</b> resizeTabs is not true). @type Number */</i>
preferredTabWidth : 175,
<i>/** Set <b>this</b> to true to enable dynamic tab resizing. @type Boolean */</i>
resizeTabs : false,
<i>/** Set <b>this</b> to true to turn on window resizing monitoring (ignored <b>if</b> resizeTabs is not true). @type Boolean */</i>
monitorResize : true,
<i>/**
* Creates a <b>new</b> TabPanelItem by looking <b>for</b> an existing element <b>with</b> the provided id - <b>if</b> it's not found it creates one.
* @param {String} id The id of the div to use &lt;b&gt;or create&lt;/b&gt;
* @param {String} text The text <b>for</b> the tab
* @param {String} content (optional) Content to put <b>in</b> the TabPanelItem body
* @param {Boolean} closable (optional) True to create a close icon on the tab
* @<b>return</b> {Ext.TabPanelItem} The created TabPanelItem
*/</i>
addTab : <b>function</b>(id, text, content, closable){
<b>var</b> item = <b>new</b> Ext.TabPanelItem(<b>this</b>, id, text, closable);
<b>this</b>.addTabItem(item);
<b>if</b>(content){
item.setContent(content);
}
<b>return</b> item;
},
<i>/**
* Returns the TabPanelItem <b>with</b> the specified id/index
* @param {String/Number} id The id or index of the TabPanelItem to fetch.
* @<b>return</b> {Ext.TabPanelItem}
*/</i>
getTab : <b>function</b>(id){
<b>return</b> this.items[id];
},
<i>/**
* Hides the TabPanelItem <b>with</b> the specified id/index
* @param {String/Number} id The id or index of the TabPanelItem to hide.
*/</i>
hideTab : <b>function</b>(id){
<b>var</b> t = <b>this</b>.items[id];
<b>if</b>(!t.isHidden()){
t.setHidden(true);
<b>this</b>.hiddenCount++;
<b>this</b>.autoSizeTabs();
}
},
<i>/**
* &quot;Unhides&quot; the TabPanelItem <b>with</b> the specified id/index
* @param {String/Number} id The id or index of the TabPanelItem to unhide.
*/</i>
unhideTab : <b>function</b>(id){
<b>var</b> t = <b>this</b>.items[id];
<b>if</b>(t.isHidden()){
t.setHidden(false);
<b>this</b>.hiddenCount--;
<b>this</b>.autoSizeTabs();
}
},
<i>/**
* Add an existing TabPanelItem.
* @param {Ext.TabPanelItem} item The TabPanelItem to add
*/</i>
addTabItem : <b>function</b>(item){
<b>this</b>.items[item.id] = item;
<b>this</b>.items.push(item);
<b>if</b>(this.resizeTabs){
item.setWidth(<b>this</b>.currentTabWidth || <b>this</b>.preferredTabWidth);
<b>this</b>.autoSizeTabs();
}<b>else</b>{
item.autoSize();
}
},
<i>/**
* Remove a TabPanelItem.
* @param {String/Number} id The id or index of the TabPanelItem to remove.
*/</i>
removeTab : <b>function</b>(id){
<b>var</b> items = <b>this</b>.items;
<b>var</b> tab = items[id];
<b>if</b>(!tab) <b>return</b>;
<b>var</b> index = items.indexOf(tab);
<b>if</b>(this.active == tab &amp;&amp; items.length &gt; 1){
<b>var</b> newTab = <b>this</b>.getNextAvailable(index);
<b>if</b>(newTab)newTab.activate();
}
<b>this</b>.stripEl.dom.removeChild(tab.pnode.dom);
<b>if</b>(tab.bodyEl.dom.parentNode == <b>this</b>.bodyEl.dom){ <i>// <b>if</b> it was moved already prevent error</i>
<b>this</b>.bodyEl.dom.removeChild(tab.bodyEl.dom);
}
items.splice(index, 1);
<b>delete</b> this.items[tab.id];
tab.fireEvent(&quot;close&quot;, tab);
tab.purgeListeners();
<b>this</b>.autoSizeTabs();
},
getNextAvailable : <b>function</b>(start){
<b>var</b> items = <b>this</b>.items;
<b>var</b> index = start;
<i>// look <b>for</b> a next tab that will slide over to</i>
<i>// replace the one being removed</i>
<b>while</b>(index &lt; items.length){
<b>var</b> item = items[++index];
<b>if</b>(item &amp;&amp; !item.isHidden()){
<b>return</b> item;
}
}
<i>// <b>if</b> one isn't found select the previous tab (on the left)</i>
index = start;
<b>while</b>(index &gt;= 0){
<b>var</b> item = items[--index];
<b>if</b>(item &amp;&amp; !item.isHidden()){
<b>return</b> item;
}
}
<b>return</b> null;
},
<i>/**
* Disable a TabPanelItem. &lt;b&gt;It cannot be the active tab, <b>if</b> it is <b>this</b> call is ignored.&lt;/b&gt;.
* @param {String/Number} id The id or index of the TabPanelItem to disable.
*/</i>
disableTab : <b>function</b>(id){
<b>var</b> tab = <b>this</b>.items[id];
<b>if</b>(tab &amp;&amp; <b>this</b>.active != tab){
tab.disable();
}
},
<i>/**
* Enable a TabPanelItem that is disabled.
* @param {String/Number} id The id or index of the TabPanelItem to enable.
*/</i>
enableTab : <b>function</b>(id){
<b>var</b> tab = <b>this</b>.items[id];
tab.enable();
},
<i>/**
* Activate a TabPanelItem. The currently active will be deactivated.
* @param {String/Number} id The id or index of the TabPanelItem to activate.
*/</i>
activate : <b>function</b>(id){
<b>var</b> tab = <b>this</b>.items[id];
<b>if</b>(!tab){
<b>return</b> null;
}
<b>if</b>(tab == <b>this</b>.active){
<b>return</b> tab;
}
<b>var</b> e = {};
<b>this</b>.fireEvent(&quot;beforetabchange&quot;, <b>this</b>, e, tab);
<b>if</b>(e.cancel !== true &amp;&amp; !tab.disabled){
<b>if</b>(this.active){
<b>this</b>.active.hide();
}
<b>this</b>.active = <b>this</b>.items[id];
<b>this</b>.active.show();
<b>this</b>.fireEvent(&quot;tabchange&quot;, <b>this</b>, <b>this</b>.active);
}
<b>return</b> tab;
},
<i>/**
* Get the active TabPanelItem
* @<b>return</b> {Ext.TabPanelItem} The active TabPanelItem or null <b>if</b> none are active.
*/</i>
getActiveTab : <b>function</b>(){
<b>return</b> this.active;
},
<i>/**
* Updates the tab body element to fit the height of the container element
* <b>for</b> overflow scrolling
* @param {Number} targetHeight (optional) Override the starting height from the elements height
*/</i>
syncHeight : <b>function</b>(targetHeight){
<b>var</b> height = (targetHeight || <b>this</b>.el.getHeight())-<b>this</b>.el.getBorderWidth(&quot;tb&quot;)-<b>this</b>.el.getPadding(&quot;tb&quot;);
<b>var</b> bm = <b>this</b>.bodyEl.getMargins();
<b>var</b> newHeight = height-(<b>this</b>.stripWrap.getHeight()||0)-(bm.top+bm.bottom);
<b>this</b>.bodyEl.setHeight(newHeight);
<b>return</b> newHeight;
},
onResize : <b>function</b>(){
<b>if</b>(this.monitorResize){
<b>this</b>.autoSizeTabs();
}
},
<i>/**
* Disables tab resizing <b>while</b> tabs are being added (<b>if</b> resizeTabs is false <b>this</b> does nothing)
*/</i>
beginUpdate : <b>function</b>(){
<b>this</b>.updating = true;
},
<i>/**
* Stops an update and resizes the tabs (<b>if</b> resizeTabs is false <b>this</b> does nothing)
*/</i>
endUpdate : <b>function</b>(){
<b>this</b>.updating = false;
<b>this</b>.autoSizeTabs();
},
<i>/**
* Manual call to resize the tabs (<b>if</b> resizeTabs is false <b>this</b> does nothing)
*/</i>
autoSizeTabs : <b>function</b>(){
<b>var</b> count = <b>this</b>.items.length;
<b>var</b> vcount = count - <b>this</b>.hiddenCount;
<b>if</b>(!<b>this</b>.resizeTabs || count &lt; 1 || vcount &lt; 1 || <b>this</b>.updating) <b>return</b>;
<b>var</b> w = Math.max(<b>this</b>.el.getWidth() - <b>this</b>.cpad, 10);
<b>var</b> availWidth = Math.floor(w / vcount);
<b>var</b> b = <b>this</b>.stripBody;
<b>if</b>(b.getWidth() &gt; w){
<b>var</b> tabs = <b>this</b>.items;
<b>this</b>.setTabWidth(Math.max(availWidth, <b>this</b>.minTabWidth)-2);
<b>if</b>(availWidth &lt; <b>this</b>.minTabWidth){
<i>/*<b>if</b>(!<b>this</b>.sleft){ <i>// incomplete scrolling code</i>
<b>this</b>.createScrollButtons();
}
<b>this</b>.showScroll();
<b>this</b>.stripClip.setWidth(w - (<b>this</b>.sleft.getWidth()+<b>this</b>.sright.getWidth()));*/</i>
}
}<b>else</b>{
<b>if</b>(this.currentTabWidth &lt; <b>this</b>.preferredTabWidth){
<b>this</b>.setTabWidth(Math.min(availWidth, <b>this</b>.preferredTabWidth)-2);
}
}
},
<i>/**
* Returns the number of tabs
* @<b>return</b> {Number}
*/</i>
getCount : <b>function</b>(){
<b>return</b> this.items.length;
},
<i>/**
* Resizes all the tabs to the passed width
* @param {Number} The <b>new</b> width
*/</i>
setTabWidth : <b>function</b>(width){
<b>this</b>.currentTabWidth = width;
<b>for</b>(var i = 0, len = <b>this</b>.items.length; i &lt; len; i++) {
<b>if</b>(!<b>this</b>.items[i].isHidden())<b>this</b>.items[i].setWidth(width);
}
},
<i>/**
* Destroys <b>this</b> TabPanel
* @param {Boolean} removeEl (optional) True to remove the element from the DOM as well
*/</i>
destroy : <b>function</b>(removeEl){
Ext.EventManager.removeResizeListener(<b>this</b>.onResize, <b>this</b>);
<b>for</b>(var i = 0, len = <b>this</b>.items.length; i &lt; len; i++){
<b>this</b>.items[i].purgeListeners();
}
<b>if</b>(removeEl === true){
<b>this</b>.el.update(&quot;&quot;);
<b>this</b>.el.remove();
}
}
});
<i>/**
* @class Ext.TabPanelItem
* @extends Ext.util.Observable
*/</i>
Ext.TabPanelItem = <b>function</b>(tabPanel, id, text, closable){
<i>/**
* The TabPanel <b>this</b> TabPanelItem belongs to
* @type Ext.TabPanel
*/</i>
<b>this</b>.tabPanel = tabPanel;
<i>/**
* The id <b>for</b> this TabPanelItem
* @type String
*/</i>
<b>this</b>.id = id;
<i>/** @private */</i>
<b>this</b>.disabled = false;
<i>/** @private */</i>
<b>this</b>.text = text;
<i>/** @private */</i>
<b>this</b>.loaded = false;
<b>this</b>.closable = closable;
<i>/**
* The body element <b>for</b> this TabPanelItem
* @type Ext.Element
*/</i>
<b>this</b>.bodyEl = Ext.get(tabPanel.createItemBody(tabPanel.bodyEl.dom, id));
<b>this</b>.bodyEl.setVisibilityMode(Ext.Element.VISIBILITY);
<b>this</b>.bodyEl.setStyle(&quot;display&quot;, &quot;block&quot;);
<b>this</b>.bodyEl.setStyle(&quot;zoom&quot;, &quot;1&quot;);
<b>this</b>.hideAction();
<b>var</b> els = tabPanel.createStripElements(tabPanel.stripEl.dom, text, closable);
<i>/** @private */</i>
<b>this</b>.el = Ext.get(els.el, true);
<b>this</b>.inner = Ext.get(els.inner, true);
<b>this</b>.textEl = Ext.get(<b>this</b>.el.dom.firstChild.firstChild.firstChild, true);
<b>this</b>.pnode = Ext.get(els.el.parentNode, true);
<b>this</b>.el.on(&quot;mousedown&quot;, <b>this</b>.onTabMouseDown, <b>this</b>);
<b>this</b>.el.on(&quot;click&quot;, <b>this</b>.onTabClick, <b>this</b>);
<i>/** @private */</i>
<b>if</b>(closable){
<b>var</b> c = Ext.get(els.close, true);
c.dom.title = <b>this</b>.closeText;
c.addClassOnOver(&quot;close-over&quot;);
c.on(&quot;click&quot;, <b>this</b>.closeClick, <b>this</b>);
}
<b>this</b>.addEvents({
<i>/**
* @event activate
* Fires when <b>this</b> tab becomes the active tab
* @param {Ext.TabPanel} tabPanel
* @param {Ext.TabPanelItem} <b>this</b>
*/</i>
&quot;activate&quot;: true,
<i>/**
* @event beforeclose
* Fires before <b>this</b> tab is closed. To cancal the close, set cancel to true on e. (e.cancel = true)
* @param {Ext.TabPanelItem} <b>this</b>
* @param {Object} e Set cancel to true on <b>this</b> object to cancel the close.
*/</i>
&quot;beforeclose&quot;: true,
<i>/**
* @event close
* Fires when <b>this</b> tab is closed
* @param {Ext.TabPanelItem} <b>this</b>
*/</i>
&quot;close&quot;: true,
<i>/**
* @event deactivate
* Fires when <b>this</b> tab is no longer the active tab
* @param {Ext.TabPanel} tabPanel
* @param {Ext.TabPanelItem} <b>this</b>
*/</i>
&quot;deactivate&quot; : true
});
<b>this</b>.hidden = false;
Ext.TabPanelItem.superclass.constructor.call(<b>this</b>);
};
Ext.extend(Ext.TabPanelItem, Ext.util.Observable, {
purgeListeners : <b>function</b>(){
Ext.util.Observable.prototype.purgeListeners.call(<b>this</b>);
<b>this</b>.el.removeAllListeners();
},
<i>/**
* Show <b>this</b> TabPanelItem - <b>this</b> &lt;b&gt;does not&lt;/b&gt; deactivate the currently active TabPanelItem.
*/</i>
show : <b>function</b>(){
<b>this</b>.pnode.addClass(&quot;on&quot;);
<b>this</b>.showAction();
<b>if</b>(Ext.isOpera){
<b>this</b>.tabPanel.stripWrap.repaint();
}
<b>this</b>.fireEvent(&quot;activate&quot;, <b>this</b>.tabPanel, <b>this</b>);
},
<i>/**
* Returns true <b>if</b> this tab is the active tab
* @<b>return</b> {Boolean}
*/</i>
isActive : <b>function</b>(){
<b>return</b> this.tabPanel.getActiveTab() == <b>this</b>;
},
<i>/**
* Hide <b>this</b> TabPanelItem - <b>if</b> you don't activate another TabPanelItem <b>this</b> could look odd.
*/</i>
hide : <b>function</b>(){
<b>this</b>.pnode.removeClass(&quot;on&quot;);
<b>this</b>.hideAction();
<b>this</b>.fireEvent(&quot;deactivate&quot;, <b>this</b>.tabPanel, <b>this</b>);
},
hideAction : <b>function</b>(){
<b>this</b>.bodyEl.hide();
<b>this</b>.bodyEl.setStyle(&quot;position&quot;, &quot;absolute&quot;);
<b>this</b>.bodyEl.setLeft(&quot;-20000px&quot;);
<b>this</b>.bodyEl.setTop(&quot;-20000px&quot;);
},
showAction : <b>function</b>(){
<b>this</b>.bodyEl.setStyle(&quot;position&quot;, &quot;relative&quot;);
<b>this</b>.bodyEl.setTop(&quot;&quot;);
<b>this</b>.bodyEl.setLeft(&quot;&quot;);
<b>this</b>.bodyEl.show();
},
<i>/**
* Set the tooltip <b>for</b> the tab
* @param {String} tooltip
*/</i>
setTooltip : <b>function</b>(text){
<b>if</b>(Ext.QuickTips &amp;&amp; Ext.QuickTips.isEnabled()){
<b>this</b>.textEl.dom.qtip = text;
<b>this</b>.textEl.dom.removeAttribute('title');
}<b>else</b>{
<b>this</b>.textEl.dom.title = text;
}
},
onTabClick : <b>function</b>(e){
e.preventDefault();
<b>this</b>.tabPanel.activate(<b>this</b>.id);
},
onTabMouseDown : <b>function</b>(e){
e.preventDefault();
<b>this</b>.tabPanel.activate(<b>this</b>.id);
},
getWidth : <b>function</b>(){
<b>return</b> this.inner.getWidth();
},
setWidth : <b>function</b>(width){
<b>var</b> iwidth = width - <b>this</b>.pnode.getPadding(&quot;lr&quot;);
<b>this</b>.inner.setWidth(iwidth);
<b>this</b>.textEl.setWidth(iwidth-<b>this</b>.inner.getPadding(&quot;lr&quot;));
<b>this</b>.pnode.setWidth(width);
},
setHidden : <b>function</b>(hidden){
<b>this</b>.hidden = hidden;
<b>this</b>.pnode.setStyle(&quot;display&quot;, hidden ? &quot;none&quot; : &quot;&quot;);
},
<i>/**
* Returns true <b>if</b> this tab is &quot;hidden&quot;
* @<b>return</b> {Boolean}
*/</i>
isHidden : <b>function</b>(){
<b>return</b> this.hidden;
},
<i>/**
* Returns the text <b>for</b> this tab
* @<b>return</b> {String}
*/</i>
getText : <b>function</b>(){
<b>return</b> this.text;
},
autoSize : <b>function</b>(){
<i>//<b>this</b>.el.beginMeasure();</i>
<b>this</b>.textEl.setWidth(1);
<b>this</b>.setWidth(<b>this</b>.textEl.dom.scrollWidth+<b>this</b>.pnode.getPadding(&quot;lr&quot;)+<b>this</b>.inner.getPadding(&quot;lr&quot;));
<i>//<b>this</b>.el.endMeasure();</i>
},
<i>/**
* Sets the text <b>for</b> the tab (Note: <b>this</b> also sets the tooltip)
* @param {String} text
*/</i>
setText : <b>function</b>(text){
<b>this</b>.text = text;
<b>this</b>.textEl.update(text);
<b>this</b>.setTooltip(text);
<b>if</b>(!<b>this</b>.tabPanel.resizeTabs){
<b>this</b>.autoSize();
}
},
<i>/**
* Activate <b>this</b> TabPanelItem - <b>this</b> &lt;b&gt;does&lt;/b&gt; deactivate the currently active TabPanelItem.
*/</i>
activate : <b>function</b>(){
<b>this</b>.tabPanel.activate(<b>this</b>.id);
},
<i>/**
* Disable <b>this</b> TabPanelItem - <b>this</b> call is ignore <b>if</b> this is the active TabPanelItem.
*/</i>
disable : <b>function</b>(){
<b>if</b>(this.tabPanel.active != <b>this</b>){
<b>this</b>.disabled = true;
<b>this</b>.pnode.addClass(&quot;disabled&quot;);
}
},
<i>/**
* Enable <b>this</b> TabPanelItem <b>if</b> it was previously disabled.
*/</i>
enable : <b>function</b>(){
<b>this</b>.disabled = false;
<b>this</b>.pnode.removeClass(&quot;disabled&quot;);
},
<i>/**
* Set the content <b>for</b> this TabPanelItem.
* @param {String} content The content
* @param {Boolean} loadScripts true to look <b>for</b> and load scripts
*/</i>
setContent : <b>function</b>(content, loadScripts){
<b>this</b>.bodyEl.update(content, loadScripts);
},
<i>/**
* Get the {@link Ext.UpdateManager} <b>for</b> the body of <b>this</b> TabPanelItem. Enables you to perform Ajax updates.
* @<b>return</b> {Ext.UpdateManager} The UpdateManager
*/</i>
getUpdateManager : <b>function</b>(){
<b>return</b> this.bodyEl.getUpdateManager();
},
<i>/**
* Set a URL to be used to load the content <b>for</b> this TabPanelItem.
* @param {String/Function} url The url to load the content from or a <b>function</b> to call to get the url
* @param {String/Object} params (optional) The string params <b>for</b> the update call or an object of the params. See {@link Ext.UpdateManager#update} <b>for</b> more details. (Defaults to null)
* @param {Boolean} loadOnce (optional) Whether to only load the content once. If <b>this</b> is false it makes the Ajax call every time <b>this</b> TabPanelItem is activated. (Defaults to false)
* @<b>return</b> {Ext.UpdateManager} The UpdateManager
*/</i>
setUrl : <b>function</b>(url, params, loadOnce){
<b>if</b>(this.refreshDelegate){
<b>this</b>.un('activate', <b>this</b>.refreshDelegate);
}
<b>this</b>.refreshDelegate = <b>this</b>._handleRefresh.createDelegate(<b>this</b>, [url, params, loadOnce]);
<b>this</b>.on(&quot;activate&quot;, <b>this</b>.refreshDelegate);
<b>return</b> this.bodyEl.getUpdateManager();
},
<i>/** @private */</i>
_handleRefresh : <b>function</b>(url, params, loadOnce){
<b>if</b>(!loadOnce || !<b>this</b>.loaded){
<b>var</b> updater = <b>this</b>.bodyEl.getUpdateManager();
updater.update(url, params, <b>this</b>._setLoaded.createDelegate(<b>this</b>));
}
},
<i>/**
* Force a content refresh from the URL specified <b>in</b> the setUrl() method.
* Will fail silently <b>if</b> the setUrl method has not been called.
* This does not activate the panel, just updates its content.
*/</i>
refresh : <b>function</b>(){
<b>if</b>(this.refreshDelegate){
<b>this</b>.loaded = false;
<b>this</b>.refreshDelegate();
}
},
<i>/** @private */</i>
_setLoaded : <b>function</b>(){
<b>this</b>.loaded = true;
},
<i>/** @private */</i>
closeClick : <b>function</b>(e){
<b>var</b> o = {};
e.stopEvent();
<b>this</b>.fireEvent(&quot;beforeclose&quot;, <b>this</b>, o);
<b>if</b>(o.cancel !== true){
<b>this</b>.tabPanel.removeTab(<b>this</b>.id);
}
},
<i>/**
* The text displayed <b>in</b> the tooltip <b>for</b> the close icon.
* @type String
*/</i>
closeText : &quot;Close <b>this</b> tab&quot;
});
<i>/** @private */</i>
Ext.TabPanel.prototype.createStrip = <b>function</b>(container){
<b>var</b> strip = document.createElement(&quot;div&quot;);
strip.className = &quot;x-tabs-wrap&quot;;
container.appendChild(strip);
<b>return</b> strip;
};
<i>/** @private */</i>
Ext.TabPanel.prototype.createStripList = <b>function</b>(strip){
<i>// div wrapper <b>for</b> retard IE</i>
strip.innerHTML = '&lt;div class=&quot;x-tabs-strip-wrap&quot;&gt;&lt;table class=&quot;x-tabs-strip&quot; cellspacing=&quot;0&quot; cellpadding=&quot;0&quot; border=&quot;0&quot;&gt;&lt;tbody&gt;&lt;tr&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;';
<b>return</b> strip.firstChild.firstChild.firstChild.firstChild;
};
<i>/** @private */</i>
Ext.TabPanel.prototype.createBody = <b>function</b>(container){
<b>var</b> body = document.createElement(&quot;div&quot;);
Ext.id(body, &quot;tab-body&quot;);
Ext.fly(body).addClass(&quot;x-tabs-body&quot;);
container.appendChild(body);
<b>return</b> body;
};
<i>/** @private */</i>
Ext.TabPanel.prototype.createItemBody = <b>function</b>(bodyEl, id){
<b>var</b> body = Ext.getDom(id);
<b>if</b>(!body){
body = document.createElement(&quot;div&quot;);
body.id = id;
}
Ext.fly(body).addClass(&quot;x-tabs-item-body&quot;);
bodyEl.insertBefore(body, bodyEl.firstChild);
<b>return</b> body;
};
<i>/** @private */</i>
Ext.TabPanel.prototype.createStripElements = <b>function</b>(stripEl, text, closable){
<b>var</b> td = document.createElement(&quot;td&quot;);
stripEl.appendChild(td);
<b>if</b>(closable){
td.className = &quot;x-tabs-closable&quot;;
<b>if</b>(!<b>this</b>.closeTpl){
<b>this</b>.closeTpl = <b>new</b> Ext.Template(
'&lt;a href=&quot;#&quot; class=&quot;x-tabs-right&quot;&gt;&lt;span class=&quot;x-tabs-left&quot;&gt;&lt;em class=&quot;x-tabs-inner&quot;&gt;' +
'&lt;span unselectable=&quot;on&quot;' + (<b>this</b>.disableTooltips ? '' : ' title=&quot;{text}&quot;') +' class=&quot;x-tabs-text&quot;&gt;{text}&lt;/span&gt;' +
'&lt;div unselectable=&quot;on&quot; class=&quot;close-icon&quot;&gt;&amp;#160;&lt;/div&gt;&lt;/em&gt;&lt;/span&gt;&lt;/a&gt;'
);
}
<b>var</b> el = <b>this</b>.closeTpl.overwrite(td, {&quot;text&quot;: text});
<b>var</b> close = el.getElementsByTagName(&quot;div&quot;)[0];
<b>var</b> inner = el.getElementsByTagName(&quot;em&quot;)[0];
<b>return</b> {&quot;el&quot;: el, &quot;close&quot;: close, &quot;inner&quot;: inner};
} <b>else</b> {
<b>if</b>(!<b>this</b>.tabTpl){
<b>this</b>.tabTpl = <b>new</b> Ext.Template(
'&lt;a href=&quot;#&quot; class=&quot;x-tabs-right&quot;&gt;&lt;span class=&quot;x-tabs-left&quot;&gt;&lt;em class=&quot;x-tabs-inner&quot;&gt;' +
'&lt;span unselectable=&quot;on&quot;' + (<b>this</b>.disableTooltips ? '' : ' title=&quot;{text}&quot;') +' class=&quot;x-tabs-text&quot;&gt;{text}&lt;/span&gt;&lt;/em&gt;&lt;/span&gt;&lt;/a&gt;'
);
}
<b>var</b> el = <b>this</b>.tabTpl.overwrite(td, {&quot;text&quot;: text});
<b>var</b> inner = el.getElementsByTagName(&quot;em&quot;)[0];
<b>return</b> {&quot;el&quot;: el, &quot;inner&quot;: inner};
}
};</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
</body></html>
Reference in a new issue View git blame Copy permalink