Panel inside a Panel: autoScroll not working

Question

I have this view (DetailsContainer, first class in code section of this question) with two items inside (MetaDataPanel, Preview), but autoscroll doesn't work in MetaDataPanel (follow the code). So when I put some items inside MetaDataPanel, autoscroll doesn't work... PS: the content of MetaDataPanel is generated dinamically adding element to this Panel... Any suggests?

Ext.define('DP.view.DetailsContainer' ,{ 
id: 'DetailsContainer',
extend: 'Ext.Panel',
alias : 'widget.DetailsContainer',
collapsible: true,
// margins:'5 0 5 5',
split:true,
layout: {
    type: 'accordion',
    align: 'stretch',
    pack  : 'start'
},

initComponent: function() {


    Ext.apply(this, {

        items: [{
            xtype: 'MetaDataPanel',
            flex:1
        },{
            xtype: 'Preview',
            flex:2     
        }]
    });

    this.callParent(arguments);
}
});


Ext.define('DP.view.MetaDataPanel' ,{
id: 'MetaDataPanel',
extend: 'Ext.Panel',
alias : 'widget.MetaDataPanel',
title : 'MetaDati', 
layout: 'fit',
autoScroll:true, //TODO: autoscroll not working
initComponent: function() {
    Ext.apply(this, {
        items: [{
            xtype: 'component' ,
            html: 'Nessun File o Cartella selezionata. Selezionare un elemento per visualizzare i metadati!',
            margin: 5,
            style: {
                color: '#000000'
            }
        }]
    });
    this.callParent(arguments);
}
});

Answer 1

It doesn't make sense to specify autoScroll on a container with a fit layout. The child will always fit the size of the container, it will never be bigger, so you can never scroll. You want the autoScroll on the inner component.