与我一起extjs5(09--其定义菜单2)
跟我一起学extjs5(09--自己定义菜单2)
首先定义菜单button类。文件放于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,引入button菜单类
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(09--其定义菜单2)的更多相关文章
- 跟我一起学extjs5(08--自己定义菜单1)
跟我一起学extjs5(08--自己定义菜单1) 顶部和底部区域已经作好,在顶部区域有一个菜单的button.这一节我们设计一个菜单的数据结构,使其能够展示出不相同式的菜单.因为准备搭建的是一个系统模 ...
- 跟我一起学extjs5(11--自己定义模块的设计)
跟我一起学extjs5(11--自己定义模块的设计) 从这一节開始我们来设计并完毕一个自己定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息. 下面信息仅仅是我自己在开发过程中 ...
- java微信开发API解析(四)-自己定义菜单以及个性化菜单实现
全局说明 * 具体说明请參考前两篇文章. 本文说明 *本文分为五部分: * 工具类AccessTokenUtils的封装 * 自己定义菜单和个性化菜单文档的阅读解析 * 菜单JSON的分析以及构建相应 ...
- html css 仿微信底部自己定义菜单
近期几个月一直从事微信开发,从刚開始的懵懂渐渐成长了一点. 今天认为微信底部自己定义菜单,假设能在html的页面上也能显示就好了. 记得曾经看过某个网页有类似效果.查找了该网页的css. ok如今h ...
- 夺命雷公狗---微信开发17----自定义菜单的事件推送,响应菜单的CLICK
废话不多说,index.php 代码如下所示: <?php /** * wechat php test */ //define your token require_once "com ...
- 微信公共服务平台开发(.Net 的实现)6-------自定义菜单
用户自定义菜单制作时,需要用到access_token,我们直接使用前面讲解的IsExistAccess_Token()函数.我理解的微信公共平台里面菜单分为button和sub_button,即菜单 ...
- 【Cocos2d-X开发学习笔记】第09期:渲染框架之菜单类(CCMenu)的使用
本系列学习教程使用的是cocos2d-x-2.1.4(最新版为3.0alpha0-pre) ,PC开发环境Windows7,C++开发环境VS2010 一.菜单项(CCMenuItem) 菜单项 ...
- 8、手把手教你Extjs5(八)自定义菜单2
这一节来定义另外三种类型的菜单类.首先定义菜单按钮类.文件放于app/view/main/region目录下面,文件名为ButtonMainMenu.js. /** * 显示在顶部的按钮菜单,可以切换 ...
- 自己定义ActionBar标题与菜单中的文字样式
自己定义标题文字样式 标题样式是ActionBar样式的一部分,所以要先定义ActionBar的样式 <style name="AppTheme" parent=" ...
随机推荐
- 第一章 andrid visdio 安装
第一章 andrid visdio 安装与环境搭建 一.Android Studio简介 Android Studio是Google新发布的Android应用程序开发环境,Android Stud ...
- SecureCRT学习之道:SecureCRT 常用技巧
快捷键: 1. ctrl + a : 移动光标到行首 2. ctrl + e :移动光标到行尾 3. ctrl + d :删除光标之后的一个字符 4. ctrl + w : 删除行首到当前光标所在位 ...
- linux解压多个文件
方法很多种, 根据实际文件类型,位置情况进行变通: 1. for查询:for tar in *.tar.gz; do tar xvf $tar; done2. 列出文件列表,然后xargs 逐一解压: ...
- cocos2d-x 精灵的创建和基本使用
在cocos2d-x中.精灵能够说是一个最重要的组成元素,它代表游戏中一个最小的可见单位.同一时候也是CCNode一个最为灵活的子类,由于它能够通过装载一个平面纹理,从而具有丰富的表现力. 在进一步说 ...
- Unity3D 游戏开发架构篇 ——性格一流的设计和持久性
在游戏开发.游戏人物占了非常大的空间.所有内容都是由主角可以说游戏驱动. 下面来介绍一下一流的设计和持久性的作用. 一.应用场景 游戏中的角色类型不一而足,有不同的技能.有不同的属性等等.有些一个玩家 ...
- 【iOS】使用SQLite与FMDB
iOS中的SQLite与Android中的一模一样,仅仅是调用方法有差异.假设单从调用来讲,Android封装的一套helper更好用一些,而iOS原生的用C语言的几个函数在操作,比較麻烦.只是引入第 ...
- Vijos P1881 闪烁的星星 (加强自己多一点。。)
假设每次查询不是整个长度,但[x, y]此时间间隔. . 闲来无事写的,感觉是正确的.这将成为合并范围. #include <cstdio> #include <cstring> ...
- ORA-00913错误:PL/SQL: ORA-00913: too many values
ORA-00913错误 描写叙述:PL/SQL: ORA-00913: too many values 目标:编写一个能够循环插入数据的脚本 操作过程: SQL> desc tcustmer N ...
- [Erlang危机](5.1.0)VM检测概述
原创文章.转载请注明出处:server非业余研究http://blog.csdn.net/erlib 作者Sunface 把执行指标储存在VM的内存中.能够指定是全局的还是app所特有的. • vms ...
- sql二进制数据权限
(3为权限组合值,结果为1=列表 2=新建 4=修改 8=删除) select 3 & 1 select 3 & 2 select 3 & 4 select 3 & 2 ...