Page 1 of 3 123 LastLast
Results 1 to 10 of 27

Thread: TabPanel Multiple Rows

  1. #1

    Question TabPanel Multiple Rows

    I have done a search and I can't find anything on how to make a TabStrip use multiple rows.

    I have about 12 lists associated with my main record. each of with are displayed in their own tabpanel. This has ended up being too wide for the user's screen so I want to have multiple rows of tabs preferably that just wrap when they reach the page width.

    Can it be done? If so, How?

  2. #2
    Sencha Premium User dawesi's Avatar
    Join Date
    Mar 2007
    Location
    Melbourne, Australia (aka GMT+10)
    Posts
    1,246

    Default

    so you want wrapping tabs, not scrolling tabs (already built-in feature)??

  3. #3

    Default

    yes wrapping tabs...how do I make it happen?

    what magic do I invoke?
    OR
    what might I have done to prevent tabs from wrapping?

  4. #4

    Default

    To Help, an example of the code that DOES NOT give my 2 rows of tabs when the page displayed with a smaller with than the tabpanel.

    Code:
    ObjectListsPanel = function(config){
        Ext.apply(this, config);
        
        ObjectListsPanel.superclass.constructor.call(this, {
              border: false
            , resizeTabs:true
            , enableTabScroll:false
            , minTabWidth: 100
            , width: 'auto'
        });
        
        this.setActiveTab(0)
    };
    
    Ext.extend(ObjectListsPanel, Ext.TabPanel);

    Code:
    ListsPanel = function(config){
        Ext.apply(this, config);
        
        this.recordId = this.parent.recordId;
    
        var list = [
              new PanelXYZ({ parentId: this.recordId })
            , new PanelXYZ({ parentId: this.recordId })
            , new PanelXYZ({ parentId: this.recordId })
            , new PanelXYZ({ parentId: this.recordId })
            , new PanelXYZ({ parentId: this.recordId })
            , new PanelXYZ({ parentId: this.recordId })    
        ];
    
        ListsPanel.superclass.constructor.call(this, {
             items: list 
        });    
    };
    
    Ext.extend(ListsPanel, ObjectListsPanel);

  5. #5

    Default

    What does only available with tabs on top mean?


    enableTabScroll : Boolean True to enable scrolling to tabs that may be invisible due to overflowing the overall TabPanel width. Only available ...
    True to enable scrolling to tabs that may be invisible due to overflowing the overall TabPanel width. Only available with tabs on top. (defaults to false).



    Is it related to this?

    tabPosition : String The position where the tab strip should be rendered (defaults to 'top'). The only other supported value is 'bottom'. ...
    The position where the tab strip should be rendered (defaults to 'top'). The only other supported value is 'bottom'. Note that tab scrolling is only supported for position 'top'.

  6. #6

    Default

    You can have tabs above or below a object. The only way to have the little scroll bars that let you scroll through tabs, is when they are above an object.

    Think if you want 2 rows, would need to write your own custom class. I don't see support for it either...

  7. #7

    Exclamation

    if you want 2 rows, would need to write your own custom class. I don't see support for it either...
    And this is the confusing thing...I've looked. I can't see how to do it although people keep saying its base behaviour.

    already built-in feature
    To be perfectly clear I want 2 rows of tabs like you see on dialog boxes with fixed widths.

    I can get the scrolling working but like all numpty users if they can't see it it ain't there. So the only option is to split the master record so it displays across a few pages OR multiline the tabs.

    Please please if you can categorically say that it is a built in feature tell me how to do it. provide complete code and prove your assertion that it is there and supported. Or direct me to a forum that already has the solution.

  8. #8
    Ext JS Premium Member mm_202's Avatar
    Join Date
    Dec 2007
    Location
    USA
    Posts
    59

    Default Progress?

    TheNakedPirate,

    Did you ever figure out how to get the multiple rows in the tab strip?

  9. #9

    Default

    I have created a custom class, which allows multiple rows on TabPanel.

    Source code is below:

    Note: Edited 27/09/2009 by biggena (fixed a problem with incorrect height of client area, when row is added or deleted). Thanks to sj137 for his contribution.

    PHP Code:
     
    /*
    Added support of multiple rows to TabPanel.
    Create your Tab panel with 'multipleRows' config option set to TRUE:
    Example:
     var tabPanel = new Ext.ux.MultiRowTabPanel({
       multipleRows: true,
       ...
     }); 
     
     Or when using xtype:
     
     {
       xtype: 'multirowtabpanel',
       multipleRows: true,
       ...
     }
    */
    Ext.namespace("Ext.ux");
    Ext.ux.MultiRowTabPanel Ext.extend(Ext.TabPanel, {
      
    onResize : function(){
        
    Ext.ux.MultiRowTabPanel.superclass.onResize.apply(thisarguments);  
     
        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;   // Get the real height of Tab rows (query DOM)
     
        
    if(!this.lastTabsHeight)
          
    this.lastTabsHeight ah;
     
        
    // Check if the height of Tab rows has been changed since the last time 
        // (e.g. new row was added or the row was deleted)
        
    if(this.lastTabsHeight != ah)
        {
          var 
    diff ah this.lastTabsHeight// calculate a difference in height between current and previous values
          
    this.lastTabsHeight ah;            // save the current height of Tab rows for the next reference
          
    this.lastSize null//forces recalc
          
    this.setHeight(this.getSize().height diff);  // Adjust the height of the client area
        
    }
      }
    });
    Ext.reg('multirowtabpanel'Ext.ux.MultiRowTabPanel); 
    Put this code into MultiRowTabPanel.js file and then include that file into your project.
    Add following line into your main HTML file (edit path according to your location of the file):

    <script type="text/javascript" src="ux/MultiRowTabPanel.js"></script>


    So, you can use class Ext.ux.MultiRowTabPanel instead of Ext.TabPanel.

    Example 1. Instantiate manually:

    PHP Code:
     var tabPanel = new Ext.ux.MultiRowTabPanel({
       
    multipleRowstrue,
       ...
     }); 
    Example 2. Lazy instantiation:

    PHP Code:
     {
       
    xtype'multirowtabpanel',
       
    multipleRowstrue,
       ...
     } 
    Note, you should pass one additional config parameter to TabPanel:
    multipleRows: true

    See demonstration screenshots:

    Top position:
    MultiRowTabPanel.jpg

    Bottom position
    MultiRowTabPanelBottom2.jpg


    This extension was tested in FF 3.0/3.5 and IE 7.0/8.0



    Note: There is one attachemen below, which I don't know how to delete from forum. Just ignore it. It shows a problem with height, but now this problem is fixed.
    Attached Images Attached Images
    Last edited by biggena; 27 Sep 2009 at 6:27 AM. Reason: Fixed a problem in source code

  10. #10
    Ext JS Premium Member
    Join Date
    Sep 2007
    Location
    Pennsyvania, USA
    Posts
    232

    Default Thank you!

    biggena, I just wanted to say thank you very much for this... I'm currently trying to sell everyone here on using Ext JS for a project we're starting up and believe it or not, tabs wrapping onto multiple lines like this is pretty much a deal-breaker for us because where we've used Dojo before, which has this behavior by default, Ext JS does not. Your extension here, which works perfectly, removed that point from the discussion and makes things easier for me to convince everyone

    I would hope (and request) that the Ext JS team add the multipleRows attribute to the baseline TabPanel, just so I don't have to maintain the extension in our code going forward. It's not at all an unusual requirement and something that would even further differentiate Ext JS from other libraries (the Dojo team in fact removed that capability a few versions back and, I believe, has not added it back in yet, although I spoke to some of them at The Ajax Experience this year and they plan to).

    Thanks again biggena, great work!

Page 1 of 3 123 LastLast

Posting Permissions

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