Hybrid View

  1. #1
    Ext User
    Join Date
    Jan 2009
    Posts
    9
    Vote Rating
    0
    irata is on a distinguished road

      0  

    Question TabPanel: Right align some tabs

    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,251
    Vote Rating
    73
    Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold Condor is a splendid one to behold

      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
    irata is on a distinguished road

      0  

    Default


    That's it! ;-)

    Thank you very much!!!

  4. #4
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    36
    Vote Rating
    0
    Mandeep is on a distinguished road

      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
    maosim is on a distinguished road

      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
    maosim is on a distinguished road

      0  

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

    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
    adambuckley is on a distinguished road

      1  

    Default Add This Code

    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'
        }
    }

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar