在Sencha Touch 2中创建可滚动的数据视图

Question

我正在尝试创建一个可以向左或向右滑动的水平滚动列表（类似于Tinder，但可以选择返回上一个内容）

这就是我要创建的内容： http : //postimg.org/image/5jcurf1q1

这是到目前为止我能得到的： http : //postimg.org/image/4o7h33w9h/

问题是我无法使dataview项停留在移动屏幕的边界内

我到目前为止所做的是：

使用数据视图

将内联换行设置为false

inline: {
    wrap: false
}

将滚动条设置为“水平”

scrollable: 'horizontal'

设置以下布局：

layout: {
    type : 'vbox',
    pack : 'center',
    align: 'stretch'
},

为dataview设置的CSS：

.dataview-base {
    background-color: #cacacd;
}

为dataview项目设置的CSS：

.dataview-item {
    border-right: 1px solid #000;
    border-left: 1px solid #000;
    border-top: 5px solid #59535E;
    border-bottom: 5px solid #59535E;
    padding:20px;
    margin: 0px 20px 0px;
}

我怎样才能达到我想要达到的目标？ 我很确定它与dataview的CSS和dataview项有关，但是我不确定是什么？

任何帮助将不胜感激。

这是完整的Main.js视图

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.DataView'
    ],
    config: {
        tabBarPosition: 'bottom',
        items: [
            {
                xtype: 'dataview',
                height: '100%',
                styleHtmlContent: true,
                inline: {
                    wrap: false
                },
                itemCls: 'dataview-item',
                baseCls: 'dataview-base',
                itemTpl: [
                    '<div class="arHeadline">',
                    '    {Headline}',
                    '</div>',
                    '<div class="arbyline">',
                    '    {Author}',
                    '</div>',
                    '<div class="arcontent">',
                    '    {Content}',
                    '</div>'
                ],
                store: 'Discovers',
                scrollable: 'horizontal',
                layout: {
                    type : 'vbox',
                    pack : 'center',
                    align: 'stretch'
                },
            },
            {
                xtype: 'toolbar',
                docked: 'top',
                title: 'Summary'
            }
        ]
    }
});

谢谢

Answer 1

我的建议是使用carousel而不是dataview 。 您还可以将数据加载到其中： 从Sencha Touch 2中的商店加载轮播吗？