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 - * ({@link Ext.Container#items items}) that are managed using a - * {@link Ext.layout.CardLayout CardLayout layout manager}, and displayed as separate tabs.
- * - * Note: By default, a tab's close tool destroys the child tab Component - * and all its descendants. This makes the child tab Component, and all its descendants unusable. To enable - * re-use of a tab, configure the TabPanel with{@link #autoDestroy autoDestroy: false}.
- *
- * TabPanel header/footer elements
- *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}.
- *To display a header, embed the TabPanel in a {@link Ext.Panel Panel} which uses - * {@link Ext.Container#layout layout:'fit'}.
- * - *Tab Events
- *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:
- *false from a handler.Creating TabPanels from Code
- *TabPanels can be created and rendered completely in code, as in this example:
- *
-var tabs = new Ext.TabPanel({
- renderTo: Ext.getBody(),
- activeTab: 0,
- items: [{
- title: 'Tab 1',
- html: 'A simple tab'
- },{
- title: 'Tab 2',
- html: 'Another one'
- }]
-});
-Creating TabPanels from Existing Markup
- *TabPanels can also be rendered from pre-existing markup in a couple of ways.
- *A container div with one or more nested tab divs with class 'x-tab' can be rendered entirely - * from existing markup (See the {@link #autoTabs} example).
- *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:
- *
-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>
-{@link Ext.layout.CardLayout#layoutOnCardChange layoutOnCardChange}.
- */
- /**
- * @cfg {String} tabCls This config option is used on child Components of ths TabPanel. A CSS
- * class name applied to the tab strip item representing the child Component, allowing special
- * styling to be applied.
- */
- /**
- * @cfg {Boolean} deferredRender
- * true by default to defer the rendering of child {@link Ext.Container#items items} - * to the browsers DOM until a tab is activated. false will render all contained - * {@link Ext.Container#items items} 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 true might - * improve performance.
- *The deferredRender property is internally passed to the layout manager for - * TabPanels ({@link Ext.layout.CardLayout}) as its {@link Ext.layout.CardLayout#deferredRender} - * configuration value.
- *Note: leaving deferredRender as true 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}.
- */ - deferredRender : true, - /** - * @cfg {Number} tabWidth The initial width in pixels of each new tab (defaults to 120). - */ - tabWidth : 120, - /** - * @cfg {Number} minTabWidth The minimum width in pixels for each tab when {@link #resizeTabs} = true (defaults to 30). - */ - minTabWidth : 30, - /** - * @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, - /** - * @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, - /** - * @cfg {Number} scrollIncrement The number of pixels to scroll each time a tab scroll button is pressed - * (defaults to 100, or if {@link #resizeTabs} = true, the calculated tab width). Only - * applies when {@link #enableTabScroll} = true. - */ - scrollIncrement : 0, - /** - * @cfg {Number} scrollRepeatInterval Number of milliseconds between each scroll while a tab scroll button is - * continuously pressed (defaults to 400). - */ - scrollRepeatInterval : 400, - /** - * @cfg {Float} scrollDuration The number of milliseconds that each scroll animation should last (defaults - * to .35). Only applies when {@link #animScroll} = true. - */ - scrollDuration : 0.35, - /** - * @cfg {Boolean} animScroll True to animate tab scrolling so that hidden tabs slide smoothly into view (defaults - * to true). Only applies when {@link #enableTabScroll} = true. - */ - animScroll : true, - /** - * @cfg {String} tabPosition The position where the tab strip should be rendered (defaults to 'top'). - * The only other supported value is 'bottom'. Note: tab scrolling is only supported for - * tabPosition: 'top'. - */ - tabPosition : 'top', - /** - * @cfg {String} baseCls The base CSS class applied to the panel (defaults to 'x-tab-panel'). - */ - baseCls : 'x-tab-panel', - /** - * @cfg {Boolean} autoTabs - *true 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 false). 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).
- *This method is only possible when the markup is structured correctly as a container with nested divs - * containing the class 'x-tab'. 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.
- *There are a couple of things to note when using this method:
-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>
-layoutConfig may be used to configure this layout manager.
- * {@link #deferredRender} and {@link #layoutOnTabChange}
- * 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);
- st.createChild({cls:'x-tab-strip-spacer'}, beforeEl);
- this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
-
- // create an empty span with class x-tab-strip-text to force the height of the header element when there's no tabs.
- this.edge = this.strip.createChild({tag:'li', cls:'x-tab-edge', cn: [{tag: 'span', cls: 'x-tab-strip-text', cn: ' '}]});
- this.strip.createChild({cls:'x-clear'});
-
- this.body.addClass('x-tab-panel-body-'+this.tabPosition);
-
- /**
- * @cfg {Template/XTemplate} itemTpl (Optional) A {@link Ext.Template Template} or - * {@link Ext.XTemplate XTemplate} which may be provided to process the data object returned from - * {@link #getTemplateArgs} to produce a clickable selector element in the tab strip.
- *The main element created should be a <li> element. In order for a click event on - * a selector element to be connected to its item, it must take its id from the TabPanel's - * native {@link #getTemplateArgs}.
- *The child element which contains the title text must be marked by the CSS class - * x-tab-strip-inner.
- *To enable closability, the created element should contain an element marked by the CSS class - * x-tab-strip-close.
- *If a custom itemTpl is supplied, it is the developer's responsibility to create CSS - * style rules to create the desired appearance.
- * Below is an example of how to create customized tab selector items:
-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"></a>',
- '</tpl>',
- '<a class="x-tab-right" href="#" 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'
- }]
-});
-Provides template arguments for rendering a tab selector item in the tab strip.
- *This method returns an object hash containing properties used by the TabPanel's {@link #itemTpl} - * to create a formatted, clickable tab selector element. The properties which must be returned - * are:
{@link Ext.Component#itemId itemId}
- * or {@link Ext.Component#id id} of the child component {@link Ext.Container#items items} propertyFor additional information see {@link Ext.util.MixedCollection#get}. - */ - setActiveTab : function(item){ - item = this.getComponent(item); - if(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 = item; - if(item){ - var el = this.getTabEl(item); - Ext.fly(el).addClass('x-tab-strip-active'); - this.stack.add(item); - - this.layout.setActiveItem(item); - if(this.scrolling){ - this.scrollToTab(item, this.animScroll); - } - } - this.fireEvent('tabchange', this, item); - } - }, - - /** - * Returns the Component which is the currently active tab. Note that before the TabPanel - * first activates a child Component, this method will return whatever was configured in the - * {@link #activeTab} config option. - * @return {BoxComponent} The currently active child Component if one is active, or the {@link #activeTab} config value. - */ - getActiveTab : function(){ - return this.activeTab || null; - }, - - /** - * 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, - ow = this.pos.dom.offsetWidth, - tw = this.pos.dom.clientWidth, - wrap = this.stripWrap, - wd = wrap.dom, - cw = wd.offsetWidth, - pos = this.getScrollPos(), - l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos; - - if(!this.enableTabScroll || cw < 20){ // 20 to prevent display:none issues - return; - } - if(count == 0 || l <= tw){ - // ensure the width is set if there's no tabs - 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); - }, - - /** - * 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), - pos = this.getScrollPos(), - area = this.getScrollArea(), - left = Ext.fly(el).getOffsetsTo(this.stripWrap)[0] + pos, - 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(), - newpos = pos + d, - 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(), - pos = this.getScrollPos(), - s = Math.min(sw, pos + this.getScrollIncrement()); - if(s != pos){ - this.scrollTo(s, this.animScroll); - } - }, - - // private - onScrollLeft : function(){ - var pos = this.getScrollPos(), - 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() { - Ext.destroy(this.leftRepeater, this.rightRepeater); - this.deleteMembers('strip', 'edge', 'scrollLeft', 'scrollRight', 'stripWrap'); - this.activeTab = null; - Ext.TabPanel.superclass.beforeDestroy.apply(this); - } - - /** - * @cfg {Boolean} collapsible - * @hide - */ - /** - * @cfg {String} header - * @hide - */ - /** - * @cfg {Boolean} headerAsText - * @hide - */ - /** - * @property header - * @hide - */ - /** - * @cfg title - * @hide - */ - /** - * @cfg {Array} tools - * @hide - */ - /** - * @cfg {Array} toolTemplate - * @hide - */ - /** - * @cfg {Boolean} hideCollapseTool - * @hide - */ - /** - * @cfg {Boolean} titleCollapse - * @hide - */ - /** - * @cfg {Boolean} collapsed - * @hide - */ - /** - * @cfg {String} layout - * @hide - */ - /** - * @cfg {Boolean} preventBodyReset - * @hide - */ -}); -Ext.reg('tabpanel', Ext.TabPanel); - -/** - * See {@link #setActiveTab}. Sets the specified tab as the active tab. This method fires - * the {@link #beforetabchange} event which can return false 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(); - } - }; -};