javascript - 在 Sencha Touch 2 中创建一个可滚动的数据 View

Question

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

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

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

问题是我无法使数据 View 元素保持在移动屏幕的边界内

到目前为止，我所做的是:

使用数据 View

将内联换行设置为 false

inline: {
    wrap: false
}

将可滚动设置为“水平”

scrollable: 'horizontal'

设置如下布局:

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

数据 View 的 CSS 设置:

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

数据 View 项的 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;
}

我怎样才能实现我想要实现的目标？我很确定它与数据 View 和数据 View 元素的 CSS 有关，但我不确定是什么？

任何帮助将不胜感激。

这是完整的 Main.js View

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。您还可以将数据加载到其中:Loading a Carousel from a Store in Sencha Touch 2?