基于Ext.ux.MenuButton改造而来，和它不同的是，不会每次都去销毁侧边栏，只是单纯的隐藏，属性配置方面没啥区别，每次点击按钮显示时，会触发showMenu事件/方法
代码如下：
/**
*只隐藏不销毁的侧边栏
* @private
*/
Ext.define('ux.Menu.Context', {
extend: 'Ext.Button',
requires: ['Ext.ux.ContextMenu'],
config: {
menuItems: [],
menuSide: 'right',
menuCover: false,
menuCls: null,
listeners: {
tap: 'onTap'
}
},
initialize: function () {
var me = this;
me.$menu = Ext.create('Ext.ux.ContextMenu', {
cls: me.getMenuCls(),
items: me.getMenuItems(),
listeners: {
scope: me,
hide: function () {
Ext.Viewport.hideMenu(me.getMenuSide());
}
}
});
me.$menu.on({
scope: me,
tap: me.onMenuButtonTap,
delegate: 'button'
});
Ext.Viewport.setMenu(me.$menu, {
side: me.getMenuSide(),
cover: me.getMenuCover()
});
me.callParent(arguments);
},
onTap: function (e) {
this.fireAction('showMenu', [this], 'showMenu');
Ext.Viewport.showMenu(this.getMenuSide());
},
onMenuButtonTap: function (button) {
Ext.Viewport.hideMenu(this.getMenuSide());
}
});
具体用法可参考官方blackberry示例
效果图：