Results 1 to 10 of 10

Thread: TabPanel: Right align some tabs

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Ext User
    Join Date
    Jan 2009
    Posts
    9
    Vote Rating
    0
      0  

    Question TabPanel: Right align some tabs

    Hi,

    is there a way to render some tabs in a TabPanel "right-aligned"?
    I want the main tabs on the left side, but two tabs with a distance to the others on the right side of the panel.
    Example:
    [Tab1][Tab2][Tab3] <SPACER> [Right1][Right2]

    Thanks for your help!

    Regards, Tobias

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    118
      1  

    Default

    Example:
    Code:
    <style type="text/css">
    	ul.x-tab-strip li.right-tab {float: right;}
    </style>
    <script type="text/javascript">
    Ext.onReady(function() {
    	new Ext.Viewport({
    		layout: 'fit',
    		items: {
    			xtype: 'tabpanel',
    			items: [{
    				title: 'Tab 1'
    			},{
    				title: 'Tab 2'
    			},{
    				title: 'Tab 3'
    			},{
    				title: 'Right 2',
    				tabCls: 'right-tab'
    			},{
    				title: 'Right 1',
    				tabCls: 'right-tab'
    			}],
    			listeners: {
    				afterlayout: function(c){
    					c.strip.setWidth(c.stripWrap.getWidth() - 2);
    				}
    			}
    		}
    	});
    });
    </script>

  3. #3
    Ext User
    Join Date
    Jan 2009
    Posts
    9
    Vote Rating
    0
      0  

    Default

    That's it! ;-)

    Thank you very much!!!

  4. #4
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    39
    Vote Rating
    0
      0  

    Default

    Can somebody please suggest how to do this in Ext 4.1.0?

    Thanks.

  5. #5
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default

    Hi,
    I'm having this problem in Ext 4.1.1 as well. is there a fix?
    Thank you

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2012
    Posts
    3
    Vote Rating
    0
      0  

    Default How to right align the tab title buttons in tab panel on extjs 4.1.1

    Hello,
    How do i right align the tab buttons in this version. the answer from thread
    http://www.sencha.com/forum/showthre...s-in-tab-panel
    isn't working for me.

    [CODE]

    <style type="text/css"> .my-tab {position: relative !important; float: right!important;
    right:0px!important;
    } .webui-centerpanel .header-tabs.x-tab-bar .x-tab {
    position: relative !important;
    float: right;
    left: auto !important;
    margin: 0 2px 0 0 !important;
    border-color: #B5B5B5;
    }
    .webui-centerpanel .header-tabs.x-tab-bar .x-tab-bar-body {
    height: 22px;
    border: 0 none;
    }
    .webui-centerpanel .header-tabs .x-tab-bar-strip {
    border-color: #b5b5b5;
    background: none transparent !important;
    border-width: 1px 0 0;
    top: 24px;
    }
    </style><script type="text/javascript">Panel = Ext.create( 'Ext.panel.Panel',{
    id: 'centerPanel',
    cls: 'webui-centerpanel',
    layout: 'fit',
    items: [{
    xtype: 'Ext.tab.Panel',
    id: 'tab-panel',
    itemCls: 'my-tab',
    bodyCls: 'header-tabs-body',
    layout: 'fit',
    border: 0,
    bodyBorder: false,
    tabBar: {
    height: 25
    },
    //toolbar
    tbar: /*.....*/
    }),
    componentCls: 'my-tab',
    items:[{
    //right align tab
    title: 'Configuration',
    id: 'config-tab',
    tabCls: 'my-tab'
    }],
    listeners: {
    beforetabchange: function(tp, newTab, currentTab){
    if (newTab.id == 'centerPanel-bctoolbar')
    return false;
    if (newTab.id == 'config-tab') {
    CP.global.activeTab = CP.global.config;
    }
    if (newTab.id == 'monitor-tab') {
    CP.global.activeTab = CP.global.monitor;
    }
    }
    }
    },{
    //another panel
    ...
    }]


    Thank you for your help!
    Regards
    Tanya

  7. #7
    Sencha User
    Join Date
    Aug 2012
    Location
    UK
    Posts
    13
    Vote Rating
    1
      1  

    Default Add This Code

    As one of your tabpanel items. All following tabpanel items will be right-aligned.

    Code:
    {    // Fill all available space
        tabConfig : {
            xtype : 'tbfill'
        }
    }

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •