Results 1 to 7 of 7

Thread: Swiping/Scrolling on child panel triggers same event-listener on parent

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    154
    Answers
    8

    Default Swiping/Scrolling on child panel triggers same event-listener on parent

    How do you prevent a parent-component (parent-panel,...) to scroll if its child-panel gets scrolled?

    Same with swiping... I try to scroll horizontally on a child parent and in the same time the parent panel gets the swipe event triggered.

    How can I define events and scrolling on child-components without triggering the parent-component event at the same time?

    Normally the child is in foreground and the parent should be in background, so that only the component in the foreground should get the event...? But how - it seems its not working like this?

  2. #2
    Sencha User
    Join Date
    Mar 2012
    Posts
    28

    Default

    try listening for the event you want on the child, and then call event.stopPropagation()

  3. #3
    Sencha User
    Join Date
    May 2012
    Posts
    154
    Answers
    8

    Default

    ok thanks, but what about the scrolling-event?

    I just define it as scrollable:true (or maybe scrollable: { direction: 'horizontal',
    directionLock: true
    }



    And the problem is that scrolling a child component/container/panel causes the parent container/panel.. to also scroll... so both child and parent scroll which is not good ;-)

    Do you know how to prevent the scrolling-event to trigger the parent-containers scrolling event? Please :-)

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    154
    Answers
    8

    Default

    well I was trying to apply event.stopPropagation() to the scroll event, but I can't get the scroll event

    this works:
    horizontalPanel.body.on({ doubletap: function () { console.log('doubletap'); } });


    this doesn't work:
    horizontalPanel.body.on({ scroll: function () { console.log('scroll'); } });

    this also doesn't work:
    horizontalPanel.body.on({ scrollstart: function () { console.log('scrollstart'); } });


    any idea on how to get the scroll event?

  5. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    28

    Default

    on a component you have to call:
    component.getScrollable().getScroller()

    this is the component that dispatches the scroll event

  6. #6
    Sencha User
    Join Date
    May 2012
    Posts
    154
    Answers
    8

    Default

    thanks a lot, it worked

    Code:
    horizontalPanel.getScrollable().getScroller().on({scroll: function () {				
    					console.log('scroll');
    				
    				} });

    however, i still can't prevent the parent panel to trigger its swipe event... stopPropagation didn't work for me. I guess you have to find a way to do something in the swipe-listener like to make sure that the tap happened on its body or maybe check if it's the active item or item that was tapped and only then execute its swipe-code...

  7. #7
    Sencha User
    Join Date
    May 2012
    Posts
    154
    Answers
    8

    Default

    found the solution.

    you can set scrollable on the parent to false, to prevent the parent-container to also scroll.

    however in my case, this ended up in not showing a sheet within the parent-container,

    so what I had to do was setting scrollable in the parent-container to only horizontal
    Code:
    scrollable: {
                direction: 'horizontal',
            },.....

    and then in the initialize method completely deactivate it:

    Code:
    initialize: function() {
    ...
    Ext.getCmp('theparentcontainer').getScrollable().getScroller().setDisabled(true);

    as i said, i tried to immediately deactivate scrolling in the parent, but that caused the parent-container to not show one of its items (a sheet).... so the workaround with the initialize function

    hope it helps for some1 else maybe :-)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •