--- /dev/null
+<html>\r
+<head>\r
+ <title>The source code</title>\r
+ <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
+ <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
+</head>\r
+<body onload="prettyPrint();">\r
+ <pre class="prettyprint lang-js"><div id="cls-Ext.TabPanel"></div>/**
+ * @class Ext.TabPanel
+ * <p>A basic tab container. TabPanels can be used exactly like a standard {@link Ext.Panel}
+ * for layout purposes, but also have special support for containing child Components
+ * (<tt>{@link Ext.Container#items items}</tt>) that are managed using a
+ * {@link Ext.layout.CardLayout CardLayout layout manager}, and displayed as separate tabs.</p>
+ *
+ * <b>Note:</b> By default, a tab's close tool <i>destroys</i> the child tab Component
+ * and all its descendants. This makes the child tab Component, and all its descendants <b>unusable</b>. To enable
+ * re-use of a tab, configure the TabPanel with <b><code>{@link #autoDestroy autoDestroy: false}</code></b>.
+ *
+ * <p><b><u>TabPanel header/footer elements</u></b></p>
+ * <p>TabPanels use their {@link Ext.Panel#header header} or {@link Ext.Panel#footer footer} element
+ * (depending on the {@link #tabPosition} configuration) to accommodate the tab selector buttons.
+ * This means that a TabPanel will not display any configured title, and will not display any
+ * configured header {@link Ext.Panel#tools tools}.</p>
+ * <p>To display a header, embed the TabPanel in a {@link Ext.Panel Panel} which uses
+ * <b><tt>{@link Ext.Container#layout layout:'fit'}</tt></b>.</p>
+ *
+ * <p><b><u>Tab Events</u></b></p>
+ * <p>There is no actual tab class — each tab is simply a {@link Ext.BoxComponent Component}
+ * such as a {@link Ext.Panel Panel}. However, when rendered in a TabPanel, each child Component
+ * can fire additional events that only exist for tabs and are not available from other Components.
+ * These events are:</p>
+ * <div><ul class="mdetail-params">
+ * <li><tt><b>{@link Ext.Panel#activate activate}</b></tt> : Fires when this Component becomes
+ * the active tab.</li>
+ * <li><tt><b>{@link Ext.Panel#deactivate deactivate}</b></tt> : Fires when the Component that
+ * was the active tab becomes deactivated.</li>
+ * </ul></div>
+ * <p><b><u>Creating TabPanels from Code</u></b></p>
+ * <p>TabPanels can be created and rendered completely in code, as in this example:</p>
+ * <pre><code>
+var tabs = new Ext.TabPanel({
+ renderTo: Ext.getBody(),
+ activeTab: 0,
+ items: [{
+ title: 'Tab 1',
+ html: 'A simple tab'
+ },{
+ title: 'Tab 2',
+ html: 'Another one'
+ }]
+});
+</code></pre>
+ * <p><b><u>Creating TabPanels from Existing Markup</u></b></p>
+ * <p>TabPanels can also be rendered from pre-existing markup in a couple of ways.</p>
+ * <div><ul class="mdetail-params">
+ *
+ * <li>Pre-Structured Markup</li>
+ * <div class="sub-desc">
+ * <p>A container div with one or more nested tab divs with class <tt>'x-tab'</tt> can be rendered entirely
+ * from existing markup (See the {@link #autoTabs} example).</p>
+ * </div>
+ *
+ * <li>Un-Structured Markup</li>
+ * <div class="sub-desc">
+ * <p>A TabPanel can also be rendered from markup that is not strictly structured by simply specifying by id
+ * which elements should be the container and the tabs. Using this method tab content can be pulled from different
+ * elements within the page by id regardless of page structure. For example:</p>
+ * <pre><code>
+var tabs = new Ext.TabPanel({
+ renderTo: 'my-tabs',
+ activeTab: 0,
+ items:[
+ {contentEl:'tab1', title:'Tab 1'},
+ {contentEl:'tab2', title:'Tab 2'}
+ ]
+});
+
+// Note that the tabs do not have to be nested within the container (although they can be)
+<div id="my-tabs"></div>
+<div id="tab1" class="x-hide-display">A simple tab</div>
+<div id="tab2" class="x-hide-display">Another one</div>
+</code></pre>
+ * Note that the tab divs in this example contain the class <tt>'x-hide-display'</tt> so that they can be rendered
+ * deferred without displaying outside the tabs. You could alternately set <tt>{@link #deferredRender} = false </tt>
+ * to render all content tabs on page load.
+ * </div>
+ *
+ * </ul></div>
+ *
+ * @extends Ext.Panel
+ * @constructor
+ * @param {Object} config The configuration options
+ * @xtype tabpanel
+ */
+Ext.TabPanel = Ext.extend(Ext.Panel, {
+ <div id="cfg-Ext.TabPanel-layoutOnTabChange"></div>/**
+ * @cfg {Boolean} layoutOnTabChange
+ * Set to true to force a layout of the active tab when the tab is changed. Defaults to false.
+ * See {@link Ext.layout.CardLayout}.<code>{@link Ext.layout.CardLayout#layoutOnCardChange layoutOnCardChange}</code>.
+ */
+ <div id="cfg-Ext.TabPanel-tabCls"></div>/**
+ * @cfg {String} tabCls <b>This config option is used on <u>child Components</u> of ths TabPanel.</b> A CSS
+ * class name applied to the tab strip item representing the child Component, allowing special
+ * styling to be applied.
+ */
+ <div id="cfg-Ext.TabPanel-monitorResize"></div>/**
+ * @cfg {Boolean} monitorResize True to automatically monitor window resize events and rerender the layout on
+ * browser resize (defaults to true).
+ */
+ monitorResize : true,
+ <div id="cfg-Ext.TabPanel-deferredRender"></div>/**
+ * @cfg {Boolean} deferredRender
+ * <p><tt>true</tt> by default to defer the rendering of child <tt>{@link Ext.Container#items items}</tt>
+ * to the browsers DOM until a tab is activated. <tt>false</tt> will render all contained
+ * <tt>{@link Ext.Container#items items}</tt> as soon as the {@link Ext.layout.CardLayout layout}
+ * is rendered. If there is a significant amount of content or a lot of heavy controls being
+ * rendered into panels that are not displayed by default, setting this to <tt>true</tt> might
+ * improve performance.</p>
+ * <br><p>The <tt>deferredRender</tt> property is internally passed to the layout manager for
+ * TabPanels ({@link Ext.layout.CardLayout}) as its {@link Ext.layout.CardLayout#deferredRender}
+ * configuration value.</p>
+ * <br><p><b>Note</b>: leaving <tt>deferredRender</tt> as <tt>true</tt> means that the content
+ * within an unactivated tab will not be available. For example, this means that if the TabPanel
+ * is within a {@link Ext.form.FormPanel form}, then until a tab is activated, any Fields within
+ * unactivated tabs will not be rendered, and will therefore not be submitted and will not be
+ * available to either {@link Ext.form.BasicForm#getValues getValues} or
+ * {@link Ext.form.BasicForm#setValues setValues}.</p>
+ */
+ deferredRender : true,
+ <div id="cfg-Ext.TabPanel-tabWidth"></div>/**
+ * @cfg {Number} tabWidth The initial width in pixels of each new tab (defaults to 120).
+ */
+ tabWidth : 120,
+ <div id="cfg-Ext.TabPanel-minTabWidth"></div>/**
+ * @cfg {Number} minTabWidth The minimum width in pixels for each tab when {@link #resizeTabs} = true (defaults to 30).
+ */
+ minTabWidth : 30,
+ <div id="cfg-Ext.TabPanel-resizeTabs"></div>/**
+ * @cfg {Boolean} resizeTabs True to automatically resize each tab so that the tabs will completely fill the
+ * tab strip (defaults to false). Setting this to true may cause specific widths that might be set per tab to
+ * be overridden in order to fit them all into view (although {@link #minTabWidth} will always be honored).
+ */
+ resizeTabs : false,
+ <div id="cfg-Ext.TabPanel-enableTabScroll"></div>/**
+ * @cfg {Boolean} enableTabScroll True to enable scrolling to tabs that may be invisible due to overflowing the
+ * overall TabPanel width. Only available with tabPosition:'top' (defaults to false).
+ */
+ enableTabScroll : false,
+ <div id="cfg-Ext.TabPanel-scrollIncrement"></div>/**
+ * @cfg {Number} scrollIncrement The number of pixels to scroll each time a tab scroll button is pressed
+ * (defaults to <tt>100</tt>, or if <tt>{@link #resizeTabs} = true</tt>, the calculated tab width). Only
+ * applies when <tt>{@link #enableTabScroll} = true</tt>.
+ */
+ scrollIncrement : 0,
+ <div id="cfg-Ext.TabPanel-scrollRepeatInterval"></div>/**
+ * @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a tab scroll button is
+ * continuously pressed (defaults to <tt>400</tt>).
+ */
+ scrollRepeatInterval : 400,
+ <div id="cfg-Ext.TabPanel-scrollDuration"></div>/**
+ * @cfg {Float} scrollDuration The number of milliseconds that each scroll animation should last (defaults
+ * to <tt>.35</tt>). Only applies when <tt>{@link #animScroll} = true</tt>.
+ */
+ scrollDuration : 0.35,
+ <div id="cfg-Ext.TabPanel-animScroll"></div>/**
+ * @cfg {Boolean} animScroll True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults
+ * to <tt>true</tt>). Only applies when <tt>{@link #enableTabScroll} = true</tt>.
+ */
+ animScroll : true,
+ <div id="cfg-Ext.TabPanel-tabPosition"></div>/**
+ * @cfg {String} tabPosition The position where the tab strip should be rendered (defaults to <tt>'top'</tt>).
+ * The only other supported value is <tt>'bottom'</tt>. <b>Note</b>: tab scrolling is only supported for
+ * <tt>tabPosition: 'top'</tt>.
+ */
+ tabPosition : 'top',
+ <div id="cfg-Ext.TabPanel-baseCls"></div>/**
+ * @cfg {String} baseCls The base CSS class applied to the panel (defaults to <tt>'x-tab-panel'</tt>).
+ */
+ baseCls : 'x-tab-panel',
+ <div id="cfg-Ext.TabPanel-autoTabs"></div>/**
+ * @cfg {Boolean} autoTabs
+ * <p><tt>true</tt> to query the DOM for any divs with a class of 'x-tab' to be automatically converted
+ * to tabs and added to this panel (defaults to <tt>false</tt>). Note that the query will be executed within
+ * the scope of the container element only (so that multiple tab panels from markup can be supported via this
+ * method).</p>
+ * <p>This method is only possible when the markup is structured correctly as a container with nested divs
+ * containing the class <tt>'x-tab'</tt>. To create TabPanels without these limitations, or to pull tab content
+ * from other elements on the page, see the example at the top of the class for generating tabs from markup.</p>
+ * <p>There are a couple of things to note when using this method:<ul>
+ * <li>When using the <tt>autoTabs</tt> config (as opposed to passing individual tab configs in the TabPanel's
+ * {@link #items} collection), you must use <tt>{@link #applyTo}</tt> to correctly use the specified <tt>id</tt>
+ * as the tab container. The <tt>autoTabs</tt> method <em>replaces</em> existing content with the TabPanel
+ * components.</li>
+ * <li>Make sure that you set <tt>{@link #deferredRender}: false</tt> so that the content elements for each
+ * tab will be rendered into the TabPanel immediately upon page load, otherwise they will not be transformed
+ * until each tab is activated and will be visible outside the TabPanel.</li>
+ * </ul>Example usage:</p>
+ * <pre><code>
+var tabs = new Ext.TabPanel({
+ applyTo: 'my-tabs',
+ activeTab: 0,
+ deferredRender: false,
+ autoTabs: true
+});
+
+// This markup will be converted to a TabPanel from the code above
+<div id="my-tabs">
+ <div class="x-tab" title="Tab 1">A simple tab</div>
+ <div class="x-tab" title="Tab 2">Another one</div>
+</div>
+</code></pre>
+ */
+ autoTabs : false,
+ <div id="cfg-Ext.TabPanel-autoTabSelector"></div>/**
+ * @cfg {String} autoTabSelector The CSS selector used to search for tabs in existing markup when
+ * <tt>{@link #autoTabs} = true</tt> (defaults to <tt>'div.x-tab'</tt>). This can be any valid selector
+ * supported by {@link Ext.DomQuery#select}. Note that the query will be executed within the scope of this
+ * tab panel only (so that multiple tab panels from markup can be supported on a page).
+ */
+ autoTabSelector : 'div.x-tab',
+ <div id="cfg-Ext.TabPanel-activeTab"></div>/**
+ * @cfg {String/Number} activeTab A string id or the numeric index of the tab that should be initially
+ * activated on render (defaults to none).
+ */
+ activeTab : null,
+ <div id="cfg-Ext.TabPanel-tabMargin"></div>/**
+ * @cfg {Number} tabMargin The number of pixels of space to calculate into the sizing and scrolling of
+ * tabs. If you change the margin in CSS, you will need to update this value so calculations are correct
+ * with either <tt>{@link #resizeTabs}</tt> or scrolling tabs. (defaults to <tt>2</tt>)
+ */
+ tabMargin : 2,
+ <div id="cfg-Ext.TabPanel-plain"></div>/**
+ * @cfg {Boolean} plain </tt>true</tt> to render the tab strip without a background container image
+ * (defaults to <tt>false</tt>).
+ */
+ plain : false,
+ <div id="cfg-Ext.TabPanel-wheelIncrement"></div>/**
+ * @cfg {Number} wheelIncrement For scrolling tabs, the number of pixels to increment on mouse wheel
+ * scrolling (defaults to <tt>20</tt>).
+ */
+ wheelIncrement : 20,
+
+ /*
+ * This is a protected property used when concatenating tab ids to the TabPanel id for internal uniqueness.
+ * It does not generally need to be changed, but can be if external code also uses an id scheme that can
+ * potentially clash with this one.
+ */
+ idDelimiter : '__',
+
+ // private
+ itemCls : 'x-tab-item',
+
+ // private config overrides
+ elements : 'body',
+ headerAsText : false,
+ frame : false,
+ hideBorders :true,
+
+ // private
+ initComponent : function(){
+ this.frame = false;
+ Ext.TabPanel.superclass.initComponent.call(this);
+ this.addEvents(
+ <div id="event-Ext.TabPanel-beforetabchange"></div>/**
+ * @event beforetabchange
+ * Fires before the active tab changes. Handlers can <tt>return false</tt> to cancel the tab change.
+ * @param {TabPanel} this
+ * @param {Panel} newTab The tab being activated
+ * @param {Panel} currentTab The current active tab
+ */
+ 'beforetabchange',
+ <div id="event-Ext.TabPanel-tabchange"></div>/**
+ * @event tabchange
+ * Fires after the active tab has changed.
+ * @param {TabPanel} this
+ * @param {Panel} tab The new active tab
+ */
+ 'tabchange',
+ <div id="event-Ext.TabPanel-contextmenu"></div>/**
+ * @event contextmenu
+ * Relays the contextmenu event from a tab selector element in the tab strip.
+ * @param {TabPanel} this
+ * @param {Panel} tab The target tab
+ * @param {EventObject} e
+ */
+ 'contextmenu'
+ );
+ <div id="cfg-Ext.TabPanel-layoutConfig"></div>/**
+ * @cfg {Object} layoutConfig
+ * TabPanel implicitly uses {@link Ext.layout.CardLayout} as its layout manager.
+ * <code>layoutConfig</code> may be used to configure this layout manager.
+ * <code>{@link #deferredRender}</code> and <code>{@link #layoutOnTabChange}</code>
+ * configured on the TabPanel will be applied as configs to the layout manager.
+ */
+ this.setLayout(new Ext.layout.CardLayout(Ext.apply({
+ layoutOnCardChange: this.layoutOnTabChange,
+ deferredRender: this.deferredRender
+ }, this.layoutConfig)));
+
+ if(this.tabPosition == 'top'){
+ this.elements += ',header';
+ this.stripTarget = 'header';
+ }else {
+ this.elements += ',footer';
+ this.stripTarget = 'footer';
+ }
+ if(!this.stack){
+ this.stack = Ext.TabPanel.AccessStack();
+ }
+ this.initItems();
+ },
+
+ // private
+ onRender : function(ct, position){
+ Ext.TabPanel.superclass.onRender.call(this, ct, position);
+
+ if(this.plain){
+ var pos = this.tabPosition == 'top' ? 'header' : 'footer';
+ this[pos].addClass('x-tab-panel-'+pos+'-plain');
+ }
+
+ var st = this[this.stripTarget];
+
+ this.stripWrap = st.createChild({cls:'x-tab-strip-wrap', cn:{
+ tag:'ul', cls:'x-tab-strip x-tab-strip-'+this.tabPosition}});
+
+ var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
+ this.stripSpacer = st.createChild({cls:'x-tab-strip-spacer'}, beforeEl);
+ this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
+
+ this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge'});
+ this.strip.createChild({cls:'x-clear'});
+
+ this.body.addClass('x-tab-panel-body-'+this.tabPosition);
+
+ <div id="cfg-Ext.TabPanel-itemTpl"></div>/**
+ * @cfg {Template/XTemplate} itemTpl <p>(Optional) A {@link Ext.Template Template} or
+ * {@link Ext.XTemplate XTemplate} which may be provided to process the data object returned from
+ * <tt>{@link #getTemplateArgs}</tt> to produce a clickable selector element in the tab strip.</p>
+ * <p>The main element created should be a <tt><li></tt> element. In order for a click event on
+ * a selector element to be connected to its item, it must take its <i>id</i> from the TabPanel's
+ * native <tt>{@link #getTemplateArgs}</tt>.</p>
+ * <p>The child element which contains the title text must be marked by the CSS class
+ * <tt>x-tab-strip-inner</tt>.</p>
+ * <p>To enable closability, the created element should contain an element marked by the CSS class
+ * <tt>x-tab-strip-close</tt>.</p>
+ * <p>If a custom <tt>itemTpl</tt> is supplied, it is the developer's responsibility to create CSS
+ * style rules to create the desired appearance.</p>
+ * Below is an example of how to create customized tab selector items:<pre><code>
+new Ext.TabPanel({
+ renderTo: document.body,
+ minTabWidth: 115,
+ tabWidth: 135,
+ enableTabScroll: true,
+ width: 600,
+ height: 250,
+ defaults: {autoScroll:true},
+ itemTpl: new Ext.XTemplate(
+ '<li class="{cls}" id="{id}" style="overflow:hidden">',
+ '<tpl if="closable">',
+ '<a class="x-tab-strip-close" onclick="return false;"></a>',
+ '</tpl>',
+ '<a class="x-tab-right" href="#" onclick="return false;" style="padding-left:6px">',
+ '<em class="x-tab-left">',
+ '<span class="x-tab-strip-inner">',
+ '<img src="{src}" style="float:left;margin:3px 3px 0 0">',
+ '<span style="margin-left:20px" class="x-tab-strip-text {iconCls}">{text} {extra}</span>',
+ '</span>',
+ '</em>',
+ '</a>',
+ '</li>'
+ ),
+ getTemplateArgs: function(item) {
+// Call the native method to collect the base data. Like the ID!
+ var result = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
+
+// Add stuff used in our template
+ return Ext.apply(result, {
+ closable: item.closable,
+ src: item.iconSrc,
+ extra: item.extraText || ''
+ });
+ },
+ items: [{
+ title: 'New Tab 1',
+ iconSrc: '../shared/icons/fam/grid.png',
+ html: 'Tab Body 1',
+ closable: true
+ }, {
+ title: 'New Tab 2',
+ iconSrc: '../shared/icons/fam/grid.png',
+ html: 'Tab Body 2',
+ extraText: 'Extra stuff in the tab button'
+ }]
+});
+</code></pre>
+ */
+ if(!this.itemTpl){
+ var tt = new Ext.Template(
+ '<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;"></a>',
+ '<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">',
+ '<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
+ '</em></a></li>'
+ );
+ tt.disableFormats = true;
+ tt.compile();
+ Ext.TabPanel.prototype.itemTpl = tt;
+ }
+
+ this.items.each(this.initTab, this);
+ },
+
+ // private
+ afterRender : function(){
+ Ext.TabPanel.superclass.afterRender.call(this);
+ if(this.autoTabs){
+ this.readTabs(false);
+ }
+ if(this.activeTab !== undefined){
+ var item = Ext.isObject(this.activeTab) ? this.activeTab : this.items.get(this.activeTab);
+ delete this.activeTab;
+ this.setActiveTab(item);
+ }
+ },
+
+ // private
+ initEvents : function(){
+ Ext.TabPanel.superclass.initEvents.call(this);
+ this.on('add', this.onAdd, this, {target: this});
+ this.on('remove', this.onRemove, this, {target: this});
+
+ this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
+ this.mon(this.strip, 'contextmenu', this.onStripContextMenu, this);
+ if(this.enableTabScroll){
+ this.mon(this.strip, 'mousewheel', this.onWheel, this);
+ }
+ },
+
+ // private
+ findTargets : function(e){
+ var item = null;
+ var itemEl = e.getTarget('li', this.strip);
+ if(itemEl){
+ item = this.getComponent(itemEl.id.split(this.idDelimiter)[1]);
+ if(item.disabled){
+ return {
+ close : null,
+ item : null,
+ el : null
+ };
+ }
+ }
+ return {
+ close : e.getTarget('.x-tab-strip-close', this.strip),
+ item : item,
+ el : itemEl
+ };
+ },
+
+ // private
+ onStripMouseDown : function(e){
+ if(e.button !== 0){
+ return;
+ }
+ e.preventDefault();
+ var t = this.findTargets(e);
+ if(t.close){
+ if (t.item.fireEvent('beforeclose', t.item) !== false) {
+ t.item.fireEvent('close', t.item);
+ this.remove(t.item);
+ }
+ return;
+ }
+ if(t.item && t.item != this.activeTab){
+ this.setActiveTab(t.item);
+ }
+ },
+
+ // private
+ onStripContextMenu : function(e){
+ e.preventDefault();
+ var t = this.findTargets(e);
+ if(t.item){
+ this.fireEvent('contextmenu', this, t.item, e);
+ }
+ },
+
+ <div id="method-Ext.TabPanel-readTabs"></div>/**
+ * True to scan the markup in this tab panel for <tt>{@link #autoTabs}</tt> using the
+ * <tt>{@link #autoTabSelector}</tt>
+ * @param {Boolean} removeExisting True to remove existing tabs
+ */
+ readTabs : function(removeExisting){
+ if(removeExisting === true){
+ this.items.each(function(item){
+ this.remove(item);
+ }, this);
+ }
+ var tabs = this.el.query(this.autoTabSelector);
+ for(var i = 0, len = tabs.length; i < len; i++){
+ var tab = tabs[i];
+ var title = tab.getAttribute('title');
+ tab.removeAttribute('title');
+ this.add({
+ title: title,
+ contentEl: tab
+ });
+ }
+ },
+
+ // private
+ initTab : function(item, index){
+ var before = this.strip.dom.childNodes[index];
+ var p = this.getTemplateArgs(item);
+ var el = before ?
+ this.itemTpl.insertBefore(before, p) :
+ this.itemTpl.append(this.strip, p);
+
+ Ext.fly(el).addClassOnOver('x-tab-strip-over');
+
+ if(item.tabTip){
+ Ext.fly(el).child('span.x-tab-strip-text', true).qtip = item.tabTip;
+ }
+ item.tabEl = el;
+
+ item.on('disable', this.onItemDisabled, this);
+ item.on('enable', this.onItemEnabled, this);
+ item.on('titlechange', this.onItemTitleChanged, this);
+ item.on('iconchange', this.onItemIconChanged, this);
+ item.on('beforeshow', this.onBeforeShowItem, this);
+ },
+
+ <div id="method-Ext.TabPanel-getTemplateArgs"></div>/**
+ * <p>Provides template arguments for rendering a tab selector item in the tab strip.</p>
+ * <p>This method returns an object hash containing properties used by the TabPanel's <tt>{@link #itemTpl}</tt>
+ * to create a formatted, clickable tab selector element. The properties which must be returned
+ * are:</p><div class="mdetail-params"><ul>
+ * <li><b>id</b> : String<div class="sub-desc">A unique identifier which links to the item</div></li>
+ * <li><b>text</b> : String<div class="sub-desc">The text to display</div></li>
+ * <li><b>cls</b> : String<div class="sub-desc">The CSS class name</div></li>
+ * <li><b>iconCls</b> : String<div class="sub-desc">A CSS class to provide appearance for an icon.</div></li>
+ * </ul></div>
+ * @param {BoxComponent} item The {@link Ext.BoxComponent BoxComponent} for which to create a selector element in the tab strip.
+ * @return {Object} An object hash containing the properties required to render the selector element.
+ */
+ getTemplateArgs : function(item) {
+ var cls = item.closable ? 'x-tab-strip-closable' : '';
+ if(item.disabled){
+ cls += ' x-item-disabled';
+ }
+ if(item.iconCls){
+ cls += ' x-tab-with-icon';
+ }
+ if(item.tabCls){
+ cls += ' ' + item.tabCls;
+ }
+
+ return {
+ id: this.id + this.idDelimiter + item.getItemId(),
+ text: item.title,
+ cls: cls,
+ iconCls: item.iconCls || ''
+ };
+ },
+
+ // private
+ onAdd : function(tp, item, index){
+ this.initTab(item, index);
+ if(this.items.getCount() == 1){
+ this.syncSize();
+ }
+ this.delegateUpdates();
+ },
+
+ // private
+ onBeforeAdd : function(item){
+ var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
+ if(existing){
+ this.setActiveTab(item);
+ return false;
+ }
+ Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
+ var es = item.elements;
+ item.elements = es ? es.replace(',header', '') : es;
+ item.border = (item.border === true);
+ },
+
+ // private
+ onRemove : function(tp, item){
+ Ext.destroy(Ext.get(this.getTabEl(item)));
+ this.stack.remove(item);
+ item.un('disable', this.onItemDisabled, this);
+ item.un('enable', this.onItemEnabled, this);
+ item.un('titlechange', this.onItemTitleChanged, this);
+ item.un('iconchange', this.onItemIconChanged, this);
+ item.un('beforeshow', this.onBeforeShowItem, this);
+ if(item == this.activeTab){
+ var next = this.stack.next();
+ if(next){
+ this.setActiveTab(next);
+ }else if(this.items.getCount() > 0){
+ this.setActiveTab(0);
+ }else{
+ this.activeTab = null;
+ }
+ }
+ this.delegateUpdates();
+ },
+
+ // private
+ onBeforeShowItem : function(item){
+ if(item != this.activeTab){
+ this.setActiveTab(item);
+ return false;
+ }
+ },
+
+ // private
+ onItemDisabled : function(item){
+ var el = this.getTabEl(item);
+ if(el){
+ Ext.fly(el).addClass('x-item-disabled');
+ }
+ this.stack.remove(item);
+ },
+
+ // private
+ onItemEnabled : function(item){
+ var el = this.getTabEl(item);
+ if(el){
+ Ext.fly(el).removeClass('x-item-disabled');
+ }
+ },
+
+ // private
+ onItemTitleChanged : function(item){
+ var el = this.getTabEl(item);
+ if(el){
+ Ext.fly(el).child('span.x-tab-strip-text', true).innerHTML = item.title;
+ }
+ },
+
+ //private
+ onItemIconChanged : function(item, iconCls, oldCls){
+ var el = this.getTabEl(item);
+ if(el){
+ Ext.fly(el).child('span.x-tab-strip-text').replaceClass(oldCls, iconCls);
+ }
+ },
+
+ <div id="method-Ext.TabPanel-getTabEl"></div>/**
+ * Gets the DOM element for the tab strip item which activates the child panel with the specified
+ * ID. Access this to change the visual treatment of the item, for example by changing the CSS class name.
+ * @param {Panel/Number/String} tab The tab component, or the tab's index, or the tabs id or itemId.
+ * @return {HTMLElement} The DOM node
+ */
+ getTabEl : function(item){
+ return document.getElementById(this.id + this.idDelimiter + this.getComponent(item).getItemId());
+ },
+
+ // private
+ onResize : function(){
+ Ext.TabPanel.superclass.onResize.apply(this, arguments);
+ this.delegateUpdates();
+ },
+
+ <div id="method-Ext.TabPanel-beginUpdate"></div>/**
+ * Suspends any internal calculations or scrolling while doing a bulk operation. See {@link #endUpdate}
+ */
+ beginUpdate : function(){
+ this.suspendUpdates = true;
+ },
+
+ <div id="method-Ext.TabPanel-endUpdate"></div>/**
+ * Resumes calculations and scrolling at the end of a bulk operation. See {@link #beginUpdate}
+ */
+ endUpdate : function(){
+ this.suspendUpdates = false;
+ this.delegateUpdates();
+ },
+
+ <div id="method-Ext.TabPanel-hideTabStripItem"></div>/**
+ * Hides the tab strip item for the passed tab
+ * @param {Number/String/Panel} item The tab index, id or item
+ */
+ hideTabStripItem : function(item){
+ item = this.getComponent(item);
+ var el = this.getTabEl(item);
+ if(el){
+ el.style.display = 'none';
+ this.delegateUpdates();
+ }
+ this.stack.remove(item);
+ },
+
+ <div id="method-Ext.TabPanel-unhideTabStripItem"></div>/**
+ * Unhides the tab strip item for the passed tab
+ * @param {Number/String/Panel} item The tab index, id or item
+ */
+ unhideTabStripItem : function(item){
+ item = this.getComponent(item);
+ var el = this.getTabEl(item);
+ if(el){
+ el.style.display = '';
+ this.delegateUpdates();
+ }
+ },
+
+ // private
+ delegateUpdates : function(){
+ if(this.suspendUpdates){
+ return;
+ }
+ if(this.resizeTabs && this.rendered){
+ this.autoSizeTabs();
+ }
+ if(this.enableTabScroll && this.rendered){
+ this.autoScrollTabs();
+ }
+ },
+
+ // private
+ autoSizeTabs : function(){
+ var count = this.items.length;
+ var ce = this.tabPosition != 'bottom' ? 'header' : 'footer';
+ var ow = this[ce].dom.offsetWidth;
+ var aw = this[ce].dom.clientWidth;
+
+ if(!this.resizeTabs || count < 1 || !aw){ // !aw for display:none
+ return;
+ }
+
+ var each = Math.max(Math.min(Math.floor((aw-4) / count) - this.tabMargin, this.tabWidth), this.minTabWidth); // -4 for float errors in IE
+ this.lastTabWidth = each;
+ var lis = this.strip.query("li:not([className^=x-tab-edge])");
+ for(var i = 0, len = lis.length; i < len; i++) {
+ var li = lis[i];
+ var inner = Ext.fly(li).child('.x-tab-strip-inner', true);
+ var tw = li.offsetWidth;
+ var iw = inner.offsetWidth;
+ inner.style.width = (each - (tw-iw)) + 'px';
+ }
+ },
+
+ // private
+ adjustBodyWidth : function(w){
+ if(this.header){
+ this.header.setWidth(w);
+ }
+ if(this.footer){
+ this.footer.setWidth(w);
+ }
+ return w;
+ },
+
+ <div id="method-Ext.TabPanel-setActiveTab"></div>/**
+ * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
+ * can <tt>return false</tt> to cancel the tab change.
+ * @param {String/Number} item
+ * The id or tab Panel to activate. This parameter may be any of the following:
+ * <div><ul class="mdetail-params">
+ * <li>a <b><tt>String</tt></b> : representing the <code>{@link Ext.Component#itemId itemId}</code>
+ * or <code>{@link Ext.Component#id id}</code> of the child component </li>
+ * <li>a <b><tt>Number</tt></b> : representing the position of the child component
+ * within the <code>{@link Ext.Container#items items}</code> <b>property</b></li>
+ * </ul></div>
+ * <p>For additional information see {@link Ext.util.MixedCollection#get}.
+ */
+ setActiveTab : function(item){
+ item = this.getComponent(item);
+ if(!item || this.fireEvent('beforetabchange', this, item, this.activeTab) === false){
+ return;
+ }
+ if(!this.rendered){
+ this.activeTab = item;
+ return;
+ }
+ if(this.activeTab != item){
+ if(this.activeTab){
+ var oldEl = this.getTabEl(this.activeTab);
+ if(oldEl){
+ Ext.fly(oldEl).removeClass('x-tab-strip-active');
+ }
+ this.activeTab.fireEvent('deactivate', this.activeTab);
+ }
+ var el = this.getTabEl(item);
+ Ext.fly(el).addClass('x-tab-strip-active');
+ this.activeTab = item;
+ this.stack.add(item);
+
+ this.layout.setActiveItem(item);
+ if(this.scrolling){
+ this.scrollToTab(item, this.animScroll);
+ }
+
+ item.fireEvent('activate', item);
+ this.fireEvent('tabchange', this, item);
+ }
+ },
+
+ <div id="method-Ext.TabPanel-getActiveTab"></div>/**
+ * Gets the currently active tab.
+ * @return {Panel} The active tab
+ */
+ getActiveTab : function(){
+ return this.activeTab || null;
+ },
+
+ <div id="method-Ext.TabPanel-getItem"></div>/**
+ * Gets the specified tab by id.
+ * @param {String} id The tab id
+ * @return {Panel} The tab
+ */
+ getItem : function(item){
+ return this.getComponent(item);
+ },
+
+ // private
+ autoScrollTabs : function(){
+ this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
+ var count = this.items.length;
+ var ow = this.pos.dom.offsetWidth;
+ var tw = this.pos.dom.clientWidth;
+
+ var wrap = this.stripWrap;
+ var wd = wrap.dom;
+ var cw = wd.offsetWidth;
+ var pos = this.getScrollPos();
+ var l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;
+
+ if(!this.enableTabScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
+ return;
+ }
+ if(l <= tw){
+ wd.scrollLeft = 0;
+ wrap.setWidth(tw);
+ if(this.scrolling){
+ this.scrolling = false;
+ this.pos.removeClass('x-tab-scrolling');
+ this.scrollLeft.hide();
+ this.scrollRight.hide();
+ // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
+ if(Ext.isAir || Ext.isWebKit){
+ wd.style.marginLeft = '';
+ wd.style.marginRight = '';
+ }
+ }
+ }else{
+ if(!this.scrolling){
+ this.pos.addClass('x-tab-scrolling');
+ // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
+ if(Ext.isAir || Ext.isWebKit){
+ wd.style.marginLeft = '18px';
+ wd.style.marginRight = '18px';
+ }
+ }
+ tw -= wrap.getMargins('lr');
+ wrap.setWidth(tw > 20 ? tw : 20);
+ if(!this.scrolling){
+ if(!this.scrollLeft){
+ this.createScrollers();
+ }else{
+ this.scrollLeft.show();
+ this.scrollRight.show();
+ }
+ }
+ this.scrolling = true;
+ if(pos > (l-tw)){ // ensure it stays within bounds
+ wd.scrollLeft = l-tw;
+ }else{ // otherwise, make sure the active tab is still visible
+ this.scrollToTab(this.activeTab, false);
+ }
+ this.updateScrollButtons();
+ }
+ },
+
+ // private
+ createScrollers : function(){
+ this.pos.addClass('x-tab-scrolling-' + this.tabPosition);
+ var h = this.stripWrap.dom.offsetHeight;
+
+ // left
+ var sl = this.pos.insertFirst({
+ cls:'x-tab-scroller-left'
+ });
+ sl.setHeight(h);
+ sl.addClassOnOver('x-tab-scroller-left-over');
+ this.leftRepeater = new Ext.util.ClickRepeater(sl, {
+ interval : this.scrollRepeatInterval,
+ handler: this.onScrollLeft,
+ scope: this
+ });
+ this.scrollLeft = sl;
+
+ // right
+ var sr = this.pos.insertFirst({
+ cls:'x-tab-scroller-right'
+ });
+ sr.setHeight(h);
+ sr.addClassOnOver('x-tab-scroller-right-over');
+ this.rightRepeater = new Ext.util.ClickRepeater(sr, {
+ interval : this.scrollRepeatInterval,
+ handler: this.onScrollRight,
+ scope: this
+ });
+ this.scrollRight = sr;
+ },
+
+ // private
+ getScrollWidth : function(){
+ return this.edge.getOffsetsTo(this.stripWrap)[0] + this.getScrollPos();
+ },
+
+ // private
+ getScrollPos : function(){
+ return parseInt(this.stripWrap.dom.scrollLeft, 10) || 0;
+ },
+
+ // private
+ getScrollArea : function(){
+ return parseInt(this.stripWrap.dom.clientWidth, 10) || 0;
+ },
+
+ // private
+ getScrollAnim : function(){
+ return {duration:this.scrollDuration, callback: this.updateScrollButtons, scope: this};
+ },
+
+ // private
+ getScrollIncrement : function(){
+ return this.scrollIncrement || (this.resizeTabs ? this.lastTabWidth+2 : 100);
+ },
+
+ <div id="method-Ext.TabPanel-scrollToTab"></div>/**
+ * Scrolls to a particular tab if tab scrolling is enabled
+ * @param {Panel} item The item to scroll to
+ * @param {Boolean} animate True to enable animations
+ */
+
+ scrollToTab : function(item, animate){
+ if(!item){ return; }
+ var el = this.getTabEl(item);
+ var pos = this.getScrollPos(), area = this.getScrollArea();
+ var left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos;
+ var right = left + el.offsetWidth;
+ if(left < pos){
+ this.scrollTo(left, animate);
+ }else if(right > (pos + area)){
+ this.scrollTo(right - area, animate);
+ }
+ },
+
+ // private
+ scrollTo : function(pos, animate){
+ this.stripWrap.scrollTo('left', pos, animate ? this.getScrollAnim() : false);
+ if(!animate){
+ this.updateScrollButtons();
+ }
+ },
+
+ onWheel : function(e){
+ var d = e.getWheelDelta()*this.wheelIncrement*-1;
+ e.stopEvent();
+
+ var pos = this.getScrollPos();
+ var newpos = pos + d;
+ var sw = this.getScrollWidth()-this.getScrollArea();
+
+ var s = Math.max(0, Math.min(sw, newpos));
+ if(s != pos){
+ this.scrollTo(s, false);
+ }
+ },
+
+ // private
+ onScrollRight : function(){
+ var sw = this.getScrollWidth()-this.getScrollArea();
+ var pos = this.getScrollPos();
+ var s = Math.min(sw, pos + this.getScrollIncrement());
+ if(s != pos){
+ this.scrollTo(s, this.animScroll);
+ }
+ },
+
+ // private
+ onScrollLeft : function(){
+ var pos = this.getScrollPos();
+ var s = Math.max(0, pos - this.getScrollIncrement());
+ if(s != pos){
+ this.scrollTo(s, this.animScroll);
+ }
+ },
+
+ // private
+ updateScrollButtons : function(){
+ var pos = this.getScrollPos();
+ this.scrollLeft[pos === 0 ? 'addClass' : 'removeClass']('x-tab-scroller-left-disabled');
+ this.scrollRight[pos >= (this.getScrollWidth()-this.getScrollArea()) ? 'addClass' : 'removeClass']('x-tab-scroller-right-disabled');
+ },
+
+ // private
+ beforeDestroy : function() {
+ if(this.items){
+ this.items.each(function(item){
+ if(item && item.tabEl){
+ Ext.get(item.tabEl).removeAllListeners();
+ item.tabEl = null;
+ }
+ }, this);
+ }
+ if(this.strip){
+ this.strip.removeAllListeners();
+ }
+ Ext.TabPanel.superclass.beforeDestroy.apply(this);
+ }
+
+ <div id="cfg-Ext.TabPanel-collapsible"></div>/**
+ * @cfg {Boolean} collapsible
+ * @hide
+ */
+ <div id="cfg-Ext.TabPanel-header"></div>/**
+ * @cfg {String} header
+ * @hide
+ */
+ <div id="cfg-Ext.TabPanel-headerAsText"></div>/**
+ * @cfg {Boolean} headerAsText
+ * @hide
+ */
+ <div id="prop-Ext.TabPanel-header"></div>/**
+ * @property header
+ * @hide
+ */
+ <div id="prop-Ext.TabPanel-title"></div>/**
+ * @property title
+ * @hide
+ */
+ <div id="cfg-Ext.TabPanel-tools"></div>/**
+ * @cfg {Array} tools
+ * @hide
+ */
+ <div id="cfg-Ext.TabPanel-toolTemplate"></div>/**
+ * @cfg {Array} toolTemplate
+ * @hide
+ */
+ <div id="cfg-Ext.TabPanel-hideCollapseTool"></div>/**
+ * @cfg {Boolean} hideCollapseTool
+ * @hide
+ */
+ <div id="cfg-Ext.TabPanel-titleCollapse"></div>/**
+ * @cfg {Boolean} titleCollapse
+ * @hide
+ */
+ <div id="cfg-Ext.TabPanel-collapsed"></div>/**
+ * @cfg {Boolean} collapsed
+ * @hide
+ */
+ <div id="cfg-Ext.TabPanel-layout"></div>/**
+ * @cfg {String} layout
+ * @hide
+ */
+ <div id="cfg-Ext.TabPanel-preventBodyReset"></div>/**
+ * @cfg {Boolean} preventBodyReset
+ * @hide
+ */
+});
+Ext.reg('tabpanel', Ext.TabPanel);
+
+<div id="method-Ext.TabPanel-activate"></div>/**
+ * See {@link #setActiveTab}. Sets the specified tab as the active tab. This method fires
+ * the {@link #beforetabchange} event which can <tt>return false</tt> to cancel the tab change.
+ * @param {String/Panel} tab The id or tab Panel to activate
+ * @method activate
+ */
+Ext.TabPanel.prototype.activate = Ext.TabPanel.prototype.setActiveTab;
+
+// private utility class used by TabPanel
+Ext.TabPanel.AccessStack = function(){
+ var items = [];
+ return {
+ add : function(item){
+ items.push(item);
+ if(items.length > 10){
+ items.shift();
+ }
+ },
+
+ remove : function(item){
+ var s = [];
+ for(var i = 0, len = items.length; i < len; i++) {
+ if(items[i] != item){
+ s.push(items[i]);
+ }
+ }
+ items = s;
+ },
+
+ next : function(){
+ return items.pop();
+ }
+ };
+};</pre> \r
+</body>\r
+</html>
\ No newline at end of file
git.ithinksw.org / extjs.git / blobdiff