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 2 3 4Ext.toolbar.Toolbar工具栏 5 6 7 27 28 29 30
或
1 2 3 4Ext.toolbar.Toolbar工具栏 5 6 7 27 28 293031 32
效果图:
3、复杂工具栏
代码:
1 2 3 4Ext.toolbar.Toolbar工具栏 5 6 7 31 32 33 34
效果图:
4、禁用/启用工具栏
代码:
1 2 3 4Ext.toolbar.Toolbar工具栏 5 6 7 38 39 40 41 42 43 44
效果图: