Search code examples
extjsextjs4extjs4.2extjs5

Align : 'stretch' not working for Accordion layout

I have included an 'accordion' layout, which is included in 'west' region of a 'border' layout. But the align : 'stretch' property is not working for the accordion layout.

Accordion Layout

var user_menu_items = new Ext.Panel({
        layout: 'accordion',
        height: 565,
        align: 'stretch',
        id: 'usermenu',
        items: [{
                layout: 'fit',
                title: 'Configuration',
                id: 'menulist1',
                html: 'Group1 Content',
                collapseFirst: true
            }, {
                title: 'User Action Group2',
                id: 'menulist2',
                html: 'Group2 Content'
            }, {
                title: 'User Action Group3',
                id: 'menulist3',
                html: 'Group3 Content'
            }]
    });

Border Layout

Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [{
                layout: 'border',
                defaults: {
                    collapsible: false,
                    split: false,
                    bodyStyle: 'padding:2px'
                },
                items: [{
                        title: 'USER MENU',
                        region: 'west',
                        margins: '5 0 0 0',
                        cmargins: '5 5 0 0',
                        width: 225,
                        minSize: 100,
                        maxSize: 250,
                        collapsible: true,
                        collapsed: false,
                        bodyStyle: 'padding:0px',
                        items: [user_menu_items]
                    }]
              }],
        renderTo: Ext.getBody()
    });

I am using extjs-4.2.2

enter image description here

Solution

  • you can try below:

    var user_menu_items = new Ext.Panel({
        layout: 'accordion',
        //height: 565,
        //align: 'stretch',
        id: 'usermenu',
        items: [{
                layout: 'fit',
                title: 'Configuration',
                id: 'menulist1',
                html: 'Group1 Content',
                collapseFirst: true
            }, {
                title: 'User Action Group2',
                id: 'menulist2',
                html: 'Group2 Content'
            }, {
                title: 'User Action Group3',
                id: 'menulist3',
                html: 'Group3 Content'
            }]
    });


Ext.create('Ext.container.Viewport', {
        layout: 'fit',
        items: [{
                layout: 'border',
                defaults: {
                    collapsible: false,
                    split: false,
                    bodyStyle: 'padding:2px'
                },
                items: [{
                        title: 'USER MENU',
                        region: 'west',
                        margins: '5 0 0 0',
                        cmargins: '5 5 0 0',
                        width: 225,
                        minSize: 100,
                        maxSize: 250,
                        collapsible: true,
                        collapsed: false,
                        bodyStyle: 'padding:0px',
                        layout: 'accordion', // <------- ADD THIS LINE TO WEST PANEL.------------------>
                        items: [user_menu_items]
                    }]
              }],
        renderTo: Ext.getBody()
    });