1

それぞれ3000pxflex:1.

トップコンテナを横スクロール可能にしました。ただし、右にドラッグすると、3 番目のボックス (単語 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);
    }
});
4

1 に答える 1