Ext.toolbar.Toolbar工具栏
来源:互联网 发布:puppy linux 中文包 编辑:程序博客网 时间:2024/04/30 03:52
Ext.toolbar.Toolbar工具栏
1、Ext.toolbar.Toolbar主要配置项
Ext.toolbar.Toolbar配置
工具栏常用元素
工具栏常用方法
用于向工具栏中添加元素,支持变长参数列表,可以一次性加入多个工具栏元素
支持的有效类型包括:
Ext.button.Button,一个有效的按钮配置对象
HtmlElement,标准HTML元素 Field,表单字段
Item,Ext.toolbar.Item子类
String,字符串
'-'创建一个工具栏分割元素
''创建一个工具栏空白元素
'->'创建一个工具栏Fill元素,填充工具栏空白区域
Ext.button.Button主要配置项目
2、基本工具栏
代码:
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 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 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> 7 <script type="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//DTD XHTML 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 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> 7 <script type="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//DTD XHTML 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 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> 7 <script type="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//DTD XHTML 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 <script src="ext-4.0.7-gpl/bootstrap.js" type="text/javascript"></script> 7 <script type="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 <div id="tb"></div>41 <input id="btnDisable" type="button" value="禁用" />42 <input id="btnEnable" type="button" value="启用" />43 </body>44 </html>
效果图:
阅读全文
0 0
- Ext.toolbar.Toolbar工具栏
- Ext.toolbar.Toolbar 工具栏
- Ext.toolbar.Toolbar工具栏
- Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- ExtJs4 笔记(12) Ext.toolbar.Toolbar 工具栏、Ext.toolbar.Paging 分页栏、Ext.ux.statusbar.StatusBar 状态栏
- 用ext js toolbar创建arcgis server adf 的工具栏
- Ext:加入了toolbar工具栏,并插入按钮
- Ext.toolbar.Toolbar工条
- Windows 工具栏ToolBar
- Toolbar工具栏.doc
- 工具栏(toolbar)
- extjs4 toolbar工具栏
- toolBar-->添加工具栏
- 【two-pointer】Codeforces762C[Two strings]题解
- CentOS 6.6 升级GCC G
- Android h5全屏播放video
- Android获取屏幕的宽高的方法
- DevExpress DateEdit 5 常见问题解决方法
- Ext.toolbar.Toolbar工具栏
- Windows 10 /win10 上使用GIT慢的问题,或者命令行反应慢的问题
- 标签title属性现实内容时间变长,重写标签的onmouseover、onmouseou方法
- Normalize.css 与传统的 CSS Reset 有哪些区别?
- 采用基于MQTT的ActiveMQ实现消息推送
- 性能测试实施(2)之典型交易选取
- 使用win8.1安装tensorflow CPU一次成功
- vue学习笔记03
- suse11sp3双网卡bind