Sencha: Unable to set the right layout :( - layout

Question

I'm trying to create a container that has four items, and what I need is the container to be the one that scroll instead of each individual item, also I want every item to have it's own height so if the four items are bigger than the screen the user can scroll down through the container to see the other items info...
JSFiddle:
http://jsfiddle.net/martuanez/7GV3b/
My code:
var store = {
type: 'store',
fields: ['label', 'value'],
data: [{
label: 'label',
value: 'value',
}, {
label: 'label',
value: 'value',
}, {
label: 'label',
value: 'value',
},
]
};
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: ('SF' || 'SenchaFiddle'),
launch: function () {
Ext.define('MyApp.view.Contacts.ContactsDetailsView', {
xtype: 'ContactsDetailsView',
extend: 'Ext.Container',
config: {
layout: {
type: 'vbox',
padding: 3
},
defaults: {
scrollable: {
direction: 'horizontal',
directionLock: true
},
height: 500,
layout: 'fit'
},
scrollable: 'vertical',
itemCls: 'details-list-container',
items: [{
xtype: 'dataview', //add xtype
itemId: 'detailItem',
loadingText: 'Loading keys...',
emptyText: '<div>No keys found.</div>',
store: store,
onItemDisclosure: false,
itemTpl: '<br/>item 1:<br/> {label}<br/>{value}<br/><br/>',
itemCls: 'details-list',
selectedItemCls: '',
disableSelection: true,
pressedCls: ''
}, {
xtype: 'list',
itemId: 'detailKeys',
store: store,
loadingText: 'Loading keys...',
emptyText: '<div>No keys found.</div>',
onItemDisclosure: false,
itemTpl: 'item 2: {label}{value}<br/>',
itemCls: 'details-list',
selectedItemCls: '',
disableSelection: true,
pressedCls: ''
}, {
xtype: 'list', //add xtype
itemId: 'detailuserdefs',
store: store,
loadingText: 'Loading userdefs...',
onItemDisclosure: false,
itemTpl: 'item 3: {label}{value}<br/>',
itemCls: 'details-list',
selectedItemCls: '',
disableSelection: true,
pressedCls: ''
}, {
xtype: 'list',
itemId: 'detailOthers',
store: store,
loadingText: 'Loading userdefs...',
onItemDisclosure: true,
itemTpl: 'item 4: {label}{value}<br/>',
itemCls: 'details-list'
}
]
}
});
Ext.Viewport.add(Ext.create('MyApp.view.Contacts.ContactsDetailsView'));
}
});

Answer 1

I´ve finally make it work, i set scrollable to false in the defaults section of the container and a height on the child items.
One thing that happened is that when setting scrollable to false in the childs, not in the defaults, sencha didn't recognize the height, this is a bug that they claim they have fixed already, actual version by the time i'm writting this 2.2, version i'm working on 2.1.1
Note: I also managed to set dinamic heights on each item, i did this by setting it apart and adding the items later by doing myContainer.add(itemWithDinamicHeight);
;)
Cheers!