[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