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元素，填充工具栏空白区域 |
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 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 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 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 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>
效果图：
