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');
},