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

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

这里工具栏主要用于面板中(panel,window等)

这里我们使用toolbar.js toolbar.html来进行演示

下面我们演示一下在window中应用工具栏

我们先创建一个window

 Ext.onReady(function(){
var win = new Ext.Window({
width:400,
height:300,
title:"窗体"
});
win.show();
});

我们可以看到右上角有一个关闭按钮 那其实就是一个头部工具栏按钮
window中有一个tools的配置选项,他的作用就是定义这个头部的工具栏,他接收的是一个数组

数组中的元素包含id,handle等一系列属性,其中id的值是通过Ext事先定义的一系列中选择填入的,handler是对应的响应事件。handler可以传递三个参数 Event,toolEl,panel

 Ext.onReady(function(){
var win = new Ext.Window({
width:400,
height:300,
title:"窗体",
tools:[{
id:"toggle"
},{
id:"close"
},{
id:"help"
}]
});
win.show();
});

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

 Ext.onReady(function(){
Ext.QuickTips.init();
var win = new Ext.Window({
width:400,
height:300,
title:"窗体",
tools:[{
id:"toggle",
handler:function(e,t,p){ },
qtip:"hello"
},{
id:"close"
},{
id:"help"
}]
});
win.show();
});

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

 Ext.onReady(function(){
Ext.QuickTips.init();
var win = new Ext.Window({
width:400,
height:300,
title:"窗体",
tools:[{
id:"toggle",
handler:function(e,t,p){ },
qtip:"hello"
},{
id:"close"
},{
id:"help"
}],
tbar:new Ext.Toolbar({
width:200,
height:50
})
});
win.show();
});

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

 Ext.onReady(function(){
Ext.QuickTips.init();
var win = new Ext.Window({
width:400,
height:300,
title:"窗体",
tools:[{
id:"toggle",
handler:function(e,t,p){ },
qtip:"hello"
},{
id:"close"
},{
id:"help"
}],
tbar:new Ext.Toolbar({
width:200,
height:50
})
});
win.show();
win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"))
});

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


我们再来加几个

 Ext.onReady(function(){
Ext.QuickTips.init();
var win = new Ext.Window({
width:400,
height:300,
title:"窗体",
tools:[{
id:"toggle",
handler:function(e,t,p){ },
qtip:"hello"
},{
id:"close"
},{
id:"help"
}],
tbar:new Ext.Toolbar({
width:200,
height:50
})
});
win.show();
win.getTopToolbar().add(new Ext.Toolbar.Fill());
win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"})); });

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

 Ext.onReady(function(){
Ext.QuickTips.init();
var win = new Ext.Window({
width:400,
height:300,
title:"窗体",
tools:[{
id:"toggle",
handler:function(e,t,p){ },
qtip:"hello"
},{
id:"close"
},{
id:"help"
}],
tbar:new Ext.Toolbar({
width:200,
height:50
})
});
win.show();
win.getTopToolbar().add(new Ext.Toolbar.Fill());
win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
win.getTopToolbar().add(new Ext.Toolbar.Spacer());
win.getTopToolbar().add(new Ext.Toolbar.Separator());
win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]);
win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"})); });

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


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

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

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

上面的两句是等效的
一般我们是不会指定toolbar的宽高,他会自适应

默认toolbar的参数是button

         tbar:new Ext.Toolbar({
//width:200,
//height:50
})
});
win.show();
win.getTopToolbar().add({text:"defButton"});
win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
win.getTopToolbar().add(new Ext.Toolbar.Spacer());
win.getTopToolbar().add(new Ext.Toolbar.Separator());
win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]);
win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"}));

这里的Ext.ToolBar.Button中有一个pressed : Boolean
表示是否显示已按下状态

这里还有一个SplitButton 我们在里面可以看到他有一个menu的配置选项,他可以给我们呈现出下拉菜单按钮

 win.getTopToolbar().add({text:"defButton",pressed:true});
