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

工具栏和菜单栏   

    上一节我们介绍了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的文档中有如下介绍

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中工具栏和菜单栏的介绍，相信读者已经掌握了如何创建工具栏和菜单栏的方法。