Slide menu with a scrollable view

I am trying a simple way of implementing a slide menu in a app with scrollableview

The idea is that when we swipe from the edge of the screen it should display the side menu elseit should show a different view

here is my code:

<Alloy>
 
    <Window class="container">
    <ScrollableView id="sview" showPagingControl="true">
        <View id="view1" backgroundColor="#123">
                    <Label>View 1</Label>
                </View>
                <View id="view2" backgroundColor="#246">
                    <Label>View 2</Label>
                </View>
                <View id="view3" backgroundColor="#48b">
                    <View id="view4"><Label>menu will be shown here</Label></View>
                    <View id="view5"><Label>5</Label></View>
                </View>
    </ScrollableView>
 
    </Window>
</Alloy>

controller:

$.sview.addEventListener("touchstart", function(e) {
    //Ti.Api.debug("touch start");
 if(e.x>Ti.Platform.displayCaps.platformWidth-15){
    $.view4.show();
    $.view5hide();
 }
 else
 {
    $.view5.show();
    $.view4.hide();
 }
});
 
$.index.open();

Now right edge of the screen on view 2 it should ideally display view4 and it should display view5 in other case. But The event is not getting fired and i see both the views superimposed on each other. can someone tell me why?