sencha-touch-2 - 使容器水平滚动？

Question

我正在创建一个包含3000px三个子容器的宽容器，每个子容器都带有flex:1.

我使顶部容器水平滚动。但是，当我向右拖动时，我可以看到我的第三个框（带有单词 3），但是一旦我松开，窗口就会弹回。

我希望在发布Sencha Fiddle后右侧的内容仍然可见。

---

资源：

Ext.Loader.setConfig({
    enabled: true
});

Ext.application({
    name: "Sencha",

    launch: function() {

        var tabPanel = Ext.create('Ext.tab.Panel', {
            layout: 'card',
            padding: 2,
            tabBarPosition: 'bottom',

            items: [{
                id: 'tab1',
                title: 'Home',
                layout: 'hbox',
                xtype: 'container',
                width: 3000,
                scrollable: {
                    direction: 'horizontal'
                },
                items: [{
                    xtype: 'panel',
                    layout: 'vbox',
                    flex: 1,
                    items: [{
                        html: "vb1",
                        flex: 1

                    }, {
                        html: "vb2",
                        flex: 1
                    }]
                }, {
                    html: "two",
                    flex: 1
                }, {
                    html: 'three',
                    flex: 1
                }],
                iconCls: 'home'
            }]
        });
        Ext.Viewport.add(tabPanel);
    }
});

Answer 1

我看不到您的小提琴，但是没有编写代码，我认为您想要的是一个带有 vbox 的面板，其中包含两个布局为'Card' 的面板。

然后，您可以将任意数量的项目放入面板，Sencha 将为您完成剩下的工作。

如果这不起作用，请告诉我，我会试着找时间给你写一些代码。

祝你好运，布拉德