Question

Usually an accordion panel will expand the first child panel and the rest panels’ title will be stacked at the bottom. But for me there is no panels’ title visible in the bottom. its just empty. See the screen shot.

But I am actually have 3 form panels there.

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        region: 'center',
        html: '<h3>Some text. Lorem ipsom?</h3>'
    },{
        region: 'east',
        layout: 'accordion',
    width: 300,
    items: [loginForm, regForm, passForm]
    }]
});

Why is this? how do I fix this?

I am using Ext 4.0.7. Full source can be found here.

Answer 1

This is caused by the header div element. Normally viewport is rendered to document.body. If it finds any existing element it can not replace it. Rather it appends the output. So what happened here is 2 components/elements are rendered. First the existing header div and then the viewport. The header div takes some space on top of the viewport. This same space is then get invisible on viewport on the bottom. To solve it, put the existing elements html as a panel in viewport. Keep its region to north.

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
            region: 'north',
            html: header.html // <------- Add html of `div#head` here
            height: 300  // <------- put a height too.

        },{
            region: 'center',
            html: '<h3>Some text. Lorem ipsom?</h3>'
        },{
            region: 'east',
            layout: 'accordion',
            width: 300,
            items: [
                    loginForm, regForm, passForm
            ]
        }]
});