Question

We’re doing a bootstrap-style iPhone demo, and are more jQuery folks than Ext, and accordingly are having some issues with events and syntax with Sencha Touch.

I attached an itemswipe event to a list item, and when it’s swiped, it performs the tasks asked, but it also jars the list vertically as you swipe. I’d rather it didn’t.

Is there a “stop scrolling” parameter I could add to function below? Apologies if I’m missing the obvious – between the documentation and the deadline, that could be the case.

$itemswipe: function (list, index, element, event) {

        if (event.direction =="right") {

            //tasks

        });

        }

   },

Thanks!

Answer 1

I got it to work like this:

var thisController = this;
this.control({
        '.myList' : {
            itemswipe : function(dataView, index, target, e, eOpts) {
                console
                        .log('myList itemSwipe '
                                + index);

                thisController.getMyList().setScrollable(false);
            }
        }
    });

This is all defined in the controller’s init function. I save a reference to the controller because sometimes it is out of scope inside of the event handler. This way you can reference the controller. I also have ‘myList’ defined about as a ref:

{
    ref : 'myList',
    selector : '.myList'
}

This will at least stop your list from scrolling. You can reenable it late (set it to true) when you are done with whatever you want to do when an item swipe is detected. This works on Sencha Touch 2. Let me know if you need more info!