<!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. 多个结果显示成一个group_concat函数

    需求:获取班级.课程中文名.老师 扩展:一个班级一门课程,老师可能多个,想把多个教师显示成在一个结果里 解决方案:加个group by 参考资料:https://www.cnblogs.com/zhu ...

  2. 【iOS】代理传值与块代码传值

    主线程与子线程常常须要进行数据的传递.不同的类之间,不同的控制器之间都须要. 并且常常须要监听一个动作的完毕.而后才去做对应事件. (代理是一对一的关系). 一.代理传值 代理是一种设计模式. iOS ...

  3. bzoj 1029 [ JSOI 2007 ] 建筑抢修 —— 贪心

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1029 想不出来贪心... 首先把任务按结束时间排序: 因为任务一定是越提前做越好,所以从头开 ...

  4. 关于form/input 的autocomplete="off"属性

    转自:http://blog.sina.com.cn/s/blog_b49f96a701019m0d.html 一. 有过表单设计经验的朋友肯定知道,当我们在浏览器中输入表单信息的时候,往往input ...

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

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

  6. [BZOJ2017][Usaco2009 Nov]硬币游戏（要复习系列）

    又是DP? 好吧,或者说是博弈论,但是我不会啊. 先搞个O(n^3)的记忆化搜索,然后瞎搞好像发现两个状态几乎一样? 竟然过了样例,然后竟然A了... #include<iostream> ...

  7. Hibernate搭建框架（一）

    什么是hibernate? hibernate是一个orm框架,实现了对JDBC的封装.通过xml文件来实现类和表之间的映射,这样就可以使用操作对象的方式来操作数据库. 官网:http://hiber ...

  8. 5.20 mybatis反向生成的映射文件xml(如果需要自己定义其他sql语句时如下)

    解决mybatis-generator 生成的mapper.xml覆盖自定义sql的问题 mybatis-generator是个好工具,一建即可生成基本增删改成功能的mapper.xml.但这些是不够 ...

  9. 5.17从零开始搭建springboot-dubbo的例子

    https://www.cnblogs.com/baijinqiang/p/10848259.html

  10. 安卓通过UDP协议传输数据，中文乱码的问题

    公司最近需要往智能家居方面发展,需要用到UDP协议传输数据,在网上找到了一些资料,但是发现传输中文的时候有乱码的现象,经过我多番捣鼓,终于解决了这个问题,下面贴上关键代码 客户端: public cl ...