容器固定位置但仅在水平滚动上

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: "horizontal" 属性添加到您的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();

EDIT1：

正如@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();

Answer 2

好的，这是我解决这个问题的有效解决方案

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var horizontalScroll = 0
        var gridwindow = Ext.create('Ext.window.Window', {
            referenceHolder: true,
            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; z-index:10; box-shadow: -20px 0px 0px 1px #fff;',
                    defaults: {
                        style: 'border: 1px solid red; outline',
                        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();

        gridwindow.body.on('scroll', function (event) {
            var scrollLeft = event.target.scrollLeft;
            if (horizontalScroll !== scrollLeft) {
                var fixedContainer = this.lookup('fixedContainer');
                fixedContainer.el.translate((scrollLeft), 0)

            }
            horizontalScroll = scrollLeft;

        }, gridwindow);
    }
});

https://fiddle.sencha.com/#view/editor&fiddle/28ug

感谢大家的努力。希望这足以帮助遇到类似问题的其他人。