Layout Sencha:无法设置正确的布局：(

我正在尝试创建一个包含四个项目的容器，我需要的是该容器能够滚动，而不是每个项目，而且我希望每个项目都有自己的高度，因此如果四个项目大于屏幕，用户可以向下滚动容器以查看其他项目信息

JSFiddle：

我的代码：

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'));
            }
    });

var存储={
键入：“存储”，
字段：[“标签”，“值”]，
数据：[{
标签：“标签”，
值：“值”，
}, {
标签：“标签”，
值：“值”，
}, {
标签：“标签”，
值：“值”，
},
]
};
Ext.Loader.setConfig({
已启用：true
});
外部应用程序({
姓名：（'SF'| |'SenchaFiddle'），
启动：函数（）{
Ext.define（'MyApp.view.Contacts.ContactsDetailsView'{
xtype:“ContactsDetailsView”，
扩展：“Ext.Container”，
配置：{
布局：{
键入：“vbox”，
填充：3
},
默认值：{
可滚动：{
方向：'水平'，
方向锁：正确
},
身高：500，
布局：“适合”
},
可滚动：“垂直”，
itemCls:“详细信息列表容器”，
项目：[{
xtype:'dataview'，//添加xtype
itemId:'detailItem'，
loadingText:“正在加载密钥…”，
emptyText:“未找到任何密钥。”，
店:店,，
OSCLOSURE:错误，
itemTpl:“
第1项：
{label}
{value}


”，
itemCls:“详细信息列表”，
selectedItemCls:“”，
disableSelection:正确，
按CLS:'
}, {
xtype:'列表'，
itemId:'detailKeys'，
店:店,，
loadingText:“正在加载密钥…”，
emptyText:“未找到任何密钥。”，
OSCLOSURE:错误，
itemTpl:'项目2:{label}{value}
'，
itemCls:“详细信息列表”，
selectedItemCls:“”，
disableSelection:正确，
按CLS:'
}, {
xtype:'列表'，//添加xtype
itemId:'detailuserdefs'，
店:店,，
loadingText:“正在加载userdefs…”，
OSCLOSURE:错误，
itemTpl:'item 3:{label}{value}
，
itemCls:“详细信息列表”，
selectedItemCls:“”，
disableSelection:正确，
按CLS:'
}, {
xtype:'列表'，
itemId:“其他详细信息”，
店:店,，
loadingText:“正在加载userdefs…”，
对，是的，
itemTpl:'item4:{label}{value}
，
itemCls:“详细信息列表”
}
]
}
});
添加（Ext.create（'MyApp.view.Contacts.ContactsDetailsView'）；
}
});

我终于让它工作了，我在contain的defaults部分将scrollable设置为false