Sencha Touch：点击面具事件答案

【问题标题】：Sencha Touch : Tapping on mask eventSencha Touch：点击面具事件
【发布时间】：2015-08-19 10:11:07
【问题描述】：

您好，我无法解决此问题，如果视口被遮盖，即使在遮罩上也找不到任何方法来找到水龙头。我正在使用菜单进行幻灯片导航，当菜单打开时，我现在在视图上应用蒙版，如果我点击蒙版视图，菜单应该关闭。我无法在面具上获得点击事件。有什么办法吗？

  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',


    });
}

【问题讨论】：

您可以为containers 使用masked 配置，并在其配置中使用LoadMask 放置您想要的侦听器

标签： javascript extjs sencha-touch-2 loadmask

【解决方案1】：

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

            side: 'left',
            reveal: false,


        });

这可以帮助您掩盖视口。点击它会关闭菜单

【讨论】：

【解决方案2】：

在主控制器中添加这个来监听面具上的点击事件

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

【讨论】：