<!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. B1192 [HNOI2006]超级英雄Hero 二分图匹配

    先检讨一下,前一段时间开学,做题懒得发博客,也不总结...现在捡起来. 这个题一看是裸的二分图匹配,但是仔细一看还有一些区别,就是必须要连续的连接,否则直接退出.因为前一道题答不出来的话后面的题就没有 ...

  2. bzoj1030 文本生成器(AC自动机+dp)

    1030: [JSOI2007]文本生成器 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 4777  Solved: 1986[Submit][Stat ...

  3. Moco模拟服务器实现请求&响应 （一）

    接口测试Moco工具 1.使用Moco模拟,首先需要下载Moco 的jar 包,下载链接: http://central.maven.org/maven2/com/github/dreamhead/m ...

  4. python的搜索路径与包（package）

    python的搜索路径其实是一个列表,它是指导入模块时,python会自动去找搜索这个列表当中的路径,如果路径中存在要导入的模块文件则导入成功,否则导入失败: >>> import ...

  5. BZOJ 2406 二分+有上下界的网络流判定

    思路: 求出每行的和  sum_row 每列的和   sum_line 二分最后的答案mid S->i  流量[sum_row[i]-mid,sum_row[i]+mid] i->n+j ...

  6. C - Lucky Numbers (easy)

    Problem description Petya loves lucky numbers. Everybody knows that positive integers are lucky if t ...

  7. B - Alyona and mex（构造）

    Problem description Alyona's mother wants to present an array of n non-negative integers to Alyona. ...

  8. Deutsch lernen (12)

    1. hinweisen - wies hin - hingewiesen 向...指出,指明 auf etw.(A) hinweisen Ich möchte (Sie) darauf hiweis ...

  9. 2星|《10W+走心文案是怎样炼成的》：标题党。实际是台湾创意总监的一些人生感悟和两三个很一般的创意文案

    10W+走心文案是怎样炼成的 作者是台湾人,曾在台湾奥美担任创意总监,做过一些广告.本书是他的一些经验介绍. 总体来说是标题党,作者的广告基本是电视广告,跟文案也有关系,估计播放量也很容易过10W+, ...

  10. cannot find Toolkit in /usr/local/cuda-8.0

    对于新版本ubuntukylin17.04安装CUDA时出现 cannot find Toolkit in /usr/local/cuda-8.0 问题 尝试了各种方法,均不妥当...... 参考:h ...