win.getTopToolbar().add(new Ext.Toolbar.TextItem("titem"));
win.getTopToolbar().add(new Ext.Toolbar.Spacer());
win.getTopToolbar().add(new Ext.Toolbar.Separator());
win.getTopToolbar().add([new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]);
win.getTopToolbar().add(new Ext.Toolbar.Button({text:"bitem"})); var menu = new Ext.menu.Menu({
items:[{
text:"first"
},"-",{
text:"second"
}]
})
win.getTopToolbar().add(new Ext.Toolbar.SplitButton({
text:"splitbutton",
menu:menu
}));

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

 Ext.onReady(function(){
Ext.QuickTips.init();
var win = new Ext.Window({
width:400,
height:300,
title:"窗体",
tools:[{
id:"toggle",
handler:function(e,t,p){ },
qtip:"hello"
},{
id:"close"
},{
id:"help"
}],
tbar:[new Ext.Toolbar.Spacer(),new Ext.Toolbar.Spacer()]
});
win.show();
});

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

 Ext.onReady(function(){
Ext.QuickTips.init();
var win = new Ext.Window({
width:400,
height:300,
title:"窗体",
tools:[{
id:"toggle",
handler:function(e,t,p){ },
qtip:"hello"
},{
id:"close"
},{
id:"help"
}],
tbar:new Ext.Toolbar({
//width:200,
//height:50
}),
bbar:[new Ext.Toolbar.Button({text:"bitem"})]
});
win.show();

88. [ExtJS2.1教程-5]ToolBar(工具栏)的更多相关文章

  1. [转载]ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  2. ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏

    本篇讲解三个工具栏控件.其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单,Ext.toolbar.Paging专门用来控制数据集的分页展示,Ext.ux.statusba ...

  3. 第15.15节 PyQt(Python+Qt)入门学习:Designer的menu菜单、toolBar工具栏和Action动作详解

    老猿Python博文目录 老猿Python博客地址 一.引言 Qt Designer中的部件栏并没有菜单.toolBar以及Action相关的部件,仅在MainWindow类型窗口提供了menu.to ...

  4. PyQt5教程——菜单和工具栏(3)

    PyQt5中的菜单和工具栏 在这部分的PyQt5教程中,我们将创建菜单和工具栏.菜单式位于菜单栏的一组命令操作.工具栏是应用窗体中由按钮和一些常规命令操作组成的组件. 主窗口 QMainWindow类 ...

  5. Javascript - ExtJs - Toolbar - 工具栏

    Toolbar组件 创建工具栏 Toolbar类是一种子组件,它不能独立存在,需要依附在其它组件上面.很多容器组件都具备tbar(顶部工具栏).bbar(底部工具栏)的配置,所以可以像下面那样使用它. ...

  6. Toolbar 工具栏 菜单 标题栏 Menu

    要使用Toolbar,要先将标题栏(ActionBar)关掉: style.xml中:<style name="MainActivityTheme" parent=" ...

  7. Android教程 -08 ToolBar的使用和主题的介绍

    ActionBar 简介 视频为本篇播客知识点讲解,建议采用超清模式观看, 欢迎点击订阅我的优酷 讲解ToolBar之前首先需要了解 ActionBar, 两者使用起来基本上一致. Android 3 ...

  8. 第十二章、Designer中的menu菜单、toolBar工具栏和Action动作

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.引言 Qt Designer中的部件栏并没有菜单.toolBar以及Action相关的部件,仅在 ...

  9. Xamarin教程索引页

    持续更新中-- 近期学习处理Xamarin.Android动画内容 Xamarin指南 -- 官网教程翻译 Xamarin跨平台开发 Xamarin Workbooks Xamarin Workboo ...

随机推荐

  1. Hibernate自动事务揪出的编码不规范

    最近重构的项目(Java初学中),Service层一个获取通知记录报错: org.springframework.dao.InvalidDataAccessResourceUsageException ...

  2. Flask 框架构建

    Flask 框架构建,目标构建成Django类似的结构 一. 先看看构建后的效果 # 第一次初始化 python manage.py db init # 生成数据库版本 python manage.p ...

  3. shouldComponentUpdate不能直接比较object

    凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说,其state的改变(调用this.setState()方法)以及从父组件接受的props发生变化时,会导致组件重渲染,正所谓&qu ...

  4. 数字化婚姻配对尝试问题(C++实现)

    问题描述:一.标题: 数字化婚姻配对尝试 二.题目: 建立一个模型,来模拟推导社会男女择偶过程. 为了模型简化,一个人的特性指标有三个,这里假设为财富.样貌.品格,每个指标均可取值1-100之间任意数 ...

  5. vmware vSphere client中,选择文件->部署OVF模板,报错处理方法

    在vmware vSphere client中,选择文件->部署OVF模板,选择指定的OVA文件,按步骤进行,则会出现这样的错误:此OVF软件包使用了不受支持的功能.OVF软件包需要不支持的硬件 ...

  6. Ansible 利用playbook批量部署Nginx

    我这里直接部署的,环境已经搭建好,如果不知道的小伙伴可以看上一遍ansible搭建,都写好了,这里是根据前面环境部署的 192.168.30.21     ansible 192.168.30.25  ...

  7. Centos7下mysql的主从配置

    最近,有朋友业务并发量比较大,让我帮他配置个主从,来缓解数据库的压力.下面就是我配置的,有需要的朋友可以借鉴下. 首先,我得到2台服务器: 172.18.2.142(主) 172.18.2.141(从 ...

  8. redis数据库学习笔记

    redis数据库 工作需要,简单了解一下redis数据库,供后续参考和复习使用. 一.简介 Redis是一个开源(BSD许可),内存存储的数据结构服务器,可用作数据库,高速缓存和消息队列代理.它支持字 ...

  9. hdu 1584 蜘蛛纸牌

    把小的牌放到大的牌上,求最小移动的距离和 DFS遍历所有的可能,把每一张牌与之要移动的牌都进行两层for的循环,注意回溯条件满足立刻break 代码(算法借鉴) #include <bits/s ...

  10. PHP基础库及扩展库安装

    一.安装PHP所需的lib库(基础库): 1.yum install zlib-devel libxml2-devel libjpey-devel libjpeg-turbo-devel libico ...