[Q] How to get stateful accordion to work?

Hi gurus

ExtJS 4.2.2

I have this simple portal that is supposed to work as an entrance to a number of custom made database tools.

I want the front page to be an accordion layout and I want it to be stateful so that it remembers the users last choice.

But I can't get it to work :-( Below's the single item in my viewport. Can anyone explain to me why the first of my three accordion items always renders as expanded and the two others collapsed?

Thanks in advance

Code:

{
        xtype: 'panel',
        padding: '100px 0 0 0',
        border: false,
        stateful: true,
        stateId: 'toolsPanel',
        layout: {
            type: 'hbox',
            align: 'center',
            pack: 'center'
        },
        flex: 1,
        items: [{
            xtype: 'panel',
            align: 'center',
            border: false,
            width: 600,
            height: 500,
            stateful: true,
            stateId: 'toolsAccordion',
            layout: {
                type: 'accordion',
                titleCollapse: false,
                animate: true,
                activeOnTop: true,
                hideCollapseTool: true
            },
            defaults: {
                layout: {
                    type: 'vbox'
                },
                overflowY: 'auto'
            },
            items: [
                { xtype: 'oracleToolsPanel', stateful: true, stateId: 'oracleTools' },
                { xtype: 'sqlServerToolsPanel', stateful: true, stateId: 'sqlserverTools' },
                { xtype: 'db2ToolsPanel', stateful: true, stateId: 'db2Tools' }
            ]
        }]
    }

[Q] How to get stateful accordion to work?