Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 27

Thread: TabPanel Multiple Rows

  1. #11

    Default

    hi biggena ~

    I need multirow like this. I try to use it in my project, but I don't know how to use it(Ext.ux.MultiRowTabPanel)
    here is my code~Can you see it and help me,please~Thank you.

    HTML Code:
            <script type="text/javascript" src="js/extjs/MultiRowTabPanel.js"></script>            
            <script language="JavaScript">   
                Ext.onReady(function(){       
                    var tabs2 = new Ext.TabPanel({                    
                        renderTo: document.body,
                        activeTab: 0,
                        deferredRender:false,
                        defaults:{autoScroll: true},
                        items:[{
                                title: 'form1',
                                html:'<iframe src="Sys001_Scr0001.jsp"></iframe>'
                            },{
                                title: 'form2',
                                html:'<iframe src="Sys001_Scr0002.jsp"></iframe>'
                            },{
                                title: 'others',
                                items:[
                                        new  Ext.ux.MultiRowTabPanel({
                                                multipleRows: true,
                                                activeTab: 0,
                                                autoWidth :true,
                                                defaults:{autoScroll: true},
                                                items:[
                                                        {
                                                            xtype:'multirowtabpanel',   
                                                            multipleRows: true, 
                                                            title: 'others1',
                                                            html:'<iframe src="Sys001_Scr0019.jsp"></iframe>'
                                                        }
                                                        ,{
                                                            xtype:'multirowtabpanel',   
                                                            multipleRows: true,
                                                            title: 'others2',
                                                            html:'<iframe src="Sys001_Scr0020.jsp"></iframe>'
     
                                                        }
                                                        ,{
                                                            xtype:'multirowtabpanel',   
                                                            multipleRows: true,
                                                            title: 'others3',
                                                            html:'<iframe src="Sys001_Scr0021.jsp"></iframe>'
                                                        }
                                                        ,{
                                                            xtype:'multirowtabpanel',  
                                                            multipleRows: true,
                                                            title: 'others4',
                                                            html:'<iframe src="Sys001_Scr0022.jsp"></iframe>'
                                                        }
                                                    ]
                                            })
                                    ]
                            }
                        ]
                    });                
                });
            </script>

  2. #12
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961

    Default

    i have this css soltion for a multirow tabpanel:


    Code:
    .mycompany-tabpanel-onerow ul.x-tab-strip {
            width: 10000px !important;
    }
    
    .mycompany-tabpanel-multirow ul.x-tab-strip {
        width: auto !important;
    }
    now you only need to add the css class mycompany-tabpanel-multirow to a normal tabpanel.


    ( the onerow css is for the problem if you have many tabs and dont like to have a new line after about 80 or 90 tabs)

  3. #13

    Default

    Hi Biggena

    Im sorry but im new to ext, so where do i put this code?

    Ext.namespace("Ext.ux");
    Ext.ux.MultiRowTabPanel = Ext.extend(Ext.TabPanel, {
    onResize : function(){
    Ext.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();
    }
    }
    });

    Ext.reg('multirowtabpanel', Ext.ux.MultiRowTabPanel);

  4. #14
    Sencha User
    Join Date
    Jun 2009
    Posts
    751

    Default

    I'm using Arno.Nyhm's method (post #12) which works fine. Biggena's solution (post #9) works too.

    ## Making this work for tabPosition: 'bottom' and multiple tab rows:

    Code:
    cpCmp = Ext.getCmp('content-panel');   // configured as layout card
    npCmp = Ext.getCmp('new-panel');       // configured as xtype tabpanel
    spCmp = Ext.getCmp('search-panel');    // configured as xtype tabpanel
    vpCmp = Ext.getCmp('view-panel');      // configured as xtype tabpanel
    Basically, the card content-panel is composed of a welcome panel (non tab) and 3 tab panels.

    After adding a tab, let's say for new-panel, I have to run this little bit of code. Without this, I have to resize the window (very little) for the vertical scrollbar to shift back up in place. This occurs when a new tab is added dynamically and begins on a new row.

    Code:
    if (Math.abs(cpCmp.getHeight() - npCmp.getHeight()) > 2) {
       npCmp.setHeight(cpCmp.getHeight() - 3);
       npCmp.setHeight(cpCmp.getHeight() - 2);
    }
    You'd notice that getHeight is called twice. One time is not enough and even if I were to set the height with the same value twice.

    In any event, this allows the tabPosition: 'bottom' to work. But, I also need this for IE 6 as the tab panel is not resizing correctly for when tabPosition: 'top'. The bottom scrollbar arrow shifts below the viewing area +23px, +44, +65, etc. for subsequent rows of tabs. The codebit above helps address the vertical scrollbar issue.

    Having to call getHeight() twice doesn't make sense to me. The codebit was tested under IE 6, FF 3.5.3 and Safari 4.0.3.

    M.

  5. #15
    Sencha User
    Join Date
    Apr 2007
    Location
    Italy/UK
    Posts
    152

    Smile [solved] height problem

    Hi guys,

    i was having a problem with the height of the panels not changing correctly when tab lines were added or removed

    eg the bottom part of the vertical scrollbar of my dataview wasn't visibile and extended off the bottom of the page...

    in case anyone else is having a similar problem, here is my solution:

    Code:
    Ext.namespace("Ext.ux");
    Ext.ux.MultiRowTabPanel = Ext.extend(Ext.TabPanel, {
    	onResize : function()
    		{
    			Ext.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.fixHeight();
    				}
    		},
    	
    	fixHeight:function()
    		{
    			var size1 = this.getSize();
    			var size2 = this.ownerCt.getSize();
    			if (size1.height != size2.height)
    				{
    					this.lastSize = null; //forces recalc
    					this.setHeight(size2.height);
    				}
    		}
    });
    
    Ext.reg('multirowtabpanel', Ext.ux.MultiRowTabPanel);

  6. #16

    Exclamation

    Hi, sj137,

    Thank you for contribution.
    Your solution unfortunately doesn't work in my project. The height is set incorrectly. Maybe because I have Grid inside Tab with Header and Footer.

    Anyway, your source code helped me to prepare a fix for Height problem.
    This fix works for both positions of Tabs (top and bottom).

    Here is new code of MultiRowTabPanel.js

    It contains new function fixHeight()

    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); 
    I will update also the source code in my first post.

  7. #17
    Sencha User
    Join Date
    Apr 2007
    Location
    Italy/UK
    Posts
    152

    Thumbs up Thanks!

    Hi Biggena,

    no problemo, and more than happy to help

    Big thanks to you for creating this extension, scrolling tabs was absolutely not an option for my project at all because users need to switch between multiple tabs very frequently and often need to have a lot of tabs open, so multiple rows was just perfect!

    great work!!

    Grazie Mille!

    SJ

  8. #18
    Sencha User
    Join Date
    Jun 2009
    Posts
    751

    Default

    Thanks for the lastSize = null codebit to force a recalc.

    I'm using Arno.Nyhm's method (post #12).

    I changed my logic above from:

    if (Math.abs(cpCmp.getHeight() - npCmp.getHeight()) > 2) {
    npCmp.setHeight(cpCmp.getHeight() - 3);
    npCmp.setHeight(cpCmp.getHeight() - 2);
    }

    to:

    if (Math.abs(cpCmp.getHeight() - npCmp.getHeight()) > 2) {
    npCmp.lastSize = null; // forces recalc -- thanks for this: lastSize = null;
    npCmp.setHeight(cpCmp.getHeight() - 2);
    }

  9. #19
    Ext JS Premium Member
    Join Date
    May 2009
    Location
    Cologne, Germany
    Posts
    6

    Default

    Quote Originally Posted by Arno.Nyhm View Post
    i have this css soltion for a multirow tabpanel:


    Code:
    .mycompany-tabpanel-onerow ul.x-tab-strip {
            width: 10000px !important;
    }
    
    .mycompany-tabpanel-multirow ul.x-tab-strip {
        width: auto !important;
    }
    now you only need to add the css class mycompany-tabpanel-multirow to a normal tabpanel.


    ( the onerow css is for the problem if you have many tabs and dont like to have a new line after about 80 or 90 tabs)
    Thanks, I prefer your solution of this.

  10. #20

    Default Thanks!

    Thank you for taking the time to give your .css solution. It worked perfectly for me!

    [edit] The only thing I did not like about the result of using the .css solution was that it ended up dropping the extra tabs into the bottom row, which seemed the opposite of what I would expect. Usually I'd expect the bottom row of tabs takes up as much of the total width as possible, with extra tabs filling in the rows above.

    You can see this in biggena's imcluded screenshots of how his user extension does the same thing... the tab styling EXT provides seems to assume there will be a panel under each tab, so it looks a bit unfinished to me when the extra tabs are hanging in space along the top row of the tab strip.

    My tab panel has 7 tabs, and only 2 of them don't fit on the original tab strip. Just using the .css solution had the result of leaving the bottom row with only 2 small tabs, and it just didn't look as polished as I would have liked. I was able to push the majority of the tabs into the bottom tab row by using the following:

    Sample Tab panel:

    Code:
     
    var tp = new Ext.TabPanel({                    
       renderTo: document.body,
       activeTab: 0,
       id:'myTabPanel',
       items:[{
           id:'tab1',
           title:'top left tab'
       },{
           id:'tab2',
           title:'top middle tab'
       },{
           id:'tab3',
           // I want this to be the last tab on the top row, pushing all others to the bottom
           tabCls: 'addTabMargin', // this class eats up the rest of the space on the top row
           title:'top right tab'
       },{
           id:'tab4',
           title:'bottom left tab'
       },{
           id:'tab5',
           title:'bottom middle-left tab'
       },{
           id:'tab6',
           title:'bottom middle-right tab'
       },{
           id:'tab7',
           title:'bottom right tab'
       }]
    });
    The css class 'addTabMargin' just has something like

    Code:
     
    .addTabMargin {
      margin-right:200px !important
    }
    You will have to experiment with what right-margin would give you the result you want. It only works for me because I have a static number of tabs, and I know what their titles and order will be.

    This is pretty hackish; there has to be a better way to do this, but its what I came up with on the fly. I hope it helps, or promps someone to give a better way to push the majority of tabs to the lower row of the tab strip.
    Last edited by AbnerDoon; 2 Mar 2010 at 1:16 PM. Reason: Additional Tweak

Page 2 of 3 FirstFirst 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
  •