Ext.toolbar.Toolbar工具栏

来源：互联网发布：1688和淘宝的区别编辑：程序博客网时间：2024/04/30 04:41

1、Ext.toolbar.Toolbar主要配置项

Ext.toolbar.Toolbar配置

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

工具栏常用元素

工具栏元素名称说明Ext.button.Button可以加入到工具栏的按钮组件Ext.toolbar.Fill用于填充满工具栏的空白元素Ext.toolbar.Item工具栏的基本功能支持Ext.toolbar.Separator工具栏分隔符Ext.toolbar.Spacer工具栏元素之间的间隔符，默认为2pxExt.toolbar.TextItem文本元素

工具栏常用方法

方法名称参数类型说明addMixed arg1,Mixed arg2,...

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

支持的有效类型包括：

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

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

Item，Ext.toolbar.Item子类

String,字符串

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

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

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

Ext.button.Button主要配置项目

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

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>

效果图：