Home » Javascript » Container fixed position but only on horizontal scroll

Container fixed position but only on horizontal scroll

Posted by: admin November 1, 2017 Leave a comment

Questions:

I am trying to achieve a specific kind of layout. My effort so far can be previewed from this fiddle example.

Basically I need to make my left container (fixedContainer) with red border containers, to have fixed position and be fully visible when I scroll horizontally. But when I scroll vertically it needs to scroll normally with rest of the containers.

Current code:

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();
Answers:

If I understood what you are looking for, you need to change a few layouts in your code. First you need to make your window a layout: 'fit', so that it’s child’s fit into the window container.

Then set your mainContainer to a layout: border and set both the child panels to region: 'west' and region: 'center' respectively. This anchors your fixedContainer to the left and your scrollableContainer to the center.

Finnally, add the scrollable: "horizontal" property to your scrollableContainer to scroll horizontally.

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:

As @Evan Trimboli stated, the first code sample did not respect the vertical scrolling on panels overflow, this second sample sets the border layout to scroll vertically. The scrollContainer is wrapped into an additional container that will satisfy the vertical scroll. The remaining code stays the same from the initial answer.

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();

Questions:
Answers:

Ok this is my working solution for this issue

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

Thanks all for the effort. Hopefully this is good enough to help someone else with a similar problem.