码迷,mamicode.com
首页 > Web开发 > 详细

[ExtJs5.1.0系列-第4天] 工具栏和菜单栏

时间:2015-09-17 21:49:08      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:

工具栏和菜单栏

    前两节的内容,我们介绍了信息提示框和进度条,对ExtJs组件的配置及使用有了一定认识。本节内容将介绍工具栏(Ext.toolbar.Toolbar)组件和菜单(Ext.menu.Menu)组件的使用。

1.认识 Ext.toolbar.Toolbar

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工具栏元素之间的空白空间,默认为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主要配置项目表

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

    

[ExtJs5.1.0系列-第4天] 工具栏和菜单栏

标签:

原文地址:http://my.oschina.net/LvSantorini/blog/507837

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!