1. #1
    Sencha User steffenk's Avatar
    Join Date
    Jul 2007
    Location
    Haan, Germany
    Posts
    2,657
    Vote Rating
    6
    steffenk has a spectacular aura about steffenk has a spectacular aura about steffenk has a spectacular aura about

      0  

    Default Container in TabStrip Area

    Container in TabStrip Area


    This very simple plugin adds a container in Tabstrip Area of a TabPanel. Especially if you only have a few tabs, the space can be used for some needed controls.

    Source and demo can be found here.


    TabStripContainer.png
    vg Steffen
    --------------------------------------
    Release Manager of TYPO3 4.5

  2. #2
    Touch Premium Member msinn's Avatar
    Join Date
    Jul 2009
    Location
    in front of my pc
    Posts
    280
    Vote Rating
    5
    msinn is on a distinguished road

      0  

    Default


    Thank you Steffen, this is a great plugin !
    First I would like to thank you for your time and knowledge

    Win 7 Ext JS 4.1.3 IE(6-9), FF17

  3. #3

    Default Very nice!

    Very nice!


    Very nice plugin!

    This will save me valuable form space!

    Thanks.

  4. #4
    Sencha User
    Join Date
    Aug 2009
    Location
    France
    Posts
    44
    Vote Rating
    0
    shinkenno is on a distinguished road

      0  

    Default Broken link

    Broken link


    Hi,
    The link to source/demo is broken.
    Does anyone have a copy of this ux?

    Thanks!
    Arnaud

  5. #5
    Ext JS Premium Member Joyfulbob's Avatar
    Join Date
    Feb 2008
    Posts
    176
    Vote Rating
    1
    Joyfulbob is on a distinguished road

      0  

    Default


    Try this from 2011:

    I don't have code for how it's used.

    PHP Code:
    /**
     * Ext.ux.plugins.TabStripContainer
     *
     * @author  Steffen Kamper
     * @date    December 19, 2010
     *
     * @class Ext.ux.plugins.TabStripContainer
     * @extends Object
     */

    Ext.ns('Ext.ux.plugins');

    Ext.ux.plugins.TabStripContainer Ext.extend(Object, {

        
    /**
         * @hide    private
         *
         * Tab panel we are plugged in.
         */
        
    tabPanel null,

        
    /**
         * @hide    private
         *
         * items for the panel
         */
        
    items: [],

        
    /**
         * @hide    private
         *
         * Cached tab panel's strip wrap element container, i.e. panel's header or footer element.
         */
        
    headerFooterEl null,


        
    /**
         * @constructor
         */
        
    constructor : function(config) {
            
    Ext.apply(thisconfig);
        },

        
    /**
         * Initializes plugin
         */
        
    init : function(tabPanel) {
            
    this.tabPanel tabPanel;
            
    tabPanel.on(
                
    'afterrender',
                
    this.onTabPanelAfterRender,
                
    this,
                {
                    
    delay10
                
    }
            );
        },

        
    /**
         * Adds the panel to the tab header/footer
         *
         * @param tabPanel
         */
        
    onTabPanelAfterRender: function(tabPanel) {
            var 
    heightpanelDivstripTargetconfig;
            
    // Getting and caching strip wrap element parent, i.e. tab panel footer or header.
            
    this.headerFooterEl =
                    
    this.tabPanel.tabPosition == 'bottom'
                        
    this.tabPanel.footer
                        
    this.tabPanel.header;
            
    height this.headerFooterEl.getComputedHeight();
            
    stripTarget tabPanel[tabPanel.stripTarget];

            
    stripTarget.applyStyles('position: relative;');

            
    panelDiv this.headerFooterEl.createChild({
                
    tag 'div',
                
    idthis.id || Ext.id(),
                
    style : {
                    
    position 'absolute',
                    
    right0,
                    
    top0
                
    }
            });
            
    panelDiv.setSize(this.widthheightfalse);
            
    config Ext.applyIf({
                
    layout'hbox',
                
    layoutConfig: {
                    
    align'stretchmax'
                
    },
                
    heightheight,
                
    widththis.width,
                
    renderTopanelDiv
            
    }, this.panelConfig);
            
    this.panelContainer = new Ext.Panel(config);
            
    this.panelContainer.add(this.items);
            
    this.panelContainer.doLayout();
        }

    });
    Ext.preg('Ext.ux.plugins.TabStripContainer'Ext.ux.plugins.TabStripContainer); 

  6. #6
    Sencha User
    Join Date
    Aug 2009
    Location
    France
    Posts
    44
    Vote Rating
    0
    shinkenno is on a distinguished road

      0  

    Default


    Thanks!

  7. #7
    Ext JS Premium Member Joyfulbob's Avatar
    Join Date
    Feb 2008
    Posts
    176
    Vote Rating
    1
    Joyfulbob is on a distinguished road

      0  

    Default


    You're welcome.

    Now I need to figure out how to code it; I can't find my js page where I'm using it. Anyone have an example?

  8. #8

  9. #9
    Sencha Premium Member
    Join Date
    Jan 2009
    Location
    India
    Posts
    57
    Vote Rating
    0
    nitingautam is on a distinguished road

      0  

    Default


    Do we have it's ExtJS4.2 compatible version available ?
    Knowledge is power share it

Similar Threads

  1. It there any way to add a control to a TabStrip
    By Kevin Daly in forum Ext GWT: Discussion
    Replies: 6
    Last Post: 19 Dec 2010, 12:31 PM
  2. toolbar on the tabstrip
    By varsos in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 15 Jun 2009, 5:31 AM
  3. Porlet drag area and landing area not showing(pic)
    By codemeit in forum Ext GWT: Help & Discussion (1.x)
    Replies: 1
    Last Post: 8 Nov 2008, 1:45 PM

Thread Participants: 5