sencha touch 的Ext.menu组件学习

Sencha menu学习

http://cdn.sencha.io/touch/sencha-touch-2.3.1/examples/kitchensink/index.html#demo/menus  

这是官网demo，组件是Ext.menu

效果如图

然后我自己按照自己的需求实现是，按照demo里的源码实现不怎么理想，可能是我还没理解成功。后来自己按照其他方法实现了这个效果。

 点击提醒按钮，弹出左边menu框

左边是自定义的menu组件，继承的Ext.menu，右边实现了遮罩，点击遮罩会隐藏掉menu框。

下面是代码的实现。

//点击提醒按钮，从左边滑出menu组件

btnMenu:function(){

       var viewport = Ext.Viewport.down('menuview');//自定义的menu组件

       var menu = null;

       if(viewport == null){

           menu =Ext.Viewport.down('menuview') || Ext.create('HS.view.menuview');

           Ext.Viewport.setMenu(menu,{

                side:'left',//从左边滑出

//                reveal: true,

                cover:false//menu有遮罩效果

           });

           Ext.Viewport.showMenu('left');//从左边滑出menu组件

       }else{

           menu =viewport;

           Ext.Viewport.setMenu(menu,{

                side:'left',

//                reveal: true,

                cover:false

           });

           Ext.Viewport.showMenu('left');

//            Ext.Viewport.toggleMenu('left');

       }

}

 

点击menu左边的遮罩后，隐藏menu组件功能实现

A． 先监听hide消息

control:{

           menuview:{

                hide:'hiddenMenu'       //隐藏menu

           }

}

B. 再实现hiddenMenu方法

//点击右边的遮罩，隐藏menu组件

hiddenMenu:function(){

       Ext.Viewport.removeMenu('left');

    },