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

时间 2019-11-12

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

原文原文链接

工具栏和菜单栏

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

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

----------------------------------------------------------------------------------------------- 工具栏介绍分割线 -----------------------------------------------------------------------------------------------html

工具栏使用介绍:

1.认识 Ext.toolbar.Toolbar

Ext.toolbar.Toolbar是工具栏的基础组件，它至关于容器，在其中能够放置各类工具栏元素，主要包括按钮、文字和菜单组件。下表中给出了Ext.toolbar.Toolbar组件的主要配置项及经常使用方法:
java

配置项	类型	说明
enableOverflow	Boolean	设置为true则自动为工具栏添加一个下拉按钮，用于显示超过工具栏范围的按钮
vertical	Boolean	设置为true则显示一个垂直的工具栏，默认为false

工具栏中可容纳的常见元素:
jsp

工具栏元素名称	说明
Ext.button.Button	能够加入到工具栏中的按钮组件
Ext.toolbar.Fill	用于充满工具条的空白元素('->')
Ext.toolbar.Item	基类，为其子类提供工具栏的基本功能支持
Ext.toolbar.Separator	工具栏分隔符('-')
Ext.toolbar.Spacer	工具栏元素之间的空白空间，默认为2像素(' ')
Ext.toolbar.TextItem	文本元素

Ext.toolbar.Toolbar支持的经常使用方法，经过这些方法就能够建立出功能强大的工具栏，快来看看吧~
ide

方法名

参数类型

说明

add

Mixed arg1, Mixed arg2, Mixed etc.

该方法用于向工具栏中添加元素，它支持一个变长的参数列表，能够一次性加入多个工具栏元素，支持的有效类型包括:函数

Ext.button.Button，一个有效的按钮而配置对象;工具

HtmlElement，标准的HTML元素
ui

Field，表单字段this

Item， Ext.toolbar.Item的任何子类

String，普通字符串，注意有些特殊的字符串进行了不一样的解释，例如: '-'建立一个工具栏分割元素；''建立一个空白元素；'->'建立一个工具栏的Fill元素，填充工具栏空白区域

2.建立工具栏

调用格式:

add(Mixed arg1, Mixed arg2, Mixed etc.)

参数说明: 参考上表

返回值: void

Ext.buttom.Button主要配置项目表

配置项	类型	说明
handler	Function	一个函数，在按钮被点击以后调用
iconCls	String	一个样式类，提供在按钮上显示的图标
menu	Mixed	参数能够是一个菜单对象或者是菜单对象的id，也能够是一个有效的菜单配置对象
text	String	按钮上显示的文字

下面咱们将建立以下工具栏(截图):

代码示例:

index.jsp中以下代码:

<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
  <head>
  	<script type="text/javascript" src="${pageContext.request.contextPath}/extjs5.1.0/ext-all.js"></script>
  	<script type="text/javascript" src="${pageContext.request.contextPath}/extjs5.1.0/package/ext-theme-crisp/build/ext-theme-crisp.js"></script>
  	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/extjs5.1.0/package/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" />  
  	
  	<!-- 引入自定义样式文件my.css -->
	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/my.css">
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/script.js"></script>
	
	<style type="text/css">
		#ToolBar {
			border: 1px dashed #00f;
			width: 800px;
			margin: 0 auto;
			margin-top: 450px;
		}
	</style>
  </head>
  
  <body>	
  	<div id="ToolBar"></div>
  </body>
</html>

在index.jsp中引入了my.css文件，该文件放置位置及目录结果以下截图:

my.css中定义了按钮图标，如"新建"按钮前的图标(其中*.png建议你们从网上或项目里找些16px的图片)代码以下:

.newIcon {
	background-image: url(icon/new.png)
}

.openIcon {
	background-image: url(icon/open.png)
}

.editIcon {
	background-image: url(icon/edit.png)
}

.saveIcon {
	background-image: url(icon/save.png)
}

有了以上准备工做，让咱们看下核心部分代码:

Ext.onReady(function() {
	var toolbar = new Ext.toolbar.Toolbar({
		renderTo: ToolBar,
		width: 700
	});
	
	toolbar.add({
		text: '新建',
		iconCls: 'newIcon', 
		handler: onButtonClick
	}, {
		text: '打开',
		iconCls: 'openIcon',
		handler: onButtonClick
	}, {
		text: '编辑',
		iconCls: 'editIcon',
		handler: onButtonClick
	}, {
		text: '保存',
		iconCls: 'saveIcon',
		handler: onButtonClick
	}, '-', {
		xtype: 'textfield',
		hideLabel: true,
		width: 150
	}, '->', '<a href=#>超连接</a>', {xtype:'tbspacer', width:80}, '静态文本');
	
	function onButtonClick() {
		Ext.MessageBox.alert('Information', '点击的按钮为: ' + this.text);
	}
});

注意: iconCls中引入css样式类型为"类选择器"

到这里咱们就完成了简单工具栏的建立方法，其中一些组件，如textfield的使用，在之后的系列课程做介绍。

3. 启用和禁用工具栏

Ext.toolbar.Toolbar工具栏组件提供了enable和disable两个方法，它们能够启用和禁用工具栏的功能。

调用格式: enable(Boolean silent)

参数说明: silent:是否静默，true则触发enable事件

返回值: void

disable的调用格式与enable相同，故再也不重复列出。

代码示例:

toolbar.disable(); //设置工具栏禁用
toolbar.enable(); //设置工具栏启用(默认)