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

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>

效果图：

posted @ 2012-04-13 20:55  libingql  阅读(22055)  评论(0)  编辑  收藏  举报