跟我一起学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)的更多相关文章

  1. 跟我一起学extjs5(08--自己定义菜单1)

    跟我一起学extjs5(08--自己定义菜单1) 顶部和底部区域已经作好,在顶部区域有一个菜单的button.这一节我们设计一个菜单的数据结构,使其能够展示出不相同式的菜单.因为准备搭建的是一个系统模 ...

  2. 跟我一起学extjs5(11--自己定义模块的设计)

    跟我一起学extjs5(11--自己定义模块的设计)        从这一节開始我们来设计并完毕一个自己定义模块.我们先来确定一个独立的模块的所能定义的一些模块信息. 下面信息仅仅是我自己在开发过程中 ...

  3. java微信开发API解析(四)-自己定义菜单以及个性化菜单实现

    全局说明 * 具体说明请參考前两篇文章. 本文说明 *本文分为五部分: * 工具类AccessTokenUtils的封装 * 自己定义菜单和个性化菜单文档的阅读解析 * 菜单JSON的分析以及构建相应 ...

  4. html css 仿微信底部自己定义菜单

    近期几个月一直从事微信开发,从刚開始的懵懂渐渐成长了一点. 今天认为微信底部自己定义菜单,假设能在html的页面上也能显示就好了. 记得曾经看过某个网页有类似效果.查找了该网页的css.  ok如今h ...

  5. 夺命雷公狗---微信开发17----自定义菜单的事件推送,响应菜单的CLICK

    废话不多说,index.php 代码如下所示: <?php /** * wechat php test */ //define your token require_once "com ...

  6. 微信公共服务平台开发(.Net 的实现)6-------自定义菜单

    用户自定义菜单制作时,需要用到access_token,我们直接使用前面讲解的IsExistAccess_Token()函数.我理解的微信公共平台里面菜单分为button和sub_button,即菜单 ...

  7. 【Cocos2d-X开发学习笔记】第09期:渲染框架之菜单类(CCMenu)的使用

    本系列学习教程使用的是cocos2d-x-2.1.4(最新版为3.0alpha0-pre) ,PC开发环境Windows7,C++开发环境VS2010    一.菜单项(CCMenuItem) 菜单项 ...

  8. 8、手把手教你Extjs5(八)自定义菜单2

    这一节来定义另外三种类型的菜单类.首先定义菜单按钮类.文件放于app/view/main/region目录下面,文件名为ButtonMainMenu.js. /** * 显示在顶部的按钮菜单,可以切换 ...

  9. 自己定义ActionBar标题与菜单中的文字样式

    自己定义标题文字样式 标题样式是ActionBar样式的一部分,所以要先定义ActionBar的样式 <style name="AppTheme" parent=" ...

随机推荐

  1. WPF疑难杂症会诊

    原文:WPF疑难杂症会诊 为什么图片像素是模糊的? 容器边框设为非整数时,其内容中的像素图片会产生模糊,即使设置SnapsToDevicePixels="True"也无效. 以下是 ...

  2. Mvc 异常处理 ajax的 和 不是ajax的!

    using ImageUpload.Auth; using System; using System.Collections.Generic; using System.Linq; using Sys ...

  3. php-GD库的函数(二)

    <?php //imagecopy — 拷贝图像的一部分粘贴到某图像上 /*bool imagecopy ( resource $dst_im , resource $src_im , int ...

  4. BZOJ 1109 POI2007 堆积木Klo LIS

    题目大意:给定一个序列,能够多次将某个位置的数删掉并将后面全部数向左串一位,要求操作后a[i]=i的数最多 首先我们如果最后a[i]=i的数的序列为S 那么S满足随着i递增,a[i]递增(相对位置不变 ...

  5. ecshop中getAll ,getOne ,getRow的区别

    ecshop的数据库抽象层其实就是在模仿adodb $GLOBALS['db']->getAll($sql);//以二维关联数组返回所有数据 $GLOBALS['db']->getOne( ...

  6. 黄聪:Microsoft Enterprise Library 5.0 系列教程(十) Configuration Application Block

    原文:黄聪:Microsoft Enterprise Library 5.0 系列教程(十) Configuration Application Block 到目前为止,我们使用的模块都是在同一个配置 ...

  7. 关于mysql主从复制的概述与分类(转)

    一.概述: 按照MySQL的同步复制特点,大体上可以分为三种类别: 1.异步复制: 2.半同步复制: 3.完全同步的复制: -------------------------------------- ...

  8. C# Windows Phone 8 WP8,切换各国语系免重开机 加速开发 送审有效率!!

    原文:C# Windows Phone 8 WP8,切换各国语系免重开机 加速开发 送审有效率!! 一般我们在开发Windows Phone 8 时,会考虑到各国语言的问题,但是你有想过吗?用实体手机 ...

  9. Oracle GoldenGate (以下简称ogg)在异种移植os同一种db之间的数据同步。

    Oracle GoldenGate (以下简称ogg)在异种移植os同一种db之间的数据同步. ogg要实现的功能: 同步可以细化到单个表,满足特定的where条件rows同步,称号column同步. ...

  10. 自己定义actionbar

    android中的actionbar可提供自己定义view.详细是先写好自己定义view的布局,然后在代码中获取Actionbar对象.调用 setCustomView方法. 可是这样,它还是会显示前 ...