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

工具栏和菜单栏

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

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

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

工具栏使用介绍:

1.认识 Ext.toolbar.Toolbar

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

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

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

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

Ext.toolbar.Toolbar支持的常用方法，通过这些方法就可以创建出功能强大的工具栏，快来看看吧~

方法名

参数类型

说明

add

Mixed arg1, Mixed arg2, Mixed etc.

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

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

HtmlElement，标准的HTML元素

Field，表单字段

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(); //设置工具栏启用(默认)

来源：oschina

链接：https://my.oschina.net/u/2265030/blog/507837

标签

extjs

工具栏

Ext.toolbar.Toolbar