Success! Looks like we've fixed this one. According to our records the fix was applied for EXTJS-7642 in 4.2.0.265.
  1. #1
    Ext JS Premium Member
    Join Date
    May 2010
    Location
    Wiesbaden
    Posts
    19
    Vote Rating
    0
    CSC-Germany is on a distinguished road

      0  

    Default [4.1.3] Accordion Layout not working when dynamically adding items

    [4.1.3] Accordion Layout not working when dynamically adding items


    REQUIRED INFORMATION


    Ext version tested:
    • Ext 4.1.3
    Browser versions tested against:
    • Chrome
    • IE9
    • FF
    DOCTYPE tested against:
    • n/a
    Description:
    • According Layout produces a weird handling, when items are added after instantiation. The accordion handling is totally broken then.
    Steps to reproduce the problem:
    • create a Accordion Panel with items in it
    • after the Panel is rendered, add another item the Accordion Panel
    The result that was expected:
    • added item will be handled in the accordion style..
    The result that occurs instead:
    • multiple items are expanded
    • collapse/expand style within the accordion panel totally weird
    Test Case:

    I have enhanced the accordion layout example with a button in the center region to add a simple item the accordion panel...

    Code:
       ..
       ..
         var viewport = Ext.create('Ext.Viewport', {            layout : 'border' ,
                items : [accordion , {
                    region : 'center' ,
                    margins : '5 5 5 0' ,
                    cls : 'empty' ,
                    bodyStyle : 'background:#f1f1f1' ,
                    items : [{
                        xtype : 'button' ,
                        text : 'Add' ,
                        handler : function() {
                            accordion.add({
                                xtype : 'panel' ,
                                title : 'added Accordion Item' ,
                                html : '<empty panel>' ,
                                cls : 'empty'
                            })
                        }
                    }]
                }]
            });
       ..
       ..


    HELPFUL INFORMATION


    Screenshot or Video:See this URL for live test case: http://


    Debugging already done:
    • none
    Possible fix:
    • not provided
    Additional CSS used:
    • only default ext-all.css
    • custom css (include details)
    Operating System:
    • Windows

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    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


    Thank you for the report.
    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.

  3. #3
    Sencha User
    Join Date
    Nov 2010
    Posts
    13
    Vote Rating
    1
    stuchy is on a distinguished road

      0  

    Default


    Here a temporary fix. Add this to your listeners of your items inside the accordion.
    PHP Code:
                            beforeexpand: function(e) {
                                
    e.ownerCt.items.each(function(item) {
                                    if (
    item != eitem.collapse();
                                });
                            } 

  4. #4
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    62
    Vote Rating
    1
    zzhouag is on a distinguished road

      0  

    Default encounter the same problem

    encounter the same problem


    It can works in extjs-4.1.0, but when change to 4.1.3, the same problem is happen. Thanks!

  5. #5
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    34
    Vote Rating
    2
    jmcolyer is on a distinguished road

      0  

    Default Override

    Override


    Is there an override for this? The one mentioned above doesn't work. Also, I couldn't find the jira entry in any of the recent release notes.

  6. #6
    Sencha Premium Member
    Join Date
    Jul 2010
    Posts
    18
    Vote Rating
    0
    Saskia is on a distinguished road

      0  

    Default


    I've got the same problem and didn't find any resolution yet.
    The fix from stuchy didn't work for me.

    Any ideas?


  7. #7
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    62
    Vote Rating
    1
    zzhouag is on a distinguished road

      0  

    Default


    It's already fixed in 4.2.0 later, or you can override Ext.layout.container.Accordion class using 4.1.0 or 4.2.0 version

  8. #8
    Sencha Premium Member
    Join Date
    Jul 2010
    Posts
    18
    Vote Rating
    0
    Saskia is on a distinguished road

      0  

    Default


    This works fine. Thanks a lot for your fast reply

  9. #9
    Sencha Premium Member
    Join Date
    Apr 2010
    Posts
    34
    Vote Rating
    2
    jmcolyer is on a distinguished road

      0  

    Default work around

    work around


    I was able to get it working by adding by the following listener to each of my accordion items.

    Code:
    // workaround for EXTJSIV-7642 (not working)
    listeners: {
       expand: function(item) {
               item.doLayout();
           }
        }
    }

  10. #10
    Sencha User
    Join Date
    Jun 2012
    Location
    Virginia, USA
    Posts
    40
    Vote Rating
    1
    rtirbany is on a distinguished road

      0  

    Default working but .... scrollbar possible?

    working but .... scrollbar possible?


    hi,
    I've got this working fine but have an issue that may be related which I haven't been able to get through:
    Say there's a parent panel w/ an accordion layout, and this panel is confined to a very restricted (vertically ) area in the page. Now, I'm dynamically adding several child panels to this via a store, the accordion layout handles this fine. My issue/problem is that I can't find a way to have the parent panel show me a vertical scrollbar while also giving me an accordion layout. Is there a way to have this work?
    I've tried pnl.setOverflowXY, doLayout, etc after adding each child item...to no avail. Any thoughts/ideas on this?

    thanks
    Last edited by rtirbany; 8 Aug 2013 at 5:56 AM. Reason: clarity