Results 1 to 2 of 2

Thread: [4.1.3] Hidden panels in accordion break expanding cycle

    Looks like we cannot reproduce this. Please provide another test case to reproduce this issue.
  1. #1
    Sencha User
    Join Date
    Mar 2011
    Vote Rating

    Default [4.1.3] Hidden panels in accordion break expanding cycle

    Ext version tested:
    • Ext 4.1.3
    Browser versions tested against:
    • Chrome
    • IE
    • FF
    • 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:
    <!DOCTYPE html><html>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>Test extjs project</title>
            <link href="" rel="stylesheet" type="text/css" />
            <script type="text/javascript" charset="utf-8" src=""></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()
                    for(var i = 0; i < 5; i++){
                            xtype: 'panel',
                            title: "panel " + i,
                            html: "html " + i,
                            hidden: i == 2 || i == 3
                }, 1000);


    Debugging already done:
    • In the onComponentCollapse method there is a call to
    • 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
    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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    I can reproduce in 4.1.3 but testing in 4.2.0 RC1 looks like this is working as expected.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2

    Think my support is good? Get more personalized support via a support subscription.

    Need more help with your app? Hire Sencha Services

    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.

Posting Permissions

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