工具栏和菜单栏
前两节的内容，我们介绍了信息提示框和进度条，对ExtJs组件的配置及使用有了一定认识。本节内容将介绍工具栏(Ext.toolbar.Toolbar)组件和菜单(Ext.menu.Menu)组件的使用。
1.认识 Ext.toolbar.Toolbar
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 | 工具栏元素之间的空白空间，默认为2像素(‘ ‘) |
| Ext.toolbar.TextItem | 文本元素 |
Ext.toolbar.Toolbar支持的常用方法，通过这些方法就可以创建出功能强大的工具栏，快来看看吧~
| 方法名 | 参数类型 | 说明 |
| add | Mixed arg1, Mixed arg2, Mixed etc. |
该方法用于向工具栏中添加元素，它支持一个变长的参数列表，可以一次性加入多个工具栏元素，支持的有效类型包括: Ext.button.Button，一个有效的按钮而配置对象; HtmlElement，标准的HTML元素 Field，表单字段 Item， Ext.toolbar.Item的任何子类 String，普通字符串，注意有些特殊的字符串进行了不同的解释，例如: ‘-‘创建一个工具栏分割元素；‘‘创建一个空白元素；‘->‘创建一个工具栏的Fill元素，填充工具栏空白区域 |
2.创建工具栏
调用格式:
add(Mixed arg1, Mixed arg2, Mixed etc.)
参数说明: 参考上表
返回值: void
Ext.buttom.Button主要配置项目表
| 配置项 | 类型 | 说明 |
| handler | Function | 一个函数，在按钮被点击之后调用 |
| iconCls | String | 一个样式类，提供在按钮上显示的图标 |
| menu | Mixed | 参数可以是一个菜单对象或者是菜单对象的id，也可以是一个有效的菜单配置对象 |
| text | String | 按钮上显示的文字 |
时间： 2024-08-10 19:04:32