zoukankan      html  css  js  c++  java

  • Ext.toolbar.Toolbar工具栏

    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//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                  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                  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                  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                  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>

    效果图：
  • 相关阅读:
    iOS7中都Bar的透明问题
    iOS 如何使用自定义字体
    iOS xib中TableView创建的2种模式
    iOS 保存CGRect，CGPoint到NSArray'的方法
    iOS 中通过使用Google API获得Google服务
    转载一篇ios7的新API文章
    移动开发常用的第三方控件下载网页
    iOS 查看系统字体效果的网页
    iOS 基于UIWebView的应用特点
    Cocos2d 中的Sprite大小调整问题
  • 原文地址：https://www.cnblogs.com/libingql/p/2446329.html
Copyright © 2011-2022 走看看