[4.1.3] Hidden panels in accordion break expanding cycle

**eGeuens** · 18 Feb 2013 3:24 AM

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

**mitchellsimoens** · 22 Feb 2013 10:57 AM

I can reproduce in 4.1.3 but testing in 4.2.0 RC1 looks like this is working as expected.

[4.1.3] Hidden panels in accordion break expanding cycle

Thread Tools

Search Thread

Display

[4.1.3] Hidden panels in accordion break expanding cycle

[4.1.3] Hidden panels in accordion break expanding cycle