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