javascript - 容器固定位置但仅在水平滚动时

Question

我正在尝试实现一种特定的布局。我到目前为止的努力可以从这个fiddle example中得到预览。 .

基本上，我需要让我的左侧容器 (fixedContainer) 带有红色边框容器，以便在我水平滚动时具有固定位置并且完全可见。但是当我垂直滚动时，它需要与其余容器一起正常滚动。

当前代码:

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 500,
    width: 700,
    layout:'vbox',
    scrollable:true,
    items:[{
        xtype:'container',
        reference:'mainContainer',
        layout:{
            type:'hbox'
        },
        margin:10,
        items:[{
            xtype:'container',
            reference:'fixedContainer',
            style:'position:relative;',
            defaults:{
               style:'border: 1px solid red;',
               left:100,
               width:200,
               height:120,
               bodyPadding:10
            },
            items:[{
                html:'panel1'
            },{
                html:'panel2'
            },{
                html:'panel3'
            },{
                html:'panel4'
            }]
        },{
            xtype:'container',
            reference:'scrollContainer',
            defaults:{
               border:true,
               width:700,
               height:120,
               bodyPadding:10
            },
            items:[{
                html:'panel1'
            },{
                html:'panel2'
            },{
                html:'panel3'
            },{
                html:'panel4'
            }]
        }]
    }]
}).show();

Answer 1

如果我理解您要查找的内容，您需要更改代码中的一些布局。首先，您需要使窗口成为 layout: 'fit'，以便它适合窗口容器。

然后将您的 mainContainer 设置为 layout: border 并将两个子面板设置为 region: 'west' 和 region : 'center' 分别。这会将您的 fixedContainer 锚定到左侧，将您的 scrollableContainer 锚定到中心。

最后，将 scrollable: "horizo​​ntal" 属性添加到您的 scrollableContainer 以水平滚动。

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 500,
    width: 700,
    layout: 'fit', // Changed this
    scrollable:true,
    items:[
        {
            xtype:'container',
            reference:'mainContainer',
            layout: 'border',  // Changed this
            margin:10,
            items:[
                {
                    xtype:'container',
                    region:'west',  // Added this
                    reference:'fixedContainer',
                    defaults:{
                       style:'border: 1px solid red',
                       width:200,
                       height:120,
                       bodyPadding:10
                    },
                    items:[{
                        html:'panel1'
                    },{
                        html:'panel2'
                    },{
                        html:'panel3'
                    },{
                        html:'panel4'
                    }]
                },
                {
                    xtype:'container',
                    region: 'center',         // Added this
                    scrollable: "horizontal", // Added this
                    reference:'scrollContainer',
                    defaults:{
                       border:true,
                       width:700,
                       height:120,
                       bodyPadding:10
                    },
                    items:[{
                        html:'panel1'
                    },{
                        html:'panel2'
                    },{
                        html:'panel3'
                    },{
                        html:'panel4'
                    }]
                }
            ]
    }]
}).show();

编辑 1:

正如@Evan Trimboli 所说，第一个代码示例不考虑面板溢出时的垂直滚动，第二个示例将边框布局设置为垂直滚动。 scrollContainer 被包装到一个额外的容器中，以满足垂直滚动。其余代码与初始答案相同。

Ext.create('Ext.window.Window', {
    title: 'Hello',
    height: 500,
    width: 700,
    layout: 'fit', // Changed this
    items: [{
        xtype: 'container',
        reference: 'mainContainer',
        scrollable: 'vertical', // #edit1: Added this
        layout: 'border', // Changed this
        margin: 10,
        items: [{
            xtype: 'container',
            region: 'west', // Added this
            reference: 'fixedContainer',
            defaults: {
                style: 'border: 1px solid red',
                width: 200,
                height: 120,
                bodyPadding: 10
            },
            items: [{
                html: 'panel1'
            }, {
                html: 'panel2'
            }, {
                html: 'panel3'
            }, {
                html: 'panel4'
            }, {
                html: 'panel5'
            }]
        }, {
            xtype: 'container', //#edit1: New container here to satisfy the vertical scroll
            region: 'center',
            items: [{
                xtype: 'container',
                scrollable: "horizontal", // Added this
                reference: 'scrollContainer',
                defaults: {
                    border: true,
                    width: 700,
                    height: 120,
                    bodyPadding: 10
                },
                items: [{
                    html: 'panel1'
                }, {
                    html: 'panel2'
                }, {
                    html: 'panel3'
                }, {
                    html: 'panel4'
                }, {
                    html: 'panel5'
                }]
            }]
        }]
    }]
}).show();