Sencha Touch : Tapping on mask event

Question

Hi I am unable to solve this issue and could not find any way to find the tap even on the mask if the viewport is masked. I am using menu for slide navigation , when the menu is open I am applying mask on the view now if I tap on the masked view the menu should close. I am unable to get the tap event on the mask.Is there any way?

  listeners: {
        initialize: function(){
            Ext.Viewport.setMenu(this.createMenu() ,{
                side: 'left',
                reveal: true,


            });
        }
    }
},

createMenu: function(){

    var items = [
        {
            xtype:'button',
            text:'Home',
            ui: 'mainmenu',
            icon: 'resources/icons/setting.png',
            margin: '100px 0 0 0',


                listeners: {
        tap: function(){

             if(Ext.Viewport.getMenus().left.isHidden()){
                             Ext.Viewport.showMenu('left');


                        }
                        else
                        {
                            Ext.Viewport.hideMenu('left');
                             Ext.Viewport.setActiveItem({xtype: 'main'});
                             Ext.Viewport.setMasked(false);
                        }
        }
    }
        },
        {
            xtype:'button',
            text:'Videos',
            ui: 'mainmenu',
            icon: 'resources/icons/setting.png',
            listeners: {
        tap: function(){
             Ext.Viewport.setActiveItem({xtype: 'videolist'});
             if(Ext.Viewport.getMenus().left.isHidden()){
                            Ext.Viewport.showMenu('left');

                        }
                        else
                        {
                            Ext.Viewport.hideMenu('left');
                             Ext.Viewport.setMasked(false);

                        }
          }
         }
        }
    ];

    return Ext.create('Ext.Menu', {


        width: 250,
        height:'100%',
        scrollable: false,
        items: items,
        id: 'mainmenu',


    });
}

Answer 1

Ext.Viewport.setMenu(this.createMenu() ,{

            side: 'left',
            reveal: false,


        });

This May help you to mask the Viewport. and tapping on it will close the Menu

Answer 2

add this in the main controller to listen the tap event on mask

control:{
    'mask': {
        tap: function(){
            if( !Ext.Viewport.getMenus().left.isHidden() ){
                alert('Mask - Tap Event - hideMenu');
            }
        }
    }
}