Ext.toolbar.Toolbar工条

最新推荐文章于 2023-03-20 22:31:53 发布
最新推荐文章于 2023-03-20 22:31:53 发布
阅读量567 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smshuxue/article/details/33324913
版权

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 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head runat="server">

 4    <title>Ext.toolbar.Toolbar工具栏</title>

 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css"rel="stylesheet" type="text/css" />

 6     <scriptsrc="ext-4.0.7-gpl/bootstrap.js"type="text/javascript"></script>

 7     <scripttype="text/javascript">

 8         Ext.onReady(function () {

 9             var toolbar = Ext.create("Ext.Toolbar",{

10                 renderTo: Ext.getBody(),

11                 width: 500,

12                 items: [{

13                     text: "文件",

14                     handler: function (btn) {Ext.MessageBox.alert(btn.text); }

15                 },{

16                     text:"编辑"

17                 },{

18                     text:"格式"

19                 }, {

20                     text: "查看"

21                 }, {

22                     text: "帮助"

23                 }]

24             });

25         });

26     </script>

27</head>

28<body>

29</body>

30</html>

或

 1 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head runat="server">

 4    <title>Ext.toolbar.Toolbar工具栏</title>

 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css"rel="stylesheet" type="text/css" />

 6     <scriptsrc="ext-4.0.7-gpl/bootstrap.js"type="text/javascript"></script>

 7     <scripttype="text/javascript">

 8         Ext.onReady(function () {

 9             var toolbar = new Ext.toolbar.Toolbar({

10                 renderTo: "tb",

11                 width: 500,

12                 items: [{

13                     text: "文件",

14                     handler: function (btn) {alert(btn.text); }

15                 },{

16                     text:"编辑"

17                 },{

18                     text:"格式"

19                 }, {

20                     text: "查看"

21                 }, {

22                     text: "帮助"

23                 }]

24             });

25         });

26     </script>

27</head>

28<body>

29     <div id="tb">

30     </div>

31</body>

32</html>

效果图：

3、复杂工具栏

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head runat="server">

 4    <title>Ext.toolbar.Toolbar工具栏</title>

 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css"rel="stylesheet" type="text/css" />

 6     <scriptsrc="ext-4.0.7-gpl/bootstrap.js"type="text/javascript"></script>

 7     <scripttype="text/javascript">

 8         Ext.onReady(function () {

 9             var toolbar = Ext.create("Ext.Toolbar", {

10                 renderTo: Ext.getBody(),

11                 width: 500,

12                 items: [{

13                     text: "文件",

14                     handler: function (btn) {Ext.MessageBox.alert(btn.text); }

15                 }, {

16                     text: "编辑"

17                 }, {

18                     text: "格式"

19                 }, {

20                     text: "查看"

21                 }, {

22                     text: "帮助"

23                 },

24                 "->",

25                 new Ext.form.Field(), {

26                     text: "搜索"

27                 }]

28             });

29         });

30     </script>

31</head>

32<body>

33</body>

34</html>

效果图：

4、禁用/启用工具栏

代码：

 1 <!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 2 <html xmlns="http://www.w3.org/1999/xhtml">

 3 <head runat="server">

 4    <title>Ext.toolbar.Toolbar工具栏</title>

 5     <link href="ext-4.0.7-gpl/resources/css/ext-all.css"rel="stylesheet" type="text/css" />

 6     <scriptsrc="ext-4.0.7-gpl/bootstrap.js"type="text/javascript"></script>

 7     <scripttype="text/javascript">

 8         Ext.onReady(function () {

 9             var toolbar = Ext.create("Ext.Toolbar", {

10                 renderTo: "tb",

11                 width: 500,

12                 items: [{

13                     text: "文件",

14                     handler: function (btn) {Ext.MessageBox.alert(btn.text); }

15                 }, {

16                     text: "编辑"

17                 }, {

18                     text: "格式"

19                 }, {

20                     text: "查看"

21                 }, {

22                     text: "帮助"

23                 },

24                 "->",

25                 new Ext.form.Field(), {

26                     text: "搜索"

27                 }]

28             });

29

30             Ext.get("btnDisable").on("click", function () {

31                 toolbar.disable();

32             });

33             Ext.get("btnEnable").on("click", function () {

34                 toolbar.enable();

35             });

36         });

37     </script>

38</head>

39<body>

40 <divid="tb"></div>

41     <input id="btnDisable"type="button" value="禁用" />

42     <input id="btnEnable"type="button" value="启用" />

43</body>

44 </html>

 


