Ext.toolbar.Toolbar工条

来源：互联网发布：高中英语单词读音软件编辑：程序博客网时间：2024/04/30 04:29

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

一个样式类，提供在按钮上显示的图标

Mixed

参数可以是一个菜单对象或者是菜单对象的id，也可以是一个有效的菜单配置对象

text

String

按钮上显示的文字

2、基本工具栏

代码：

1 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 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 <scriptsrc="ext-4.0.7-gpl/bootstrap.js"type="text/javascript"></script>

7 <scripttype="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//DTDXHTML 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 <scriptsrc="ext-4.0.7-gpl/bootstrap.js"type="text/javascript"></script>

7 <scripttype="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//DTDXHTML 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 <scriptsrc="ext-4.0.7-gpl/bootstrap.js"type="text/javascript"></script>

7 <scripttype="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//DTDXHTML 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 <scriptsrc="ext-4.0.7-gpl/bootstrap.js"type="text/javascript"></script>

7 <scripttype="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 });

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 <divid="tb"></div>

41 <input id="btnDisable"type="button" value="禁用" />

42 <input id="btnEnable"type="button" value="启用" />

43</body>

44 </html>

0 0