How to implement slide navigation menu in sencha touch

Question

Instead of clicking on a button and showing the slide navigation menu, how to show the menu by just sliding the screen. Say for example the menu button is positioned on the top left corner. When I swipe the screen from left to right the menu must open likewise it should close if I swipe from right to left.

Answer 1

You could add a swipe listeners to the Viewport and call the events accordingly

Ext.Viewport.bodyElement.on('swipe', function (event, node, options){
    var button = Ext.ComponentQuery.query('button');
    if (event.direction == 'right') {
        button[0]._handler();
    } else {
        button[1].fireAction('tap');
    }

});

Fiddle: https://fiddle.sencha.com/#fiddle/c1p

• Obviously this fiddle has bugs and should only be used so you can have an idea of how to implement your solution.