使容器可水平滚动？

Question

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

我将顶部容器水平滚动。然而，当我向右拖动时，我可以看到我的第三个框（带有单词三），但是一旦我释放，窗口就会快速向后移动。

我希望在发布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将为您完成剩余的工作。

如果这不起作用，请告诉我，我会尽量抽出时间给你写一些代码。

祝你好运，布拉德