88. [ExtJS2.1教程-5]ToolBar(工具栏)

转自：https://llying.iteye.com/blog/324681

面板中可以有工具栏，工具栏可以位于面板顶部或底部，Ext中工具栏是由Ext.Toolbar类来表示。工具栏上可以放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具，可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。

这里工具栏主要用于面板中（panel，window等）
这里我们使用toolbar.js toolbar.html来进行演示

下面我们演示一下在window中应用工具栏
我们先创建一个window

1 Ext.onReady(function(){
2     var win = new Ext.Window({
3         width:400,
4         height:300,
5         title:"窗体"
6     });
7     win.show();
8 });

我们可以看到右上角有一个关闭按钮那其实就是一个头部工具栏按钮
window中有一个tools的配置选项，他的作用就是定义这个头部的工具栏，他接收的是一个数组
数组中的元素包含id，handle等一系列属性，其中id的值是通过Ext事先定义的一系列中选择填入的，handler是对应的响应事件。handler可以传递三个参数 Event，toolEl，panel

 1 Ext.onReady(function(){
 2     var win = new Ext.Window({
 3         width:400,
 4         height:300,
 5         title:"窗体",
 6         tools:[{
 7             id:"toggle"
 8         },{
 9             id:"close"
10         },{
11             id:"help"
12         }]
13     });
14     win.show();
15 });

这里还有一些属性比如qtip，on这里的on很特殊，可以是我们自定义的一些事件比如鼠标移入等等具体可以参见addListener
这里需要说明的是在使用qtip之前需要调用Ext的qtip初始化方法

 1 Ext.onReady(function(){
 2     Ext.QuickTips.init();
 3     var win = new Ext.Window({
 4         width:400,
 5         height:300,
 6         title:"窗体",
 7         tools:[{
 8             id:"toggle",
 9             handler:function(e,t,p){
10
11                 },
12             qtip:"hello"
13         },{
14             id:"close"
15         },{
16             id:"help"
17         }]
18     });
19     win.show();
20 });

tbar属性是顶部工具栏，可以有数组和object
我们先来看看ToolBar类，ToolBar的构造方法可以通过object或者数组类型的配置选项进行创建

 1 Ext.onReady(function(){
 2     Ext.QuickTips.init();
 3     var win = new Ext.Window({
 4         width:400,
 5         height:300,
 6         title:"窗体",
 7         tools:[{
 8             id:"toggle",
 9             handler:function(e,t,p){
10
11                 },
12             qtip:"hello"
13         },{
14             id:"close"
15         },{
16             id:"help"
17         }],
18         tbar:new Ext.Toolbar({
19             width:200,
20             height:50
21         })
22     });
23     win.show();
24 });

我们看到这里面得工具栏不过我们并没有添加工具，下面我们向里面添加一些工具项。
这里我们通过add方法进行添加

 1 Ext.onReady(function(){
 2     Ext.QuickTips.init();
 3     var win = new Ext.Window({
 4         width:400,
 5         height:300,
 6         title:"窗体",
 7         tools:[{
 8             id:"toggle",
 9             handler:function(e,t,p){
10
11                 },
12             qtip:"hello"
13         },{
14             id:"close"
15         },{
16             id:"help"
17         }],
18         tbar:new Ext.Toolbar({
19             width:200,
20             height:50
21         })
22     });
23     win.show();
24     win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"))
25 });

由于只是文本item所以没有什么按钮效果

我们再来加几个

 1 Ext.onReady(function(){
 2     Ext.QuickTips.init();
 3     var win = new Ext.Window({
 4         width:400,
 5         height:300,
 6         title:"窗体",
 7         tools:[{
 8             id:"toggle",
 9             handler:function(e,t,p){
10
11                 },
12             qtip:"hello"
13         },{
14             id:"close"
15         },{
16             id:"help"
17         }],
18         tbar:new Ext.Toolbar({
19             width:200,
20             height:50
21         })
22     });
23     win.show();
24     win.getTopToolbar().add(new Ext.Toolbar.Fill());
25     win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
26     win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));
27
28 });

这里Fill很有意思通过他我们可以实现对齐方式

 1 Ext.onReady(function(){
 2     Ext.QuickTips.init();
 3     var win = new Ext.Window({
 4         width:400,
 5         height:300,
 6         title:"窗体",
 7         tools:[{
 8             id:"toggle",
 9             handler:function(e,t,p){
10
11                 },
12             qtip:"hello"
13         },{
14             id:"close"
15         },{
16             id:"help"
17         }],
18         tbar:new Ext.Toolbar({
19             width:200,
20             height:50
21         })
22     });
23     win.show();
24     win.getTopToolbar().add(new Ext.Toolbar.Fill());
25     win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
26     win.getTopToolbar().add(new Ext.Toolbar.Spacer());
27     win.getTopToolbar().add(new Ext.Toolbar.Separator());
28     win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]);
29     win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));
30
31 });

Spacer是空格 Separator是分隔符 add方法可以是多个参数

当然也可以通过配置选项的方式不适用new

1 win.getTopToolbar().add(new Ext.Toolbar.Fill());

2 win.getTopToolbar().add({xtype:"tbfill"});

