extjs 6.0 dataview水平滚动

Question

我想创建一个水平滚动数据视图，通过拖放可以重新排列（可以从树中删除项目）。但是我无法使其水平滚动。

这是代码布局：

{
    xtype: 'panel',
    region: 'south',
    split: true,
    height: 210,
    layout: 'fit',
    collapsible: true,
    title: 'Playlist',
    items: [
        {
            xtype: 'dataview',
            scrollable: {
                direction: 'horizontal'
            },
            itemSelector: 'div.project-playlist-item',
            itemTpl: [
                '<div class="project-playlist-item" style="margin: 5px; float: left;border: 1px solid #DDDDDD; width: 124px; height: 150px; position: relative; padding: 1px;">',
                '    <div style = "float: left; position: absolute; right: 0px; top: 0px; z-index: 1000; padding: 5px; color: #ffffff; font-weight: bold;">',
                '        <img src = "/img/flaticons/settings.png" />',
                '    </div>',
                '    <img src = "http://www.placehold.it/120x120/aaaaaa/ffffff" />',
                '    <div style = "text-align: center; font-size: 12px;">{slideName}</div>',
                '</div>'
            ],
            store: 'Projects.Editor.GetSlideList',
            listeners: {
                afterrender: 'onDataviewAfterRender'
            }
        }
    ]
};

这是afterrender函数：

onDataviewAfterRender: function(component, eOpts) {
    debugger;
    var me = component, dropTarget = component.el.dom;
    Ext.create('Ext.dd.DropTarget', dropTarget, {
        ddGroup: 'contents',
        notifyEnter: function(ddSource, e, data) { //when the drag object enters the form panel
            //me.body.stopAnimation();

        },
        notifyDrop : function(ddSource, e, data){
            //get the selected record
            var selectedRecord= ddSource.dragData.records[0];
            // Load the record into the form
            //        me.getForm().loadRecord(selectedRecord);
            alert('dropped');
            return true;

        }
    });
}

如何使其水平滚动？