Results 1 to 5 of 5

Thread: Panel docked to bottom of an accordion breaks when the accordion animates

  1. #1

    Default Panel docked to bottom of an accordion breaks when the accordion animates

    I'm having an issue with the accordion layout since upgrading from 4.0.2 to 4.1.1. Our application uses accordions, and those accordions often contain footers via a dockedItems/bottom configuration. What has started happening is that, as soon the accordion switches its current view, the no longer displays properly.

    Before:
    http://cl.ly/image/3l3q0S3e2V0p

    After clicking an accordion header (Notice the footer has changed):
    http://cl.ly/image/2E1F1h3h3I1m

    And here is the sample code I used to reproduce the bug:

    Code:
    <html>
    <head>
      <title>Hello Ext</title>
      <link rel="stylesheet" type="text/css" href="extjs-4.1.1/resources/css/ext-all.css">
      <script type="text/javascript" src="extjs-4.1.1/ext-debug.js"></script>
    </head>
    <body>
      <script>
        Ext.application({
          name: 'HelloExt',
          launch: function() {
            var accordion = Ext.create('Ext.panel.Panel', {
              layout:'accordion',
              items:[
                {
                  xtype:'panel',
                  title:'Test',
                  html:'Hello, World!'
                },
                {
                  xtype:'panel',
                  title:'Test',
                  html:'Hello, World!'
                },
                {
                  xtype:'panel',
                  title:'Test',
                  html:'Hello, World!'
                }
              ],
              dockedItems:[
                {
                  xtype:'panel',
                  html:'This should be at the bottom',
                  dock:'bottom',
                  collapsible:false
                }
              ]
            });
            Ext.create('Ext.container.Viewport', {
              layout: 'fit',
              title: 'Hello Ext',
              items:[accordion],
              height: 400
            });
          }
        });
      </script>
    </body>
    </html>
    Any advice would be much appreciated!

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    Please try the following:

    Code:
    Ext.application({
        name: 'HelloExt',
        launch: function() {
            var accordion = Ext.create('Ext.panel.Panel', {
                flex: 1,
                layout: 'accordion',
                items: [{
                    xtype: 'panel',
                    title: 'Test',
                    html: 'Hello, World!'
                }, {
                    xtype: 'panel',
                    title: 'Test',
                    html: 'Hello, World!'
                }, {
                    xtype: 'panel',
                    title: 'Test',
                    html: 'Hello, World!'
                }]
            });
    
            var panel = Ext.create('Ext.panel.Panel', {
                html: 'This should be at the bottom',
                height: 20
            });    
    
            Ext.create('Ext.container.Viewport', {
                layout: {
                    type: 'vbox',
                    align: 'stretch'
                },
                title: 'Hello Ext',
                items: [accordion, panel]
            });
        }
    });
    Scott

  3. #3

    Default

    Hi Scott.

    Thanks for your input. I had considered using a vbox, however I am trying to avoid making any major alterations to the structure of my app. My app is actually a lot more complex than the simplified example I posted, and my experience with Ext JS so far has been that even minor layout changes can have cascading effects.

    What concerns me the most is that this particular layout worked fine prior to my upgrading to 4.1.1. Hoping to find a workaround to make my existing code work as expected, rather than having redo all my accordions.

  4. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    4.1 corrected a lot of problems with layouts. This includes layouts were allowed even if configured incorrectly (4.0.x). If you feel this is a bug, please submit a bug report and it will be reviewed by our dev team.

    http://www.sencha.com/forum/showthre...o-report-a-bug

    Scott.

  5. #5

    Default

    Took a while but I managed to convert my components to use vbox. Seems to be working ok. I'd recommend that approach to anyone running into this issue.

    Bug report submitted here: http://www.sencha.com/forum/showthre...ccordion-slide

    Thanks!

Posting Permissions

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