1. #1
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    7
    Vote Rating
    0
    humper is on a distinguished road

      0  

    Default scrollable child inside scrollable parent?

    scrollable child inside scrollable parent?


    Hi -- is it possible to have a vertically scrollable parent container that has, inside it, a small scrollable child element? I'd like to be able to scroll only the small child box when I start my drag inside it, but if I start my drag outside the child, I'd like to move the parent.

    Currently, touching outside the child works like I expect, but if I start the drag inside the child, it also scrolls the parent. It's like I need to stop propogation of the drag event, but I'm not sure how to do that.

    Is there a workaround?

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,543
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      1  

    Default


    Like this?

    Code:
    var lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer adipiscing tristique orci, eu tristique tellus venenatis id. Aenean tincidunt felis vitae tellus sollicitudin a placerat magna semper. Quisque velit arcu, posuere et facilisis in, egestas sit amet metus. Nam condimentum consectetur gravida. Sed dictum consequat pulvinar. Donec eleifend justo sed nisl facilisis commodo. Cras tempus, tellus eu vulputate iaculis, metus odio condimentum erat, vitae molestie orci leo a lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sollicitudin lorem nec massa varius imperdiet nec ut nibh.<br /><br />In eget magna odio, nec luctus turpis. Vestibulum mollis tristique velit eget iaculis. In dapibus, massa eget auctor euismod, arcu justo pellentesque neque, eu egestas ipsum erat lobortis justo. Donec vehicula, elit a porta dapibus, dolor tellus varius erat, vitae interdum justo justo vitae est. Sed neque ligula, aliquam et tincidunt et, pulvinar et mauris. Curabitur quis tellus non nisl posuere placerat vel eget purus. Morbi placerat elementum ipsum ut dignissim.<br /><br />Aenean vitae mi non ligula mattis dapibus. Curabitur at sodales dui. Maecenas eros nisi, egestas sit amet porttitor in, porta quis lacus. Aenean sapien arcu, viverra non dignissim at, rutrum euismod libero. Nam convallis ornare placerat. Morbi in urna in metus dapibus fermentum eu eget turpis. Maecenas et leo est.<br /><br />Proin blandit, dui id tempus hendrerit, arcu velit vestibulum urna, non blandit leo dolor vitae nulla. Etiam in ante nec nisl consequat dictum scelerisque vitae sapien. Mauris id ipsum lectus, sit amet mollis erat. Phasellus mollis aliquam placerat. Vestibulum enim erat, auctor pharetra bibendum ut, convallis eu turpis. Maecenas congue, est sed facilisis dictum, nibh sem lobortis ligula, in accumsan nunc libero non nibh. Nulla facilisi. Suspendisse malesuada dui at est auctor id varius tortor congue. Aliquam dui justo, iaculis sed sodales vel, adipiscing non ligula. Nunc imperdiet fermentum metus, non venenatis mauris dapibus in. Mauris id nibh nunc. Aliquam id pretium nisl. Donec sodales molestie ipsum sed consequat. Pellentesque pharetra mauris ac magna euismod dictum.<br /><br />Curabitur ut neque sed nunc cursus lobortis. Aenean molestie blandit consectetur. Maecenas a mauris urna. Aliquam dictum rhoncus diam et fringilla. Aliquam erat volutpat. Nam accumsan tempor placerat. Phasellus at lectus quis sem volutpat vehicula eget non urna. Maecenas auctor tristique suscipit. Suspendisse potenti. Donec est ante, laoreet vel convallis eget, malesuada a eros. Fusce blandit arcu et sem ultricies eget gravida nisl auctor. Vivamus pellentesque iaculis aliquam. Duis eget turpis et mauris vehicula hendrerit.';
    
    new Ext.Container({
        fullscreen : true,
        scrollable : {
            direction     : 'vertical',
            directionLock : true
        },
        items      : [
            {
                html   : 'Long comp',
                height : 300,
                style  : 'background-color: red;' //don't use this, just using it for demo
            },
            {
                html   : 'Long comp',
                height : 300,
                style  : 'background-color: blue;' //don't use this, just using it for demo
            },
            {
                html       : lorem,
                height     : 300,
                scrollable : {
                    direction     : 'vertical',
                    directionLock : true
                }
            },
            {
                html   : 'Long comp',
                height : 300,
                style  : 'background-color: green;' //don't use this, just using it for demo
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    7
    Vote Rating
    0
    humper is on a distinguished road

      0  

    Default ahhhh directionLock

    ahhhh directionLock


    directionLock! Thank you so much; my app works perfectly now.

    Damned if this isn't some of the best software and support out there.

  4. #4
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    7
    Vote Rating
    0
    humper is on a distinguished road

      0  

    Default setting this from Architect?

    setting this from Architect?


    Only issue now is that I can't set this property from architect; there's no way that I can see to set 'scrollable' to be a Javascript Object, just a string specifying the direction.

    Is this a shortcoming of Architect that needs a bug report, or is it just that architect lags a little behind the libraries and I should patiently wait for a fix that's already in the pipe?

  5. #5
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,543
    Vote Rating
    872
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Quote Originally Posted by humper View Post
    Is this a shortcoming of Architect that needs a bug report, or is it just that architect lags a little behind the libraries and I should patiently wait for a fix that's already in the pipe?
    I would pop over to that forum and ask about it. They really need to allow it.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha Premium Member
    Join Date
    Jun 2012
    Posts
    7
    Vote Rating
    0
    humper is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    I would pop over to that forum and ask about it. They really need to allow it.
    Turns out an architect bug was filed on this just yesterday!

    I was able to work around it from inside Architect with an override, but obviously an object editor inside architect would be better, since it meant I had to take one of my generic containers out of its parent and promote it to a custom class just to create the override.

Thread Participants: 1

Tags for this Thread