Ext.toolbar.Toolbar工具栏

1、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	工具栏元素之间的间隔符，默认为2px
Ext.toolbar.TextItem	文本元素

工具栏常用方法

方法名称	参数类型	说明
add	Mixed arg1,Mixed arg2,...	用于向工具栏中添加元素，支持变长参数列表，可以一次性加入多个工具栏元素支持的有效类型包括： Ext.button.Button，一个有效的按钮配置对象 HtmlElement,标准HTML元素 Field，表单字段 Item，Ext.toolbar.Item子类 String,字符串 '-'创建一个工具栏分割元素 ''创建一个工具栏空白元素 '->'创建一个工具栏Fill元素，填充工具栏空白区域

方法名称

参数类型

说明

add

Mixed arg1,Mixed arg2,...

用于向工具栏中添加元素，支持变长参数列表，可以一次性加入多个工具栏元素

支持的有效类型包括：

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

HtmlElement,标准HTML元素 Field，表单字段

Item，Ext.toolbar.Item子类

String,字符串

'-'创建一个工具栏分割元素

''创建一个工具栏空白元素

'->'创建一个工具栏Fill元素，填充工具栏空白区域

Ext.button.Button主要配置项目

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

2、基本工具栏

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <title>Ext.toolbar.Toolbar工具栏</title>
 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
 6     <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         Ext.onReady(function () {
 9             var toolbar = Ext.create("Ext.Toolbar",{
10                 renderTo: Ext.getBody(),
11                 width: 500,
12                 items: [{
13                     text: "文件",
14                     handler: function (btn) { Ext.MessageBox.alert(btn.text); }
15                 },{
16                     text:"编辑"
17                 },{
18                     text:"格式"
19                 }, {
20                     text: "查看"
21                 }, {
22                     text: "帮助"
23                 }]
24             });
25         });
26     </script>
27 </head>
28 <body>
29 </body>
30 </html>

或

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <title>Ext.toolbar.Toolbar工具栏</title>
 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
 6     <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         Ext.onReady(function () {
 9             var toolbar = new Ext.toolbar.Toolbar({
10                 renderTo: "tb",
11                 width: 500,
12                 items: [{
13                     text: "文件",
14                     handler: function (btn) { alert(btn.text); }
15                 },{
16                     text:"编辑"
17                 },{
18                     text:"格式"
19                 }, {
20                     text: "查看"
21                 }, {
22                     text: "帮助"
23                 }]
24             });
25         });
26     </script>
27 </head>
28 <body>
29     <div id="tb">
30     </div>
31 </body>
32 </html>

效果图：

3、复杂工具栏

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <title>Ext.toolbar.Toolbar工具栏</title>
 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
 6     <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         Ext.onReady(function () {
 9             var toolbar = Ext.create("Ext.Toolbar", {
10                 renderTo: Ext.getBody(),
11                 width: 500,
12                 items: [{
13                     text: "文件",
14                     handler: function (btn) { Ext.MessageBox.alert(btn.text); }
15                 }, {
16                     text: "编辑"
17                 }, {
18                     text: "格式"
19                 }, {
20                     text: "查看"
21                 }, {
22                     text: "帮助"
23                 },
24                 "->",
25                 new Ext.form.Field(), {
26                     text: "搜索"
27                 }]
28             });
29         });
30     </script>
31 </head>
32 <body>
33 </body>
34 </html>

效果图：

4、禁用/启用工具栏

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head runat="server">
 4     <title>Ext.toolbar.Toolbar工具栏</title>
 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
 6     <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script>
 7     <script type="text/javascript">
 8         Ext.onReady(function () {
 9             var toolbar = Ext.create("Ext.Toolbar", {
10                 renderTo: "tb",
11                 width: 500,
12                 items: [{
13                     text: "文件",
14                     handler: function (btn) { Ext.MessageBox.alert(btn.text); }
15                 }, {
16                     text: "编辑"
17                 }, {
18                     text: "格式"
19                 }, {
20                     text: "查看"
21                 }, {
22                     text: "帮助"
23                 },
24                 "->",
25                 new Ext.form.Field(), {
26                     text: "搜索"
27                 }]
28             });
29 
30             Ext.get("btnDisable").on("click", function () {
31                 toolbar.disable();
32             });
33             Ext.get("btnEnable").on("click", function () {
34                 toolbar.enable();
35             });
36         });
37     </script>
38 </head>
39 <body>
40 <div id="tb"></div>
41     <input id="btnDisable" type="button" value="禁用" />
42     <input id="btnEnable" type="button" value="启用" />
43 </body>
44 </html>