<!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. linux 启动两个tomcat

    按照下面的步骤操作即可部署成功:一些具体操作命令就不详细说了,直接说有用的:1.在 /usr/local 下部署两个Tomcat,tomcat的文件夹重命名为:tomcat6-1  .  tomcat ...

  2. Ambarella SDK build 步骤解析

    Make Target Options make命令如下: make <Tab> <Tab> /*列出所有支持的目标(命令行输入make, 再按两下Tab键)*/ make & ...

  3. ubuntu如何完全卸载和安装 Java及android环境?【转】

    本文转载自:https://my.oschina.net/lxrm/blog/110638 最近,迷上了java,一时间什么环境变量/虚拟机都猛然袭来,有点不适.环境配置在前,这所自然.平时搞PHP都 ...

  4. Google Deepmind AI tries it hand at creating Hearthstone and Magic: The Gathering cards

    http://www.techrepublic.com/article/google-deepmind-ai-tries-it-hand-at-creating-hearthstone-magic-t ...

  5. insufficient space

  6. 关于每次取PC的值为PC+4的问题

    关于ARM的书上常说由于流水线特性,在指令执行期间读取程序计数器时,读出的值需要为当前指令+4 一开始总是不理解,今天被一位大神一语道破其中精髓.... 程序计数器(PC)总是指向“正在取指”的指令 ...

  7. 【寒假集训系列DAY.1】

    Problem A. String Master(master.c/cpp/pas) 题目描述 所谓最长公共子串,比如串 A:“abcde”,串 B:“jcdkl”,则它们的最长公共子串为串 “cd” ...

  8. [DP专题]悬线法

    参考:https://blog.csdn.net/twtsa/article/details/8120269 先给出题目来源:(洛谷) 1.p1387 最大正方形 2.P1169 棋盘制作 3.p27 ...

  9. Ubuntu1804安装Postgresql【转】

    转载自:https://huur.cn/course/yw/1591.html 关系数据库管理系统是许多网站和应用程序的关键组成部分.它们提供了一种结构化的方式来存储,组织和访问信息. Postgre ...

  10. （转）vuex2.0 基本使用(1) --- state

    Vuex 的核心是 store, 它是一个通过 Vuex.Store 构造函数生成的对象.为什么它会是核心呢?因为我们调用这个构造函数创建store 对象的时候,给它传递参数中包装了state, mu ...