[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(); //設置工具欄啓用(默認)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。