Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    1
    meyerovb is on a distinguished road

      0  

    Default [OPEN-150] Scrollable sortable

    [OPEN-150] Scrollable sortable


    If the sortable elements overflow the viewable space, how do you make it auto-scroll as you drag elements out of the viewable area? For an example of what I want, in iphone os go to settings>general>international>keyboards, add a bunch of keyboards, then click edit and sort an item out of the viewable area, it auto-scrolls as you sort.

    Code:
    Ext.setup({onReady: function () {
    var s = "";
    for (var x = 0; x < 200; x++)
        s += "<div><span style='float:right;'>DRAG</span>Item" + x + "</div>";
    new Ext.Panel({ fullscreen: true, scroll: 'vertical', html: "<div id='sortable'>" + s + "</div>" });
    new Ext.util.Sortable('sortable', { direction: 'vertical', constrain: true, itemSelector: 'div', handleSelector: 'span' });
    return;
    }});

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,164
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Currently there's no built in way to do it. The best place to include it would be inside Draggable, so it detects if the position is within the scrolling threshold (say, 10px from the edge or whatever you set it to) then scrolls in the appropriate direction.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    1
    meyerovb is on a distinguished road

      0  

    Default


    This functionality seems like it should be baked in... turn the iphone sideways on the out of the box sortable example and you can no longer see the bottom of the list. Is it possible to move this to the bugs forum and track it as such?

  4. #4
    Ext User
    Join Date
    Jul 2010
    Posts
    24
    Vote Rating
    0
    uxdan is on a distinguished road

      0  

    Default Pinch and Drag / Off-screen

    Pinch and Drag / Off-screen


    I've found the example code to do the pinch. I've also found the example code to enable drag on an element. But what is the easiest way to do these together?

    Also, is there any way to allow the draggable element to be dragged off screen? In other words, not be limited by the window / viewport edge?

  5. #5
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    18
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    I'll get it in Trac and move the thread over.

  6. #6
    Sencha - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    1
    meyerovb is on a distinguished road

      0  

    Default


    Just a note, you may want to consider fixing this in tandem with bug 144

  7. #7
    Sencha - Community Support Team
    Join Date
    Jun 2010
    Posts
    220
    Vote Rating
    1
    meyerovb is on a distinguished road

      0  

    Default


    The draggable element going off the screen is covered in bug 150, you can track it in the bugs forum, search for "[OPEN-150] Scrollable sortable".

    Unfortunately, pinch and drag cannot be concurrently combined. This is because drag overrides the touchmove event and stops it from executing up the chain, where the pinch logic lives. However, I did discover a bug in that disabling the draggable only detaches the tapEvent, not the touchmove or touchend events. In the below example, you can drag the box, clicking Broken disables the drag but you still cannot pinch resize the box. Click Works and the drag is correctly disabled and you can pinch-resize the box. Once this bug has been corrected you can disable the draggable and pinch will once again fire. Sencha team, please move this thread to the bugs forum and add a Trac ticket for the incomplete disable dragging method.

    Code:
    <html>
    <head>
        <title></title>
        <link href="/css/ext-touch.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="/js/sencha/ext-touch-debug.js"></script>
        <script type="text/javascript">
            Ext.setup({ onReady: function () {
                Ext.fly('panel').on({
                    scope: { scale: 1 },
                    pinchstart: function () { this.startScale = this.scale; },
                    pinch: function (e, t) {
                        this.scale = e.scale * this.startScale;
                        t.style.webkitTransform = 'scale(' + this.scale + ')';
                    }
                });
                window.drag = new Ext.util.Draggable('panel');
            }
            });
            
            function disableDrag() {
                drag.el.un('touchmove', drag.onTouchMove, drag);
                drag.el.un('touchend', drag.onTouchEnd, drag);
            }
        </script>
    </head>
    <body>
        <div id="panel" style="background-color: #ddd; width: 200px; height: 200px; 
                                position: absolute; left: 100px;">
        </div>
        <a href="javascript:drag.disable();">Broken</a><br /><br />
        <a href="javascript:disableDrag();">Works</a>
    </body>
    </html>

  8. #8
    Ext User
    Join Date
    Jul 2010
    Posts
    24
    Vote Rating
    0
    uxdan is on a distinguished road

      0  

    Default


    it wasn't perfect but i managed to get some similar functionality by setting the container panel to scrollable: both, and put the pinch event code on the element inside. It's not exactly perfect, because if you zoom too much then you push the limits of the scroll...

    But yeah the problem still exists. Thanks!

Similar Threads

  1. Replies: 1
    Last Post: 28 Jul 2010, 11:35 AM
  2. [OPEN-144] Scrolling a sortable breaks
    By meyerovb in forum Sencha Touch 1.x: Bugs
    Replies: 0
    Last Post: 19 Jul 2010, 2:24 PM
  3. Replies: 2
    Last Post: 31 May 2010, 1:51 PM
  4. Replies: 1
    Last Post: 4 Feb 2010, 9:03 AM

Thread Participants: 3

Tags for this Thread