ExtJS专题(六):ExtJS面板Panel中工具栏Toolbar的使用

接下来要学习的就是ExtJS面板Panel中工具栏Toolbar的使用了。面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏,可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。
比如下面的代码:

  

  注意我们在Panel的构造函数中设置了tools属性的值,表示在面板头部显示三个工具栏选项按钮,分别是保存"save"、"help"、"close"三种。代码运行的效果图如下:

    

  点击help按钮会执行handler中的函数,显示一个弹出对话框,而点击其它的按钮不会有任何行为产生,因为没有定义他们的heanlder。

  将会得到如图xx所示的结果:

    

Ext中的工具栏项目主要包含下面的类:
Ext.Toolbar.Button-按钮,xtype为tbbutton
TextItem-
Ext.Toolbar.Fill-
Separator-
Spacer-
SplitButton-

 

  除了在面板头部加入这些已经定义好的工具栏选择按钮以外,还可以在顶部或底工具栏中加入各种工具栏选项。这些工具栏选项主要包括按钮、文本、空白、填充条、分隔符等。代码:

    

原文地址:https://www.cnblogs.com/Leo_wl/p/1683142.html