基于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. C# 反射(GetType) 获取动态Json对象属性值的方法

    之前在开发一个程序,希望能够通过属性名称读取出属性值,但是由于那时候不熟悉反射,所以并没有找到合适的方法,做了不少的重复性工作啊! 然后今天我再上网找了找,被我找到了,跟大家分享一下. 其实原理并不复 ...

  2. Java设计模式之五大创建型模式(附实例和详解)

    一.概况 总体来说设计模式分为三大类: (1)创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. (2)结构型模式,共七种:适配器模式.装饰器模式.代理模式.外观模式.桥 ...

  3. Python:查看矩阵大小,查看列表大小

    对于Python3.5 查看矩阵大小 >>>import numpy as np >>>from numpy import random >>>m ...

  4. springMVC工程使用jreloader实现热部署

    springMVC工程使用jreloader实现热部署applicationContext - ContextLoaderListener重新加载DispatcherServlet 重新加载提高开发效 ...

  5. bind带autocomplete时,最好是从新的tr复制

    (function($) { //自动关联ItemNo $.fn.extend({ productitemlist: function(options) { return this.each(func ...

  6. 用Fiddler可以设置浏览器的UA 和 手动 --Chrome模拟手机浏览器(iOS/Android)的三种方法,亲测无误!

    附加以一种软件的方法是:用Fiddler可以设置浏览器的UA 以下3种方法是手动的 通过伪装User-Agent,将浏览器模拟成Android设备. 第一种方法:新建Chrome快捷方式 右击桌面上的 ...

  7. Oracle统计每条数据的大小

    怎么查询一条记录到底占了多少空间呢,随便用一个表举例(如上图),就着解决眼前问题的原则(oracle),网上简单查了查,发现生效了,就没深入了解了,包括其它数据库怎么解决,都没做研究.Oracle下, ...

  8. Ubuntu下制作窗口

    在Ubuntu下安装 sudo apt-get install dialog 类型 用于创建 类型的选项 含义 复选框 --checklist 允许用户显示一个选项列表, 每个选项都可以被单独选择 信 ...

  9. 改造phpcms-v9自带的字符串截取函数

    1.phpcms-v9自带的字符串截取函数在phpcms/libs/functions/global.func.php文件中: /** * 字符截取 支持UTF8/GBK * @param $stri ...

  10. hibernate 之 sql查询

    如果用hibernate执行原生sql进行数据查询可以调用 SQLQuery query = getSession().createSQLQuery(sql); 然后再执行 query.list() ...