<!DOCTYPE html>

<html>

   <head>

    <meta http-equiv="Content-Type"  content="text/html;charset=utf-8">

    <link rel="stylesheet" type="text/css" href="../../study/EXTJS/ext-4.2.1.883/resources/css/ext-all.css" />

    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/bootstrap.js"></script>

    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>

 <script type="text/javascript">

    Ext.onReady(function(){

var toolbar = new Ext.toolbar.Toolbar({

    renderTo : 'toolbar',

    vertical :true,

    enableOverflow : true,

    width : 300});

    toolbar.add([

        {

            text : 'hello usegear',

            handler : onButtonClick,

            iconCls : 'newIcon'

        },

        {text:'open',handler:onButtonClick,iconCls:'openIcon'},

        {text:'save',handler:onButtonClick,iconCls:'saveIcon'}

        ]);

    function onButtonClick(btn){

        alert(btn.text);

        }

    });

</script>

   </head>

   <body>

<div id='toolbar'></div>

        </body>

</html>

包含按钮的简单工具栏

效果：

拓展思路：

<!DOCTYPE html>

<html>

   <head>

    <meta http-equiv="Content-Type"  content="text/html;charset=utf-8">

    <link rel="stylesheet" type="text/css" href="../../study/EXTJS/ext-4.2.1.883/resources/css/ext-all.css" />

    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/bootstrap.js"></script>

    <script type="text/javascript" src="../../study/EXTJS/ext-4.2.1.883/locale/ext-lang-zh_CN.js"></script>

 <script type="text/javascript">

    Ext.onReady(function(){

var toolbar = new Ext.toolbar.Toolbar({

    renderTo : 'toolbar',

    vertical :true,

    enableOverflow : true,

    width : 300});

    toolbar.add([

        {text : 'hello usegear',handler : onButtonClick,iconCls : 'newIcon'},

        {text:'open',handler:onButtonClick,iconCls:'openIcon'},

        {text:'save',handler:onButtonClick,iconCls:'saveIcon'},

{

    xtype:"radio",

    fieldLabel:"Label",

    boxLabel:"Box label",

    name:"radio",

    inputValue:"radiovalue"

  },{

    xtype:"checkbox",

    fieldLabel:"Label",

    boxLabel:"Box label",

    name:"checkbox",

    inputValue:"cbvalue"

  },{

    xtype:"datefield",

    fieldLabel:"Date",

    name:"datevalue"

  },{

    xtype:"timefield",

    fieldLabel:"Time",

    name:"timevalue"

  },{

    xtype:"numberfield",

    fieldLabel:"Number",

    name:"numbervalue"

  },{

    xtype:"textfield",

    fieldLabel:"Text",

    name:"textvalue"

  },{

    xtype:"combo",

    fieldLabel:"Text",

    name:"combovalue",

    hiddenName:"combovalue"

  },{

    xtype:"fieldset",

    title:"Legend",

    autoHeight:true

  },

        {xtype:"panel",

text:"Panel",

items:[{

    xtype:"checkbox",

    boxLabel:"Box label",

    name:"checkbox",

    inputValue:"cbvalue"

  },{

    xtype:"radio",

    boxLabel:"Box label",

    name:"radio",

    inputValue:"radiovalue"

  },{

    xtype:"checkbox",

    boxLabel:"Box label",

    name:"checkbox",

    inputValue:"cbvalue"

  }]

  }

  ]

        );

    function onButtonClick(btn){

        alert(btn.text);

        }

    });

</script>

   </head>

   <body>

<div id='toolbar'></div>

        </body>

</html>

工具栏

效果：

http://www.tof2k.com/ext/formbuilder/，导出json参数，然后。。。相当方便。否则手工码砖，效率可知了。

工具栏的启用和禁用，有二个方法：enable()和disable()