上面的两句是等效的
一般我们是不会指定toolbar的宽高，他会自适应
默认toolbar的参数是button

 1         tbar:new Ext.Toolbar({
 2             //width:200,
 3             //height:50
 4         })
 5     });
 6     win.show();
 7     win.getTopToolbar().add({text:"defButton"});
 8     win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
 9     win.getTopToolbar().add(new Ext.Toolbar.Spacer());
10     win.getTopToolbar().add(new Ext.Toolbar.Separator());
11     win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]);
12     win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));

这里的Ext.ToolBar.Button中有一个pressed : Boolean
表示是否显示已按下状态
这里还有一个SplitButton 我们在里面可以看到他有一个menu的配置选项，他可以给我们呈现出下拉菜单按钮

 1 win.getTopToolbar().add({text:"defButton",pressed:true});
 2     win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
 3     win.getTopToolbar().add(new Ext.Toolbar.Spacer());
 4     win.getTopToolbar().add(new Ext.Toolbar.Separator());
 5     win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]);
 6     win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));
 7
 8     var menu = new Ext.menu.Menu({
 9         items:[{
10             text:"first"
11         },"-",{
12             text:"second"
13         }]
14     })
15     win.getTopToolbar().add(new Ext.Toolbar.SplitButton({
16         text:"splitbutton",
17         menu:menu
18     }));

这里需要注意win.getTopToolbar()必须写在win.show()方法之后，因为必须先进行渲染才能取得一些他的一些东西
当然也可以通过window中的tbar：【】进行添加toolbar中的相关信息

 1 Ext.onReady(function(){
 2     Ext.QuickTips.init();
 3     var win = new Ext.Window({
 4         width:400,
 5         height:300,
 6         title:"窗体",
 7         tools:[{
 8             id:"toggle",
 9             handler:function(e,t,p){
10
11                 },
12             qtip:"hello"
13         },{
14             id:"close"
15         },{
16             id:"help"
17         }],
18         tbar:[new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]
19     });
20     win.show();
21 });

与tbar对应的还有一个bbar只不过位置是在底部，使用上面还是一样的

 1 Ext.onReady(function(){
 2     Ext.QuickTips.init();
 3     var win = new Ext.Window({
 4         width:400,
 5         height:300,
 6         title:"窗体",
 7         tools:[{
 8             id:"toggle",
 9             handler:function(e,t,p){
10
11                 },
12             qtip:"hello"
13         },{
14             id:"close"
15         },{
16             id:"help"
17         }],
18         tbar:new Ext.Toolbar({
19             //width:200,
20             //height:50
21         }),
22         bbar:[new Ext.Toolbar.Button({text:"bitem"})]
23     });
24     win.show();

88. [ExtJS2.1教程-5]ToolBar(工具栏)相关推荐

QT ToolBar 工具栏浮动状态
想实时获取到 QT ToolBar 工具栏浮动的状态,以实时调整窗体的布局. 先使用查找引擎,发现找不到什么有用的文章. 只能查 QT Help,最后获取到使用 SIGNAL topLevelChan ...
ALV隐藏TOOLBAR工具栏/应用程序工具栏
ALV隐藏应用程序工具栏: 勾选屏幕设置,无应用程序工具栏未勾选效果: 勾选效果: ALV隐藏Toolbar工具栏: 由Layout参数no_toolbar = 'X' 控制: 未隐藏效果: 隐藏效 ...
LTspice基础教程-003.LTspice工具栏使用介绍
直接上图,如下是我们必须学会的工具栏按钮,下面会详细介绍. 首先我们从放置被动器件开始,搭建一个RLC低通滤波电路,如下: 放置完器件后,我们开始连线以及放置地,当鼠标变成大十字说明进入了画线状态: ...
Toolbar 工具栏（导航栏）
工具栏(导航栏)(一般在顶端) 继承自ViewGroup 首先我们要知道什么是Toolbar 我们先创建一个hello World 将改为 run一下所以Toolbar其实就是用来替换这个bar栏 ...
Qt ToolBar工具栏里同时显示图标和文字
Qt默认情况下(Qt版本5.13),工具栏添加Action后,只显示Action的图标,如下图所示这种界面不方便操作,最好在工具栏添加文字,添加文字方式(在构造函数中添加)为: ui->too ...
toolBar——工具栏
创建工具栏鼠标右键添加工具栏在工具栏里创建图标点击下方Action Editor中的白色文件图标进行新建设置工具栏图标信息选择对应的图标新建成功后,就会显示在Action Editor 然 ...
第十二章、Designer中的menu菜单、toolBar工具栏和Action动作
老猿Python博文目录专栏:使用PyQt开发图形界面Python应用老猿Python博客地址一.引言 Qt Designer中的部件栏并没有菜单.toolBar以及Action相关的部件,仅在 ...
IAR for ARM系列教程（二）_主窗口与工具栏的描述
推荐分享一个大神的人工智能教程.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到人工智能的队伍中来!http://www.captainbed.net/strongerhuang 我的网站:h ...
EWSTM8系列教程03_主窗口、工具栏的概述
IAR最新全套教程: 1.EWSTM8系列教程01_IAR介绍.下载.安装和注册 2.EWSTM8系列教程02_新建基础软件工程 3.EWSTM8系列教程03_主窗口.工具栏的概述 4.EWSTM8系 ...

88. [ExtJS2.1教程-5]ToolBar(工具栏)

88. [ExtJS2.1教程-5]ToolBar(工具栏)相关推荐

最新文章

热门文章