ExtJS5_自定义菜单2
这一节来定义另外三种类型的菜单类。首先定义菜单按钮类。文件放于app/view/main/region目录下面,文件名为ButtonMainMenu.js。
/**
* 显示在顶部的按钮菜单,可以切换至标准菜单,菜单树
*/
Ext.define('app.view.main.region.ButtonMainMenu', {
extend : 'app.ux.ButtonTransparent',
alias : 'widget.buttonmainmenu',
viewModel : 'main',
text : '菜单',
glyph : 0xf0c9,
initComponent : function() {
this.menu = this.getViewModel().getMenus();
this.callParent();
}
})
第二种树状菜单,文件名为MainMenuTree.js。
/**
* 树状菜单,显示在主界面的左边
*/
Ext.define('app.view.main.region.MainMenuTree', {
extend : 'Ext.tree.Panel',
alias : 'widget.mainmenutree',
title : '系统菜单',
glyph : 0xf0c9,
rootVisible : false,
lines : true,
viewModel : 'main', initComponent : function() {
this.store = Ext.create('Ext.data.TreeStore', {
root : {
text : '系统菜单',
leaf : false,
expanded : true
}
});
var menus = this.getViewModel().get('systemMenu');
var root = this.store.getRootNode();
for (var i in menus) {
var menugroup = menus[i];
var menuitem = root.appendChild({
text : menugroup.text,
expanded : menugroup.expanded,
icon : menugroup.icon,
glyph : menugroup.glhpy
});
for (var j in menugroup.items) {
var menumodule = menugroup.items[j];
var childnode = {
moduleId : menumodule.text,
moduleName : menumodule.module,
text : menumodule.text,
leaf : true
};
menuitem.appendChild(childnode);
}
}
this.callParent(arguments);
}
})
第三种为折叠式菜单,文件名为AccordionMainMenu.js。
/**
* 折叠式(accordion)菜单,样式可以自己用css进行美化
*/ Ext.define('app.view.main.region.AccordionMainMenu', {
extend : 'Ext.panel.Panel',
alias : 'widget.mainmenuaccordion',
title : '系统菜单',
glyph : 0xf0c9, layout : {
type : 'accordion',
animate : true
}, viewModel : 'main', initComponent : function() {
this.items = [];
var menus = this.getViewModel().get('systemMenu');
for (var i in menus) {
var menugroup = menus[i];
var accpanel = {
menuAccordion : true,
xtype : 'panel',
title : menugroup.text,
bodyStyle : {
padding : '10px'
},
layout : 'fit',
dockedItems : [{
dock : 'left',
xtype : 'toolbar',
items : []
}],
glyph : menugroup.glyph
};
for (var j in menugroup.items) {
var menumodule = menugroup.items[j];
accpanel.dockedItems[0].items.push({
xtype : 'buttontransparent',
text : this.addSpace(menumodule.text, 12),
glyph : menumodule.glyph,
handler : 'onMainMenuClick'
});
}
this.items.push(accpanel);
}
this.callParent(arguments);
}, addSpace : function(text, len) {
console.log(text.length);
var result = text;
for (var i = text.length; i < len; i++) {
result += ' ';
}
return result;
} })
把这三种类型的菜单加入到页面中。先修改Top.js,引入按钮菜单类
uses : ['app.ux.ButtonTransparent', 'app.view.main.region.ButtonMainMenu'],
然后在items中加入
{
xtype : 'buttonmainmenu'
}
再修改Main.js,引入MainMenuTree 和 AccordionMainMenu,在items中加入
{
xtype : 'mainmenutree',
region : 'west', // 左边面板
width : 250,
split : true
}, {
xtype : 'mainmenuaccordion',
region : 'west', // 左边面板
width : 250,
split : true
},
经过以上处理,现在界面上会有4种类型的菜单。见下图:
ExtJS5_自定义菜单2的更多相关文章
- ExtJS5_自定义菜单1
顶部和底部区域已经作好,在顶部区域有一个菜单的按钮,这一节我们设计一个菜单的数据结构,使其可以展示出不同样式的菜单.由于准备搭建的是一个系统模块自定义的系统,因此菜单也是自定义的,在操作员系统登录的时 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(74)-微信公众平台开发-自定义菜单
系列目录 引言 1.如果不借用Senparc.Weixin SDK自定义菜单,编码起来,工作量是非常之大 2.但是借助SDK似乎一切都是简单得不要不要的 3.自定义菜单无需要建立数据库表 4.自定义菜 ...
- 用c#开发微信(5)自定义菜单设置工具 (在线创建)
读目录 1 使用 2 原理 3. 错误 上次写了<用c#开发微信 (4) 基于Senparc.Weixin框架的接收事件推送处理 (源码下载)>,有园友问到如何创建菜单的问题,今天就介绍下 ...
- 《C#微信开发系列(2)-自定义菜单管理》
2.0自定义菜单管理 ①接口说明 微信服务号聊天窗口下面的菜单项(有的公众号有启用有的则没有),这个可以在编辑模式简单配置,也可以在开发模式代码配置.微信公众平台开发者文档:微信公众号开发平台创建自定 ...
- 微信公众平台自定义菜单新增扫一扫、发图片、发位置 LBS运作更便捷
今天微信公众平台发布更新,自定义菜单新增扫一扫.发图片.发送位置等功能,这对于有意挖掘微信LBS服务的运营者来说更便捷了,订阅号不用返回微信界面就能扫图.发送图片.调用地理位置,用户体验更友好,自然也 ...
- C#/ASP.NET MVC微信公众号接口开发之从零开发(四) 微信自定义菜单(附源码)
C#/ASP.NET MVC微信接口开发文章目录: 1.C#/ASP.NET MVC微信公众号接口开发之从零开发(一) 接入微信公众平台 2.C#/ASP.NET MVC微信公众号接口开发之从零开发( ...
- 微信公众平台创建自定义菜单中文编码导致system error
创建包含了中文的自定义菜单时总是返回{"errcode":-1,"errmsg":"system error"},要将编码方式设置为UTF- ...
- 使用knockout-sortable实现对自定义菜单的拖拽排序
在开始之前,照例,我们先看效果和功能实现. 关于自定义菜单的实现,这里就不多说了,需要了解的请访问:http://www.cnblogs.com/codelove/p/4838766.html 这里需 ...
- Senparc.Weixin.MP SDK 微信公众平台开发教程(九):自定义菜单接口说明
上一篇<Senparc.Weixin.MP SDK 微信公众平台开发教程(八):通用接口说明>介绍了如何通过通用接口获取AccessToken,有了AccessToken,我们就可以来操作 ...
随机推荐
- D - Silver Cow Party
题目大意: 在一个农场里面所有的牛都会来参加大牛举办的派对,不过农场的路都是单向的,而且每头牛都喜欢都最短的路程,那么问题来了,求出来来回花费时间最多的那头牛所用的时间... //////////// ...
- hdoj 1711 Number Sequence【求字串在母串中第一次出现的位置】
Number Sequence Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- AngularJS测试二 jasmine测试路由 控制器 过滤器 事件 服务
测试应用 1.测试路由 我们需要检测路由是否在运作,是否找到了,或者是404了.我们要确认路由事件触发了,预期的模板是否真的加载了.既然路由会改变页面的地址(URL)和页面内容,我们需要检测路由是否被 ...
- UIActionSheet底部弹出框
<底部弹出框来提示用户信息> 1.遵循代理方法<UIActionSheetDelete> 2.调用放法 [UIActionSheet *sheet=[UIActio ...
- Java之多线程断点下载的实现
RandomAccessFile类: 此类的实例支持对随机訪问文件的读取和写入.随机訪问文件的行为相似存储在文件系统中的一个大型 byte 数组. 存在指向该隐含数组.光标或索引,称为文件指针.输入操 ...
- Swift 算法实战之路:基本语法与技巧
Swift是苹果新推出的编程语言,也是苹果首个开源语言.相比于原来的Objective-C,Swift要更轻便和灵活.笔者最近使用Swift实践了大量的算法(绝大部分是硅谷各大公司的面试题),将心得体 ...
- 【开源java游戏框架libgdx专题】-04-接口介绍及生命周期
在核心项目中包含6大与操作系统交互的接口,每个后端都实现了这6大接口. Application:运行应用程序并通知API的客户端应用程序级别的事件,提供日志记录设施和查询方法,例如,内存使用. Fil ...
- 使用EF 的简单的增删改查
using DAL; using Model; using System; using System.Collections.Generic; using System.Linq; using Sys ...
- VS2008 快捷键大全--------<<转>>
VS2008 快捷键大全 Ctrl+E,D ---- 格式化全部代码 Ctrl+K,F ---- 格式化选中的代码 CTRL + SHIFT + B ...
- (转)织梦dedecms模板。如何让type='image'和不带type='image'的文章同时出现在列表里。
“节日歌圩”栏目是有内容的,但是文章没有缩略图所以没有在频道首页显示出来,我现在想要有缩略图的文章自然显示,没有缩略图的文章也能出现标题列表(依然按照一行4个标题,可以用一张“无缩略图”的图片来代替缩 ...