软件-攻城狮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ExtjsBreadCrumbs:我快速而肮脏地尝试制作 Extjs 面包屑扩展
06-20
Extjs面包屑添加一名作者我快速而肮脏地尝试制作 Extjs 面包屑扩展。 使用 Extjs 4.1.0 测试这里它运行在 jsfiddle.net 注意：这是为了在我正在从事的项目中具有我想要的功能而量身定制的。 所以我认为它的功能不像...
Ext.toolbar.Toolbar工具栏
weixin_34417200的博客
04-13 198
1、Ext.toolbar.Toolbar主要配置项  Ext.toolbar.Toolbar配置 配置项参数类型说明 enableOverflow Boolean 设置为true则自动为工具栏添加一个下拉按钮，用于显示超过工具栏范围的按钮 vertical Boolean 设置为true则显示一个垂直的工具栏，默认为false  工具栏常用元素 ...
Ext.widgets-toolbar
blackant2的专栏
12-05 1860
Ext.Toolbar工具栏,使用起来很简单，add已准备好的元素就行方法Toolbar( Object/Array config )构造add( Mixed arg1, Mixed arg2, Mixed etc. ) : void增加元素可以是 1:Ext.Toolbar.Button            相当于addButton2:HtmlElement                相当
工具条（Ext.Toolbar）
方逸涛的专栏
09-21 1万+
工具条（Ext.Toolbar） 当在工具条中同时出现Menu和Element时，会导致Menu失灵。 1、Ext.Toolbar的常用方法： addButton() addElement() addField() addFill() addSeparator() addText() add() 2、普通工具条 Js代码 Ext.onReady(function(){
Extjs-工具条和菜单 Ext.menu和Ext.Toolbar
热门推荐
itlwc
08-17 1万+
1.创建一个简单工具条 效果图 Ext.onReady(function(){ // 创建带三个按钮的工具条 var tb = new Ext.Toolbar({ width : 300, items : [{ text: '新建' },{ text: '修改' }
ext Panel+toolbar+button 实作带注释
06-26
ext Panel+toolbar+button 实作带注释 Tom 实作实例,推荐入门学习,不带Ext js lib,请自行加入
Ext Js权威指南(.zip.001
09-26
10.1.6　虚拟滚动条的工作原理：ext.grid.pagingscroller / 511 10.1.7　锁定列的运行流程：ext.grid.lockable与ext.grid.lockingview / 516 10.2　使用grid / 520 10.2.1　最简单的grid / 520 10.2.2　列的配置项 /...
学习ExtJS Panel常用方法
12-01
xtype：在EXTJS的可视化组件部署中的一种机制，即通过指定xtype的值，来告诉容量如何初始化所包含的级件，如xtype:”textfiled”,表示使用Ext.form.TextFile来进行初始化当前组件。 xtype Class ————- ————...
EXT核心API详解
04-28
65、Ext.Toolbar.Separator类 ……… 56 66、Ext.Toolbar.Spacer类 …………… 56 67、Ext.Toolbar.TextItem类 ……… 56 68、Ext.Toolbar.Fill类 ……………… 56 69、Ext.grid.ColumnModel类 ……… 58 70、Ext....
ExtJS2.0实用简明教程——工具栏Toolbar
小肖的专栏
02-23 1155
面板中可以有工具栏，工具栏可以位于面板顶部或底部，Ext中工具栏是由Ext.Toolbar类表示。工具栏上可以存放按钮、文本、分隔符等内容。面板对象中内置了很多实用的工具栏，可以直接通过面板的tools配置选项往面板头部加入预定义的工具栏选项。比如下面的代码：Ext.onReady(function(){ new Ext.Panel({ renderTo:"hello", title:"h
3.4 Ext JS工具栏 toolbar全介绍
oscar999的专栏
03-20 473
Toolbar，工具栏 ，是容器类的一个子类， 用于放置按钮等组件。其对应的类是Ext.toolbar.Toolbar ,
extjs中Toolbar工具栏的用法
学习也休闲
10-15 1万+
文章转载于：Extjs msgTarget 提示位置  http://www.studyofnet.com/news/161.html   extjs中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单，工具栏控件可以被附加在面板、窗口等容器类控件中，可以在四个方位添加多个工具栏控件。   Ext.onReady(function() {
Ext工具栏Toolbar
weixin_33882443的博客
01-27 129
2019独角兽企业重金招聘Python工程师标准>>> ...
[ExtJS5学习笔记]第八节 Extjs5的Ext.toolbar.Toolbar工具条组件及其应用
weixin_30436101的博客
08-12 196
本文地址：http://blog.csdn.net/sushengmiyan/article/details/38515499本文作者：sushengmiyan-------------------------------------------------------------资源链接-----------------------------------------------------...
ExtJs4 笔记（12） Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏...
weixin_30291791的博客
12-23 170
《回到系列目录 本篇讲解三个工具栏控件。其中Ext.toolbar.Toolbar可以用来放置一些工具类操控按钮和菜单，Ext.toolbar.Paging专门用来控制数据集的分页展示，Ext.ux.statusbar.StatusBar用来展示当前的状态信息。 一、Ext.toolbar.Toolbar 工具栏控件可以被附加在面板、窗口等容器类控件中，可以在四个方位添加多个工具栏控件。...
Ext.toolbar.Toolbar的学习，是Ext Js 4的类，Ext Js3的用法有些不同
张波的技术积累
07-26 3339
1：toolbar1.jsp  <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+reques
Ext.toolbar.Toolbar 工具栏
cherryqiao的博客
01-05 319
http://blog.sina.com.cn/s/blog_94481d61010155je.html
xtype : 'button', // handler是对首要Event的响应函数 //handler : function() {} 添加事件！ handler : function(button, event) { var params = [], params2, tool = button .up('toolbar'), dates = tool .query('datefield'), ymd = tool .down('#YMD').getValue();deptid = 1; params.push(dates[0].getRawValue()); params.push(dates[1].getRawValue()); params.push(deptid); params.push(ymd); params2 = 100000;// 导出数据的最大条数 Ext.Msg.confirm('删除', '数据导出最多十万条，您确定导出吗？', function(yn) { if (yn == 'yes') { Ext.Msg.wait('提示', '正在保存数据，请稍候！'); DxUtils.getIndexDataExcel( params, me.mothed, 0, params2, function(d) { if (d.length > 0) { var filename = d; var downloader = me .down('#downFile'); downloader .load({ params : { filename : filename }, url : 'export2007' }); Ext.Msg.hide(); Ext.Msg .alert( '提示', '导出数据成功！'); } }); } }); }, width : 80, iconCls : 'excel', text : '导出全部', id : 'exportExcel69', disabled : true
最新发布
03-24
这段代码是在ExtJS框架中创建一个按钮的配置，其中xtype属性表示类型是按钮。...这段代码还使用了ExtJS中的布局容器，例如up()和down()来获取父容器或子容器，并使用query()方法来查找某种类型的子组件。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值