Results 1 to 3 of 3

Thread: Change tabPanel tabBar layout

  1. #1
    Sencha User
    Join Date
    Nov 2015
    Location
    Romania,Timisoara
    Posts
    14
    Answers
    2

    Default Change tabPanel tabBar layout

    Hello ! I kindly ask you for some little help if you know. I have a tabpanel with many tabs, and many tabs have long text, so the tabs are longer than the screen and in order to navigate through them. At then end of the row i have a left/right arrow to show more tab buttons. My question is: how i can show all the buttons one under the other, and all of them in one line if the screen size is exceeded?

    This is how it looks now:
    Capture.PNG
    And i would like to show all tabs one under the other not needing to click on the right arrow to see the other tabs.
    Thanks, and hope i explained it.

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    If you are asking for tabs on multiple lines, this is not supported in the framework. I think you'd have to override the bar's initComponent to adjust the layout and overflow handler. Here's an older thread that discusses some options.
    https://www.sencha.com/forum/showthread.php?23660

  3. #3
    Sencha User
    Join Date
    Nov 2015
    Location
    Romania,Timisoara
    Posts
    14
    Answers
    2

    Default

    thank you Gary! But i am not able to reproduce that in extjs 5.1

    i used:

    Ext.define('
    Mvp.ux.MultiRowTabPanel', {
    extend: '
    Ext.TabPanel',
    onResize : function(){
    Mvp.ux.MultiRowTabPanel.superclass.onResize.apply(this, arguments);

    if(
    this.multipleRows && this.rendered) {
    var
    ce = this.tabPosition != 'bottom' ? 'header' : 'footer';
    var
    aw = this[ce].dom.clientWidth;
    if (
    aw) {
    this.strip.setWidth(aw - 4);
    }
    }
    },

    delegateUpdates : function(){
    if (
    this.suspendUpdates) {
    return;
    }
    if (
    this.resizeTabs && this.rendered) {
    this.autoSizeTabs();
    }
    if (!
    this.multipleRows && this.enableTabScroll && this.rendered) {
    this.autoScrollTabs();
    }
    if (
    this.multipleRows && this.rendered) {
    this.fixHeight();
    }
    },

    fixHeight:function()
    {
    var
    ce = this.tabPosition != 'bottom' ? 'header' : 'footer';
    var
    ah = this[ce].dom.clientHeight;
    if(!this.lastTabsHeight)
    this.lastTabsHeight = ah;
    if(this.lastTabsHeight != ah)
    {
    var
    diff = ah - this.lastTabsHeight;
    this.lastTabsHeight = ah;
    this.lastSize = null;
    this.setHeight(this.getSize().height - diff);
    }
    }


    });


    but i get
    undefined for this[ce] at ---> var aw = this[ce].dom.clientWidth;

    Any idea how can i solve this since there is no key either header either footer in that object? Thanks

Similar Threads

  1. Replies: 4
    Last Post: 6 Aug 2012, 4:44 AM
  2. Replies: 1
    Last Post: 10 Aug 2011, 1:01 PM
  3. TabPanel without TabBar?
    By _dan in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 23 May 2011, 4:50 AM
  4. Replies: 2
    Last Post: 30 Jul 2010, 6:50 PM

Posting Permissions

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