文档章节

[ExtJs5.1.0系列-第5天]工具栏和菜单栏(2)-菜单栏介绍

LvSantorini
 LvSantorini
发布于 2015/09/21 23:36
字数 1250
阅读 489
收藏 0

工具栏和菜单栏   

    上一节我们介绍了ExtJs中工具栏Ext.toolbar.Toolbar的使用,本节将学习菜单栏的使用。菜单栏组件相当于菜单项的容器,在菜单组件中不但可以容纳Ext.menu.Item菜单项也可以容纳普通组件。

    (本文介绍菜单栏的使用,工具栏参考:  [ExtJs5.1.0系列-第5天]工具栏和菜单栏(1)-工具栏介绍 )

----------------------------------------------------------------------------------------------- 菜 单 栏 介 绍 分 割 线 -----------------------------------------------------------------------------------------------

菜单栏使用介绍

    菜单组件相当于菜单项的容器,在菜单组件中不但可以容纳Ext.menu.Item菜单项也可以容纳普通组件。将菜单组件与工具栏组件结合起来,就可以创造出非常使用的菜单栏.

1.认识Ext.menu.Menu

Ext.menu.Menu组件的主要配置项

配置项 参数类型 说明
items Mixed 一个有效菜单项的数组
ignoreParentClicks Boolean 忽略任何作为父菜单的菜单项的单击事件,默认为false
plain Boolean 是否移除菜单左侧的竖线,默认为false

    菜单项主要类型表:

菜单元素名称 说明
Ext.menu.Item 菜单项基类
Ext.menu.Separator 菜单分隔符
Ext.menu.CheckItem 包含选择框的菜单项,也可以是一个单选组
Ext.menu.ColorPicker 颜色选择器
Ext.menu.DatePicker 日期选择器

    Ext.menu.Item主要配置项

配置项 参数类型 说明
canActivate Boolean 当鼠标移入菜单项或菜单项获得焦点时,是否高亮显示菜单项,默认为true
clickHideDelay Number 单击菜单项之后,隐藏菜单项的延时时间,默认为1毫秒
destroyMenu Boolean 是否级联销毁子菜单,默认为true
hideOnClick Boolean 单击菜单项之后是否隐藏菜单,默认为true
href String 超链接,默认为#
hrefTarger String 打开超链接的目标框架名称,默认为undefined
menuExpandDelay Number 子菜单展开之前,鼠标移入菜单项之后的延时时间,默认为200毫秒,只有在菜单项具有子菜单的时候生效
menuHideDelay Number 子菜单隐藏之前,鼠标移出菜单项之后的延时时间,默认为200毫秒,默认为200毫秒,只有在菜单项具有子菜单的时候生效
menuAlign String 设置子菜单与父菜单的对齐关系,默认为'tl-tr',即子菜单的左上角与父菜单的右上角对其,当子菜单的位置受到容器限制时自动进行调整
menu Mixed 子菜单,它可以是一个Ext.menu.Menu示例,或者一个Ext.menu.Menu有效的配置对象
2.创建菜单栏

下面我们将创建如下菜单栏(截图):

示例代码:

Ext.onReady(function() {
	// 创建一个用来容纳菜单栏的容器
	var toolbar = Ext.create('Ext.toolbar.Toolbar', {
		width: 700,
		renderTo: ToolBar
	});

	// 创建一个普通的菜单栏
	var fileMenu = Ext.create('Ext.menu.Menu', {
		shadow: 'drop',
		items: [{
			text: '新建',
			iconCls: 'newIcon',
			handler: onMenuItem
		},
		{
			text: '打开',
			iconCls: 'openIcon',
			handler: onMenuItem
		},
		{
			text: '保存',
			iconCls: 'saveIcon',
			handler: onMenuItem
		}]
	});

	var editMenu = Ext.create('Ext.menu.Menu', {
		shadow: 'drop',
		items: [{
			text: '剪切',
			iconCls: 'cutIcon',
			handler: onMenuItem
		},
		{
			text: '复制',
			iconCls: 'copyIcon',
			handler: onMenuItem
		},
		{
			text: '粘贴',
			iconCls: 'pasteIcon',
			handler: onMenuItem
		}]
	});

	// 创建一个多级菜单栏
	var multiClassMenu = Ext.create('Ext.menu.Menu', {
		items: [{
			text: '个人信息',
			menu: Ext.create('Ext.menu.Menu', {
				items: [{
					text: '基本信息',
					menu: Ext.create('Ext.menu.Menu', {
						items: [{
							text: '身高'
						},
						{
							text: '体重'
						}]
					})
				}]
			})
		}]
	});
	
	var textField = Ext.create('Ext.form.TextField', {
		width: 120,
		hideLabel: true
	});
	
	// 颜色选择组件
	var colorPicker = Ext.create('Ext.menu.ColorPicker');
	// 日期选择组件
	var datePicker = Ext.create('Ext.menu.DatePicker');
	
	// 单选
	var colorCheckMenu = Ext.create('Ext.menu.Menu', {
		items: [{text:'Green', checked:true, group:'color', handler:onMenuItem}, {text:'Blue', checked:false, group:'color', handler:onMenuItem}, {text:'Red', checked:false, group:'color', handler:onMenuItem}]
	});
	
	toolbar.add({
		text: '文件',
		menu: fileMenu
	},
	{
		text: '编辑',
		menu: editMenu
	},
	{
		text: '多级菜单',
		menu: multiClassMenu
	},
	'-',
	textField,
	'-',
	{
		text:'颜色选择',
		menu: colorPicker
	},
	'-',
	{
		text:'日期选择',
		menu: datePicker
	},
	'-',
	{
		text:'其他',
		menu: Ext.create('Ext.menu.Menu', {
			items: [{text:'颜色', menu:colorCheckMenu},{text:'是否启用', checked: false}]
		})
	});

	function onMenuItem(item) {
		Ext.MessageBox.alert('Information', '点击的菜单为: ' + item.text);
	}
});
3.颜色选择<Ext.menu.ColorPicker>