学习EXTJS6（6）基本功能-工具栏和菜单的更多相关文章

  1. 菜单工具栏wxPython菜单与工具栏基础示例

    这两天一直在学习菜单工具栏之类的问题,上午正好有机会和大家讨论一下. 1.基本的api介绍 Package wx :: Class Menu Type Menu Method Summary Menu ...

  2. Web开发者应当开始学习HTML5的新功能

    据国外媒体报道,谷歌开发者业务部门高管马克·皮尔格雷姆(Mark Pilgrim)在WWW2010会议上表示,尽管还需要进一步完善,HTML5已经获得大多数平台支持,适合完成大多数任务. 但并非所有人 ...

  3. vue学习之vue基本功能初探

    vue学习之vue基本功能初探: 采用简洁的模板语法将声明式的将数据渲染进 DOM: <div id="app"> {{ message }} </div> ...

  4. ROS(indigo)机器人操作系统学习资料和常用功能包汇总整理(ubuntu14.04LTS)

    ROS(indigo)机器人操作系统学习资料和常用功能包汇总整理(ubuntu14.04LTS) 1. 网站资源: ROSwiki官网:http://wiki.ros.org/cn GitHub    ...

  5. 『练手』004 Laura.SqlForever如何扩展 导航栏 工具栏 右键菜单 插件

    004 Laura.SqlForever如何扩展 导航栏 工具栏 右键菜单 插件 导航栏 插件扩展 比如下图的    窗口 > 关闭所有文档    这个导航栏: 在 任何程序集,任何命名空间,任 ...

  6. Docker技术入门与实战 第二版-学习笔记-8-网络功能network-3-容器访问控制和自定义网桥

    1)容器访问控制 容器的访问控制,主要通过 Linux 上的 iptables防火墙来进行管理和实现. iptables是 Linux 上默认的防火墙软件,在大部分发行版中都自带. 容器访问外部网络 ...

  7. 蓝桥杯Web：【功能实现】菜单树检索

    [功能实现]菜单树检索 背景介绍 实际工作中很多前端攻城狮都会遇到这样一个需求:在多级菜单树中模糊搜索匹配的菜单项,并显示出来. 本题需要在已提供的基础项目中使用 Vue.js 知识,实现对已提供的二 ...

  8. 学习EXTJS6（7）基本功能-最常用的表单

    开发过程中关于表单的处理无非: 1.表单和表单元素 2.实现表单验证 3.表单的提交和加载 -------------------------------------- 1.Ext.form.Basi ...

  9. 学习EXTJS6（4）基本功能-信息提示框组件

    1.使用组件,主要配置表现形式有二种(是否可以说参数) 用逗号分隔的传统参数列表方式: <script type="text/javascript"> Ext.onRe ...

随机推荐

  1. jsencrypt代码分析

    jsencrypt代码分析——openssl的rsa加密解密在js的实现   在js上做rsa,感觉jsencrypt这个是封装的比较好的,但用起来还是遇到了些坑,所以踩进代码里填填坑- 项目在这里  ...

  2. media type

    https://www.sitepoint.com/mime-types-complete-list/ application/base64 https://github.com/dotnet/doc ...

  3. H264的RTP负载打包的数据包格式,分组,分片

    H264的RTP负载打包的数据包格式,分组,分片 1.    RTP数据包格式 RTP报文头格式(见RFC3550 Page12): 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 ...

  4. Linux防火墙设置

    对于Internet上的系统,不管是什么情况都要明确一点:网络是不安全的.因此,虽然创建一个防火墙并不能保证系统100%安全,但却是绝对必要的. Linux提供了一个非常优秀的防火墙工具-netfil ...

  5. Coursera Algorithms week2 基础排序 练习测验: Permutation

    题目原文: Given two integer arrays of size n , design a subquadratic algorithm to determine whether one ...

  6. 第14章 Wi-Fi系统应用 14.1 了解Wi-Fi系统的结构

    Android平台中Wi-Fi系统从上到下主要包括Java框架类.Android适配器库.wpa_supplicant守护进程.驱动程序和协议,这几部分的系统结构如图14-3所示. (1)Wi-Fi用 ...

  7. sublime如何汉化

    1.将sublime安装文件夹里面的defavlut.sublime-package这个文件zip解压. 2.然后查找到sublime-menu文件. 3.打开文件将json里面的caption里面的 ...

  8. [Apple开发者帐户帮助]三、创建证书（6）创建创建VoIP服务证书

    VoIP:基于IP的语音传输(英语:Voice over Internet Protocol,缩写为VoIP)是一种语音通话技术,经由网际协议(IP)来达成语音通话与多媒体会议,也就是经由互联网来进行 ...

  9. 引入外部CSS的两种方式及区别

    1.CSS的两种引入方式 通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使 ...

  10. linux shell 编程笔记

    重定向和管道  输出重定向:把在终端输出的内容保存到文件上  输入重定向:通过文件的格式输入内容到终端  管道:把上一条命令的输出作为下一条命令的输入,如同管道一样,所有命令同时进行,同时处理数据,不 ...