Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User
    Join Date
    Mar 2011
    Posts
    8
    Vote Rating
    0
    eGeuens is on a distinguished road

      0  

    Default [4.1.3] Hidden panels in accordion break expanding cycle

    [4.1.3] Hidden panels in accordion break expanding cycle


    REQUIRED INFORMATION
    Ext version tested:
    • Ext 4.1.3
    Browser versions tested against:
    • Chrome
    • IE
    • FF
    Description:
    • When adding panels to an accordion layout and setting a few of them to hidden: true. Collapsing the item before a hidden panel does not expand the next visible sibling.
    Steps to reproduce the problem:
    • Add panels e.g. (showing, showing, hidden, hidden, showing)
    • Expand and collapse the second panel
    The result that was expected:
    • Panel 5 should be expanded
    The result that occurs instead:
    • Panel 3 expands, invisibly
    Test Case:
    Code:
    <!DOCTYPE html><html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Test extjs project</title>
    
    
            <link href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
            <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-debug.js"></script>
    
    
            <script type="text/javascript">
            Ext.onReady(function() {
               var comp = Ext.create('Ext.panel.Panel', {
                    title: 'Accordion Layout',
                    width: 300,
                    height: 300,
                    defaults: {
                        // applied to each contained panel
                        bodyStyle: 'padding:15px'
                    },
                    layout: {
                        // layout-specific configs go here
                        type: 'accordion',
                        animate: true
                    },
                    items: [],
                    renderTo: Ext.getBody()
                }).show();
                
                setTimeout(function(){
                    for(var i = 0; i < 5; i++){
                        comp.add({
                            xtype: 'panel',
                            title: "panel " + i,
                            html: "html " + i,
                            hidden: i == 2 || i == 3
                        });
                    }
                }, 1000);
            });
            </script>
        </head>
        <body>
        </body>
    </html>

    HELPFUL INFORMATION

    Debugging already done:
    • In the onComponentCollapse method there is a call to comp.next()
    • comp.next() doesn't take into account the fact that the element is hidden or not
    Possible fix:
    • overwrite the next (and prev) method to check for a visible element
    Code:
    next: function () { //overwrite default next/prev behaviour to handle hidden panels
                        var lNext = this.nextSibling();
    
    
                        while (lNext && !lNext.isVisible()) {
                            lNext = lNext.nextSibling();
                        }
                        return lNext;
                    }
    Operating System:
    • Windows 7

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,345
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I can reproduce in 4.1.3 but testing in 4.2.0 RC1 looks like this is working as expected.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1