颜色选择组件Ext.menu.ColorPicker通常用来记录或改变颜色,如当我们选择一种颜色后要改变字体的颜色或背景颜色,那如何做到呢?

var colorPicker = Ext.create('Ext.menu.ColorPicker', {
	listeners: {
		select: function(picker, color, eOpts) {
			var toolbar = Ext.getDom("ToolBar");
			toolbar.style.background = '#' + color;
		}
	}
});

如此,我们就可以改变ToolBar这个div的背景颜色了

注意: 在ExtJs的文档中有如下介绍

selectExt.picker.Color this, String color, Object eOpts )

当一个颜色被选择时触发。

Parameters

select为Ext.menu.ColorPicker的一个事件,这个要组件锻炼大家查文档的习惯,没有任何教材比文档更好!

4.日期选择<Ext.menu.DatePicker>

获取选中日期与 颜色选择组件中的事件相同,均为select事件

具体用法及参数如下:

selectExt.picker.Date , Date date, Object eOpts )

当一个日期被选择时触发

Parameters

到这里,已经完成了对ExtJs中工具栏和菜单栏的介绍,相信读者已经掌握了如何创建工具栏和菜单栏的方法。


© 著作权归作者所有

LvSantorini
粉丝 13
博文 37
码字总数 40332
作品 0
呼和浩特
程序员
私信 提问
加载中

评论(1)

种子同学
种子同学
您好,想问一下最后没有说到的【日期选择<Ext.menu.DatePicker>】是怎样的一个用法呢?想做的效果是:【当点击这个显示“日期选择”的按钮的时候,选择空间里面的某一个时间,“日期选择”变为选择的时间,亦可再继续选择时间】
toolbar.add({
text:'日期选择',
menu: datePicker
},
然后
var datePicker = Ext.create('Ext.menu.DatePicker',{
listeners:{
select:function(picker,date,eOpts){
后面应该怎么写。请做着指教
[ExtJs5.1.0系列-第4天]工具栏和菜单栏(1)-工具栏介绍

工具栏和菜单栏 前两节的内容,我们介绍了信息提示框和进度条,对ExtJs组件的配置及使用有了一定认识。本节内容将介绍工具栏(Ext.toolbar.Toolbar)组件和菜单(Ext.menu.Menu)组件的使用。 (本...

LSantorini
2015/09/17
716
0
[ExtJs5.1.0系列-第1天] 初识ExtJs5.1.0

ExtJs是用JavaScript、CSS和HTML等技术实现的主要用于创建用户界面,且与后台技术无关的前端Ajax框架,还被用来开发RIA(富客户端)的Web应用。ExtJs的使用与Java中AWT,Swing编程十分相像(做过...

LSantorini
2015/09/08
1K
0
【Qt笔记】菜单栏、工具栏和状态栏

Qt 将用户与界面进行交互的元素抽象为一种“动作”,使用类表示。可以添加到菜单上、工具栏上。期间,我们还详细介绍了一些细节问题,比如资源文件的使用、对象模型以及布局管理器。这一节则...

大道无名
2016/07/29
96
0
GEF入门实例_总结_04_Eclipse插件启动流程分析

一、前言 本文承接上一节:GEF入门实例总结03显示菜单和工具栏 注意到app目录下的6个类文件。 这6个文件对RCP应用程序而言非常重要,可能我们现在对这几个文件的理解还是云里雾里,这一节我们...

rayner
2018/06/12
0
0
PyQt5教程(二)——菜单与工具栏

原文:http://zetcode.com/gui/pyqt5/menustoolbars/ 我们将在这部分教程中创建菜单与工具栏。一个菜单就是位于菜单栏中的一组命令。应用的工具栏放置了带有按钮的常用命令。 主窗体 类提供了...

pseudo
2015/11/29
2.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

会用python把linux命令写一遍的人,进大厂有多容易?

看过这篇《2000字谏言,给那些想学Python的人,建议收藏后细看!》的读者应该都对一个命令有点印象吧?没错,就是 linux 中经常会用到的 ls 命令。 文章中我就提到如何提升自己的 python 能力...

上海小胖
8分钟前
1
0
HashMap的特性

一、hashmap数据结构:哈希表结构:数组+链表 hashmap调用默认构造方法会产生一个默认底层是长度为16的Entry数组,首先调用key的hasCode()方法来得到一个整数, int hash = hash(key.hashCode...

GGbird
8分钟前
2
0
第五章 spring-connet之Imports注解来龙去脉

前言 imports是一个在spring体系里非常重要的注解,基本每个Enable开头的注解必然有一个import注解。接下来我们深入研究下import的作用。看小节的同学建议先取看PostProcessorRegistrationDe...

鸟菜啊
12分钟前
1
0
CentOS部署Harbor镜像仓库

关于Harbor Harbor是用于存储和分发Docker镜像的镜像仓库服务,相比Docker Registry,Harbor在安全、标识、管理等方面做了增强,更适合企业使用; 官方网站:https://goharbor.io/ 官方开源:...

程序员欣宸
17分钟前
1
0
JavaScript调试必会的8个console方法

每个JavaScript开发者都用过console.log()来调试程序,但实际上Console对象还提供了很多其他方法可以提高调试效率。本文将介绍8个有趣的Console方法,即使JavaScript老手也不一定知道! 1、c...

汇智网教程
38分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部