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

时间 2019-11-12

标签 extjs5.1.0 extjs 系列 5天工具栏菜单介绍繁體版

原文原文链接

工具栏和菜单栏 git

上一节咱们介绍了ExtJs中工具栏Ext.toolbar.Toolbar的使用，本节将学习菜单栏的使用。菜单栏组件至关于菜单项的容器，在菜单组件中不但能够容纳Ext.menu.Item菜单项也能够容纳普通组件。
github

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

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

菜单栏使用介绍

菜单组件至关于菜单项的容器，在菜单组件中不但能够容纳Ext.menu.Item菜单项也能够容纳普通组件。将菜单组件与工具栏组件结合起来，就能够创造出很是使用的菜单栏.
框架

1.认识Ext.menu.Menu

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

配置项	参数类型	说明
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.建立菜单栏

下面咱们将建立以下菜单栏(截图):
字体

示例代码:this

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的文档中有以下介绍

select( Ext.picker.Color this, String color, Object eOpts )

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

Parameters

this : Ext.picker.Color
color : String
6位16进制颜色代码 (不包括“#”符号)
eOpts : Object
The options object passed to Ext.util.Observable.addListener.

select为Ext.menu.ColorPicker的一个事件，这个要组件锻炼你们查文档的习惯，没有任何教材比文档更好！

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

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

具体用法及参数以下:

select( Ext.picker.Date , Date date, Object eOpts )

当一个日期被选择时触发

Parameters

Ext.picker.Date
当前日期选择器
date : Date
被选中的日期
eOpts : Object
The options object passed to Ext.util.Observable.addListener.

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