Results 1 to 2 of 2

Thread: Why does the first panel of ExtJS 4.2.1 accordion layout never close?

  1. #1
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default Why does the first panel of ExtJS 4.2.1 accordion layout never close?

    I have an ExtJS 4.2.1 accordion layout with three panels.

    When the app is first launched, the first panel is open and the 2nd/3rd are closed.

    I can open and close the 2nd and 3rd, but I can never close the first panel.

    Code:
    Ext.define('MyAccordion', {
        extend: 'Ext.container.Container',
        alias: 'widget.myAccordion',
        padding: 0,
        margin: 0,
        width: 200,
    
        layout: {
            type: 'accordion',
            align: 'stretch',
            animate: true,
            hideCollapseTool: true
        },
    
    
        items: [{
            xtype: 'panel',
            title: 'Test Volumes',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'label',
                text: 'volume one'
            },{
                xtype: 'label',
                text: 'volume two'
            },{
                xtype: 'label',
                text: 'volume three'
            }]
        }, {
            xtype: 'panel',
            title: 'Production Volumes',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'label',
                text: 'volume one'
            },{
                xtype: 'label',
                text: 'volume two'
            },{
                xtype: 'label',
                text: 'volume three'
            }]
        }, {
            xtype: 'panel',
            title: 'Extra Volumes',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'label',
                text: 'volume one'
            },{
                xtype: 'label',
                text: 'volume two'
            },{
                xtype: 'label',
                text: 'volume three'
            }]
        }]
    });
    In the following code leveraged from the 4.2.1 examples layout browser example, if the first thing you do after launching the app is click the first header, is does close, but then re-open it and it never closes again:

    Code:
    Ext.onReady(function() {
        Ext.create('Ext.container.Viewport', {
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'panel',
                title: 'Accordion Layout',
                layout: 'accordion',
                defaults: {bodyStyle: 'padding:15px'},
                items: [{
                    title: 'Introduction',
                    tools: [{type:'gear'},{type:'refresh'}],
                    html: '<p>Here is some accordion content.  Click on one of the other bars below for more.</p>'
                },{
                    title: 'Basic Content',
                    html: '<br /><br /><p>More content.  Open the third panel for a customized look and feel example.</p>',
                    items: {
                        xtype: 'button',
                        text: 'Show Next Panel',
                        handler: function(){
                            Ext.getCmp('acc-custom').expand(true);
                        }
                    }
                },{
                    id: 'acc-custom',
                    title: 'Custom Panel Look and Feel',
                    cls: 'custom-accordion', // look in layout-browser.css to see the CSS rules for this class
                    html: '<p>Here is an example of how easy it is to completely customize the look and feel of an individual panel simply by adding a CSS class in the config.</p>'
                }]
            }]
        });
    });
    Even more strange, if I do show the collapse/expand tool, the tool for the first panel stops working.

  2. #2
    Sencha User
    Join Date
    Nov 2013
    Posts
    259
    Answers
    4

    Default

    Amazing but true, but this happens because the accordion layout container does not have a height set.

    Because I can't have a fixed height, this fixes the issue: flex: 1

    But this seems really strange, because why should not having a height (or flex, etc) break closing the first container? Just seems weird.

Posting Permissions

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