工具栏和菜单栏
上一节我们介绍了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
当前日期选择器
date : Date
被选中的日期
eOpts : Object
The options object passed to Ext.util.Observable.addListener.
到这里,已经完成了对ExtJs中工具栏和菜单栏的介绍,相信读者已经掌握了如何创建工具栏和菜单栏的方法。