Page 3 of 3 FirstFirst 123
Results 21 to 27 of 27

Thread: TabPanel Multiple Rows

  1. #21
    Sencha Premium User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    891

    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.
    OMG, this simple change works very very well.
    Thanks a lot!

  2. #22
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Cupertino, CA
    Posts
    8

    Default

    It seems that both the MultiRowTabPanel class and the simple CSS solution break badly with IE8 (both Standards and Quirks mode). Works fine in IE8 compatibility mode, IE7, and IE6.

  3. #23
    Ext JS Premium Member
    Join Date
    Apr 2010
    Location
    Cupertino, CA
    Posts
    8

    Default

    Looks like IE8 breaks because the rule that sets margin-bottom: -1px on the active tab is overridden by this rule:
    Code:
    .ext-ie8 .x-tab-strip .x-tab-right{
        margin-bottom: 0 !important;
        top: 1px;
    }
    Replacing it with this one (which seems to provide the same underlying fix) fixes the MultiRowTabPanel problem:
    Code:
    .ext-ie8 .x-tab-strip .x-tab-right{
        margin-top: 1px;
    }
    If you don't want to edit ext-all.css with the above, this instead in your own stylesheet should be sufficient to reset it:
    Code:
    .ext-ie8 .x-tab-strip .x-tab-right {
      margin-top: 1px;
      top: 0px;
    }
    .ext-ie8 .x-tab-strip-top .x-tab-strip-active .x-tab-right {
      margin-bottom: -1px !important;
    }

  4. #24

    Default problem with extjs4

    hi,

    I have run the above code with sample.Here is my code:

    aap.js:
    /*global Ext:false */
    Ext.onReady(function () {
    var tabs = new Ext.ux.MultiRowTabPanel({
    renderTo: Ext.getBody(),
    multipleRows: true,
    activeTab: 0,
    width: 400,
    height:200,
    autoScroll:true,
    items: [{
    title: 'Tab 1',
    html: 'A simple tab'
    },{
    title: 'Tab 2',
    html: 'A simple tab'
    },{
    title: 'Tab 1',
    html: 'A simple tab'
    },{
    title: 'Tab 1',
    html: 'A simple tab'
    },{
    title: 'Tab 1',
    html: 'A simple tab'
    },{
    title: 'Tab 1',
    html: 'A simple tab'
    },{
    title: 'Tab 1',
    html: 'A simple tab'
    },
    {
    title: 'Tab 2',
    html: 'Another one'
    }]
    });
    });


    MultiRowTabPanel:
    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.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);



    index.html:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8"/>
    <title>Ext.tab.Panel Example</title>
    <link rel="stylesheet" href="http://cdn.sencha.io/try/extjs/4.0.7/resources/css/ext-all-gray.css"/>
    <script src="http://cdn.sencha.io/try/extjs/4.0.7/ext-all.js"></script>
    <script src="MultiRowTabPanel.js"></script>
    <script src="app.js"></script>
    </head>
    <body>
    </body>
    </html>

    but its showing the error : TypeError: Ext.reg is not a function

    Please help

  5. #25
    Sencha User
    Join Date
    Jul 2017
    Posts
    5

    Default

    hi Arno
    I try to applay your solution to ext.net, but i could not find "ul.x-tab-strip" css in styles of page elements.
    I test "width=auto !important" to similar name cases and i couldn't get multirow tabpanel response.
    Is there any way to applay css to ext.net to solve this problem?

  6. #26
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985

    Default

    You might try the Ext.NET forums:
    https://forums.ext.net/

  7. #27
    Sencha User
    Join Date
    Jul 2017
    Posts
    5

    Default

    hi biggena

    Your Method not working in ext.js 6.x.

    Quote Originally Posted by biggena View Post
    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.

  8. #28
    Sencha User
    Join Date
    Jul 2017
    Posts
    5

    Default

    hi biggena

    I need to create multiline tabpanel, withext.js 6.x(6.2).
    I follow your solution but as you know this solution wirted base on older ext.js versions and i rewrite your solution:

    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; //RF:
    var aw = this.tabBar.el.dom.clientWidth;
    if (aw) {
    //this.strip.setWidth(aw - 4); //RF:
    this.tabBar.strip.setWidth(aw - 4);

    }
    }
    this.delegateUpdates();
    },


    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; //RF
    var ah = this.tabBar.el.dom.clientHeight; // Get the real height of Tab rows (query DOM)


    if (!this.tabBar.lastBox.height)
    this.tabBar.lastBox.height = 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.tabBar.lastBox.height != ah) {
    var diff = ah - this.tabBar.lastBox.height; // calculate a difference in height between current and previous values
    this.tabBar.lastBox.height = ah; // save the current height of Tab rows for the next reference
    this.lastSize = null; //forces recalc
    this.tabBar.setHeight(this.getSize().height - diff); // Adjust the height of the client area
    }
    }



    });


    and i dont khow add or edit any css addtion to above code is required or not.


    please help me to compelete rewritted code and get response.

    Thanks in Advanced


    Quote Originally Posted by sj137 View Post
    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

  9. #29
    Sencha User
    Join Date
    Jul 2017
    Posts
    5

    Default

    hi biggena

    I need to create multiline tabpanel, withext.js 6.x(6.2).
    I follow your solution, but as you know this solution wirted base on older ext.js versions and i rewrite your solution:

    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; //RF:
    var aw = this.tabBar.el.dom.clientWidth;
    if (aw) {
    //this.strip.setWidth(aw - 4); //RF:
    this.tabBar.strip.setWidth(aw - 4);

    }
    }
    this.delegateUpdates();
    },


    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; //RF
    var ah = this.tabBar.el.dom.clientHeight; // Get the real height of Tab rows (query DOM)


    if (!this.tabBar.lastBox.height)
    this.tabBar.lastBox.height = 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.tabBar.lastBox.height != ah) {
    var diff = ah - this.tabBar.lastBox.height; // calculate a difference in height between current and previous values
    this.tabBar.lastBox.height = ah; // save the current height of Tab rows for the next reference
    this.lastSize = null; //forces recalc
    this.tabBar.setHeight(this.getSize().height - diff); // Adjust the height of the client area
    }
    }




    });


    and i dont khow add or edit any css addtion to above code is required or not.

    please help me to compelete rewritted code and get response.

    Thanks in Advanced

    Quote Originally Posted by biggena View Post
    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:
    Attachment 10656

    Bottom position
    Attachment 10659


    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.

Page 3 of 3 FirstFirst 123

Posting Permissions

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