<!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. 用HttpCombiner来减少js和css的请问次数

    HttpCombiner也不记得是谁写的了,功能是把多个js文件或css文件合并到一块,压缩一下一起发给客户端来优化网站. 用法是这样的: <script type="text/jav ...

  2. Extjs TabPanel页签转换事件

    listeners : { tabchange : function(tp, p) { var allmapDIV = document.getElementById("allmap&quo ...

  3. Java命名规则详细总结

    Class名应是首字母大写的名词.命名时应该使其简洁而又具有描述性.异常类的命名,应以Exception结尾.Interface的命名规则与Class相同 1. JAVA源文件的命名 JAVA源文件名 ...

  4. (Go)04.go工作区目录规范及简单例子

    一.规范目录结构 D:\project\src\go_dev\day1\example1 二.设置GOPAH环境变量 三.hello world 1.hello world package main ...

  5. python大杂铺

      python中continue,break,return三者之间的区别 return 会直接令函数返回,所有该函数体内的代码都不再执行了,所以该函数体内的循环也不可能再继续运行. break:跳出 ...

  6. 利用python+tkinter开发一个点名软件

    最近上课学生多名字记不住,名册忘记了带,要点名怎么办,好久没有写代码了,于是自己写了个点名软件,记录下吧,第一次接触TK也不是太熟悉,写的不太好,记录下源代码 以后遇到要写桌面软件还是可以耍耍的. t ...

  7. log4net实用配置代码

    log4net实用配置代码 <?xml version="1.0" encoding="utf-8" ?> <configuration> ...

  8. Zeppelin0.6.2之shiro安全配置 初探

    0.序 默认情况下,Zeppelin安装好并且配置完zeppelin-site.xml和zeppelin-env.sh后,我们进入的模式,从右上角就能看出来是anonymous模式,这种模式下会看见所 ...

  9. 分布式文件管理系统MooseFS在centOS 7中的安装

    首先,MooseFS是做什么的在这边不做具体详述,这边主要记录一下我在自己部署MooseFS中遇到的问题和步骤(大部分参考的其他博客或者资料) 首先是准备资源,MooseFS的最新安装包可以去官网下载 ...

  10. 读书笔记「Python编程：从入门到实践」_6.字典

    6.1 一个简单的字典 alien_0 = {'color': 'green', 'points': 5} print(alien_0['color']) print(alien_0['points' ...