1. #1
    Sencha User bastard's Avatar
    Join Date
    Aug 2011
    Location
    I'm in Cali baby!
    Posts
    65
    Vote Rating
    4
    Answers
    2
    bastard is on a distinguished road

      0  

    Default Unanswered: stop independent scrolling within container

    Unanswered: stop independent scrolling within container


    I have a parent container which contains two child containers using vbox layout. I don't want the child containers to scroll independently. When I scroll any part of the parent container vertically, I want it all to scroll. Currently, the the first child container is acting as though it is docked at the top and only the second child container is scrolling.

    Here is my code.
    Code:
    {
                    xtype: 'container',
                    id: 'ContactDetailContainer',     // PARENT CONTAINER
                    itemId: 'ContactDetailContainer',
                    layout: {
                        type: 'vbox'
                    },
                    items: [
                        {
                            xtype: 'toolbar',
                            docked: 'top',
                            id: 'ContactDetailsHeaderToolbar'
                        },
                        {
                            xtype: 'toolbar',
                            docked: 'bottom',
                            id: 'ContactDetailsFooterToolbar',
                            layout: {
                                pack: 'end',
                                type: 'hbox'
                            },
                            items: [
                                {
                                    xtype: 'button',
                                    id: 'contactdetailsbackbutton',
                                    itemId: 'contactdetailsbackbutton',
                                    ui: 'back',
                                    text: 'Back'
                                },
                                {
                                    xtype: 'spacer'
                                }
                            ]
                        },
                        {
                            xtype: 'container',
                            id: 'ContactDetailsSummaryContainer',   // CHILD CONTAINER #1
                            itemId: 'ContactDetailsSummaryContainer',
                            width: '100%',
                            layout: {
                                type: 'hbox'
                            },
                            items: [
                                {
                                    xtype: 'image',
                                    border: 2,
                                    height: '100px',
                                    id: 'ContactImage',
                                    itemId: 'ContactImage',
                                    margin: '10px',
                                    style: 'border-color: #ccc; border-style: solid;',
                                    width: '100px',
                                },
                                {
                                    xtype: 'container',
                                    id: 'ContactDetailsSummaryInfoContainer',  
                                    margin: '10px',
                                    width: '100%',
                                    layout: {
                                        type: 'vbox'
                                    },
                                    items: [
                                        {
                                            xtype: 'label',
                                            html: 'full name goes here',
                                            id: 'ContactDetailsFullnameLabel',
                                            itemId: 'ContactDetailsFullnameLabel'
                                        },
                                        {
                                            xtype: 'label',
                                            html: 'position',
                                            id: 'ContactDetailsPositionLabel',
                                            itemId: 'ContactDetailsPositionLabel'
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            xtype: 'formpanel',
                            height: '100%',
                            id: 'ContactDetailsFormPanel', // CHILD CONTAINER #2
                            ui: '',
                            items: [
                                {
                                    xtype: 'fieldset',
                                    id: 'ContactFieldSet',
                                    itemId: 'ContactFieldSet',
                                    ui: '',
                                    title: 'Contact Info',
                                    items: [
                                        {
                                            xtype: 'textfield',
                                            disabled: true,
                                            id: 'emailfield',
                                            itemId: 'emailfield',
                                            label: 'Email'
                                        },
                                        {
                                            xtype: 'textfield',
                                            disabled: true,
                                            id: 'phonefield',
                                            itemId: 'phonefield',
                                            label: 'Phone'
                                        },
                                        {
                                            xtype: 'textfield',
                                            disabled: true,
                                            id: 'locationfield',
                                            label: 'Location'
                                        },
                                        {
                                            xtype: 'textfield',
                                            disabled: true,
                                            id: 'twitteridfield',
                                            itemId: 'twitteridfield',
                                            label: 'Twitter'
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
    I suspect the problem maybe due to the height settings with the child containers. Although I've not been able to find it.
    Last edited by bastard; 9 Jul 2013 at 9:34 AM. Reason: updated for better description

  2. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    I tried the sample you gave and I noticed that you did not give any of the child elements a flex config. Without those, only the parent container's html content would be in between the docked toolbars (the child containers were not showing up). I added a flex property to both and reconfigured some scrollable options. I'm hoping it can help you out:
    Code:
    {
        xtype: 'container',
        id: 'ContactDetailContainer',     // PARENT CONTAINER
        itemId: 'ContactDetailContainer',
        fullscreen: true,
        scrollable: {
            type: 'vertical',
            directionLock: true
        },
        layout: 'vbox',
        items: [
            {
                xtype: 'toolbar',
                docked: 'top',
                id: 'ContactDetailsHeaderToolbar'
            },
            {
                xtype: 'toolbar',
                docked: 'bottom',
                id: 'ContactDetailsFooterToolbar',
                layout: {
                    pack: 'end',
                    type: 'hbox'
                },
                items: [
                    {
                        xtype: 'button',
                        id: 'contactdetailsbackbutton',
                        itemId: 'contactdetailsbackbutton',
                        ui: 'back',
                        text: 'Back'
                    },
                    {
                        xtype: 'spacer'
                    }
                ]
            },
            {
                xtype: 'container',
                id: 'ContactDetailsSummaryContainer',   // CHILD CONTAINER #1
                itemId: 'ContactDetailsSummaryContainer',
                flex: 1,
                layout: {
                    type: 'hbox'
                }
                items: [
                    {
                            xtype: 'image',
                            border: 2,
                            height: '100px',
                            id: 'ContactImage',
                            itemId: 'ContactImage',
                            margin: '10px',
                            style: 'border-color: #ccc; border-style: solid;',
                            width: '100px',
                        },
                        {
                            xtype: 'container',
                            id: 'ContactDetailsSummaryInfoContainer',  
                            margin: '10px',
                            width: '100%',
                            layout: {
                                type: 'vbox'
                            },
                            items: [
                                {
                                    xtype: 'label',
                                    html: 'full name goes here',
                                    id: 'ContactDetailsFullnameLabel',
                                    itemId: 'ContactDetailsFullnameLabel'
                                },
                                {
                                    xtype: 'label',
                                    html: 'position',
                                    id: 'ContactDetailsPositionLabel',
                                    itemId: 'ContactDetailsPositionLabel'
                                }
                            ]
                        }  
                ],
                html: 'Child 1'
            },
            {
                xtype: 'formpanel',
                id: 'ContactDetailsFormPanel', // CHILD CONTAINER #2
                ui: '',
                scrollable: false,
                flex: 1,
                items: [
                    {
                        xtype: 'fieldset',
                        id: 'ContactFieldSet',
                        itemId: 'ContactFieldSet',
                        ui: '',
                        title: 'Contact Info',
                        items: [
                            {
                                xtype: 'textfield',
                                disabled: true,
                                id: 'emailfield',
                                itemId: 'emailfield',
                                label: 'Email'
                            },
                            {
                                xtype: 'textfield',
                                disabled: true,
                                id: 'phonefield',
                                itemId: 'phonefield',
                                label: 'Phone'
                            },
                            {
                                xtype: 'textfield',
                                disabled: true,
                                id: 'locationfield',
                                label: 'Location'
                            },
                            {
                                xtype: 'textfield',
                                disabled: true,
                                id: 'twitteridfield',
                                itemId: 'twitteridfield',
                                label: 'Twitter'
                            }
                        ]
                    }
                ]
            }
        ]
    });
    I created a fiddle of it but it doesn't seem to want to save.

  3. #3
    Sencha User bastard's Avatar
    Join Date
    Aug 2011
    Location
    I'm in Cali baby!
    Posts
    65
    Vote Rating
    4
    Answers
    2
    bastard is on a distinguished road

      0  

    Default


    Although that is moving closer to a solution, the problem with this solution is that the Child Container#1 now takes up more space than it needs.

    What I was looking to do to make sure that the Child Container#1 takes up no more space than it needs and then set the height of Child Container #2 to 100%.

Thread Participants: 1

Tags for this Thread