基于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示例

效果图:

sencha touch 侧边栏扩展(只隐藏不销毁)的更多相关文章

  1. sencha touch carousel 扩展 CardList 可绑定data/store

    扩展代码: /* *扩展carousel *通过data,tpl,store配置数据 */ Ext.define('ux.CardList', { extend: 'Ext.carousel.Caro ...

  2. sencha touch 评分扩展

    原版 :https://market.sencha.com/extensions/sencha-touch-2-rating-star-field 效果: 我的改造版(只是类名变了): Ext.def ...

  3. 第一步 使用sencha touch cmd 4.0 创建项目、打包(加入全局变量、公用类、自定义扩展、资源文件)

    参考资料: http://www.cnblogs.com/qqloving/archive/2013/04/25/3043606.html http://www.admin10000.com/docu ...

  4. sencha touch datepicker/datepickerfield(时间选择控件)扩展(废弃 仅参考)

    参考资料:https://market.sencha.com/extensions/datetimepicker 上面的扩展在2.2有些问题,参考源码重新写了一个 TimePicker: Ext.de ...

  5. sencha touch datepicker/datepickerfield(时间选择控件)扩展

    参考资料: https://market.sencha.com/extensions/datetimepicker 适用于2.4.1版本 uxPickerTime 使用方法参考:datepicker控 ...

  6. sencha touch tabsidebar 源码扩展

    先上图看效果 没错,这是一个sencha touch 项目,而这里的右边推出效果(下文叫做tabsiderbar),使用插件tabsiderbar来扩展的. 插件js下载地址:http://www.m ...

  7. sencha touch 扩展篇之将sencha touch打包成安装程序(下)- 使用phonegap打包安装程序

        这讲我们来讲解下如何使用phonegapa创建项目环境并通过她们将sencha touch打包成app,这里我们只讲解打包android的apk,打包ios的过程有点类似,但是需要在mac环境 ...

  8. sencha touch 扩展篇之将sencha touch打包成安装程序(上)- 使用sencha cmd打包安装程序

    由于最近一直忙着android原生的开发,很久没有更新博客了,官方的sencha cmd工具功能非常强大,创建项目,压缩项目,打包安装程序都能轻松实现,这讲我们就给大家介绍下如何使用sencha cm ...

  9. sencha touch 扩展篇之使用sass自定义主题样式 (下)通过css修改官方组件样式以及自定义图标

    上一讲我们讲解了如何使用官方的api来修改主题样式,这讲我们继续讲解sass的样式修改, 编译官方自带的主题包  在生成的项目以及官方sdk的目录下,自带了一些主题sass包,我们也可以通过修改sas ...

随机推荐

  1. 安装tensorflow出现问题的解法

    在ubuntu14.04用pip安装tensorflow-gpu 安装1.3.0遇到问题 1.安装tensorflow出现Cannot uninstall 'six'.问题的解法 https://bl ...

  2. Vi编辑器修改文件.bash_profile可解决backspace出现乱码问题,rlwrap 的安装。

    Vi编辑器修改文件.bash_profile可解决backspace出现乱码问题 使用SecureCRT或是pietty_ch连接到一台安装有Oracle DB 10g的RHEL4.2的机器,linu ...

  3. CorelDRAW中如何分布对象

    分布对象功能主要用来控制选择对象之间的距离,可以满足用户对均匀间距的要求,通常用于选择三个或三个以上的物体,将他们之间的距离平均分布.本教程将详解CorelDRAW中关于分布对象的操作. CorelD ...

  4. MVC使用 Elmah 日志记录组件

    在后台管理中,有一些操作是需要增加操作日志的,尤其是对一些比较敏感的金额类的操作,比如商城类的修改商品金额.删除商品.赠送金额等人工的操作.日志中记录着相关操作人的操作信息,这样,出了问题也容易排查. ...

  5. iOS中js与objective-c的交互(转)

    因为在iOS中没有WebKit.Framework这个库的,所以也就没有 windowScriptObject对象方法了.要是有这个的方法的话 就方便多了,(ps:MacOS中有貌似) 现在我们利用其 ...

  6. UDP通信-UdpClient

    static void Main(string[] args) { Console.WriteLine("发送端"); byte[] buffer = System.Text.En ...

  7. WPF中的命令与命令绑定导航

    1.WPF中的命令与命令绑定(一) (引入命令) 2.WPF中的命令与命令绑定(二)(详细介绍命令和命令绑定)

  8. 安装eclipse,配置tomcat

    1.去官网(https://www.eclipse.org/downloads/download.php?file=/oomph/epp/oxygen/R/eclipse-inst-win64.exe ...

  9. zabbix添加Tomcat监控

    参靠了网上一些关于zabbix添加Tomcat的监控配置,自己整理了下: 一.服务器端配置1.找到zabbix源码存放路径 # find / -name zabbix_java #/usr/local ...

  10. 绑定方式开始服务&调用服务的方法

    1.编写activity_main.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/androi ...