先培养一下大概的感觉吧。

基本按书上都弄出来了。

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>ExtJs</title>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6.     <link rel="stylesheet" type="text/css" href="ExtJs/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">
  7.         <script type="text/javascript" src="ExtJs/ext-all.js"></script>
  8.         <script type="text/javascript" src="ExtJs/bootstrap.js"></script>
  9.         <script type="text/javascript" src="ExtJs/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script>
  10.  
  11.     <script type="text/javascript">
  12.             Ext.onReady(function(){
  13.                 var toolbar = new Ext.toolbar.Toolbar({
  14.                     renderTo: 'toolbar',
  15.                     width: 800
  16.                 });
  17.  
  18.                 var infoMenu = new Ext.menu.Menu({
  19.                     ignoreParentClicks: true,
  20.                     plain: true,
  21.                     items: [{
  22.                         text: 'personal info',
  23.                         menu: new Ext.menu.Menu({
  24.                             ignoreParentClicks: true,
  25.                             items: [{
  26.                                 text: 'basic info',
  27.                                 menu: new Ext.menu.Menu({
  28.                                     items: [
  29.                                         {text: 'height', handler: onMenuItem},
  30.                                         {text: 'weight', handler: onMenuItem}
  31.                                     ]
  32.                                 })
  33.                             }]
  34.                         })
  35.                         },
  36.                         {text: 'company info', handler: onMenuItem}
  37.                     ]
  38.                 });
  39.  
  40.                 var fileMenu = new Ext.menu.Menu({
  41.                     shadow: 'frame',
  42.                     allowOtherMenus: true,
  43.                     items: [
  44.                         new Ext.menu.Item({
  45.                             text: 'new',
  46.                             handler: onMenuItem
  47.                         }),
  48.                         new Ext.menu.Item({
  49.                             text: 'open',
  50.                             handler: onMenuItem
  51.                         }),
  52.                         new Ext.menu.Item({
  53.                             text: 'close',
  54.                             handler: onMenuItem
  55.                         }),
  56.                         new Ext.menu.Item({
  57.                             xtype: 'textfield',
  58.                             hideLabel: true,
  59.                             width: 100
  60.                         }),
  61.                         new Ext.menu.Item({
  62.                             text: 'select color',
  63.                             menu: new Ext.menu.ColorPicker()
  64.                         }),
  65.                         new Ext.menu.Item({
  66.                             xtype: 'textfield',
  67.                             menu: new Ext.menu.DatePicker()
  68.                         }),
  69.                         {
  70.                             xtype: 'buttongroup',
  71.                             colums: 3,
  72.                             title: 'buttons',
  73.                             items: [{
  74.                                 text: 'user manage',
  75.                                 scale: 'large',
  76.                                 colspan: 3,
  77.                                 width: 170,
  78.                                 iconCls: 'userManagerIcon',
  79.                                 iconAlign: 'top'
  80.                             },
  81.                             {text: 'newnew', iconCls: 'newIcon'
  82.                             }]
  83.                         }
  84.                     ]
  85.                 });
  86.  
  87.                 var themeMenu = new Ext.menu.Menu({
  88.                     items: [{
  89.                         text: 'theme color',
  90.                         menu: new Ext.menu.Menu({
  91.                             items: [{
  92.                                 text: 'red theme',
  93.                                 checked: true,
  94.                                 group: 'theme',
  95.                                 checkHander: onItemCheck
  96.                             }, {
  97.                                 text: 'blue theme',
  98.                                 checked: false,
  99.                                 group: 'theme',
  100.                                 checkHander: onItemCheck
  101.                             }, {
  102.                                 text: 'black theme',
  103.                                 checked: false,
  104.                                 group: 'theme',
  105.                                 checkHander: onItemCheck
  106.                             }]
  107.                         })
  108.                     }, {
  109.                         text: 'isUse',
  110.                         checked: false
  111.                     }]
  112.                 });
  113.  
  114.                 var editMenu = new Ext.menu.Menu({
  115.                     shadow: 'drop',
  116.                     allowOtherMenus: true,
  117.                     items: [
  118.                         {text: 'copy', handler: onMenuItem},
  119.                         {text: 'paste', handler: onMenuItem},
  120.                         {text: 'cut', handler: onMenuItem}
  121.                     ]
  122.                 });
  123.                 toolbar.add([
  124.                     {
  125.                         text: 'file',
  126.                         //handler: onButtonClick,
  127.                         //iconCls: 'newIcon'
  128.                         menu: fileMenu
  129.                     },
  130.                     {
  131.                         text: 'edit',
  132.                         //handler: onButtonClick,
  133.                         //iconCls: 'openIcon'
  134.                         menu: editMenu
  135.                     },
  136.                     {
  137.                         text: 'save',
  138.                         handler: onButtonClick,
  139.                         iconCls: 'saveIcon'
  140.                     },
  141.                     {
  142.                         text: 'config',
  143.                         menu: infoMenu
  144.                     },
  145.                     {
  146.                         text: 'style select',
  147.                         menu: themeMenu
  148.                     },
  149.                     '-',
  150.                     {
  151.                         xtype: 'textfield',
  152.                         hideLabel: true,
  153.                         width: 150
  154.                     },
  155.                     '->',
  156.                     '<a href=#>url</a>',
  157.                     {
  158.                         xtype: 'tbspacer',
  159.                         width: 500
  160.                     },
  161.                     'static text'
  162.                 ]);
  163.  
  164.                 function onMenuItem(item) {
  165.                     alert(item.text);
  166.                 };
  167.  
  168.                 function onButtonClick(btn) {
  169.                     alert(btn.text);
  170.                 };
  171.                 Ext.get('enableBtn').on('click', function(){
  172.                     toolbar.enable();
  173.                 });
  174.                 Ext.get('disabledleBtn').on('click', function(){
  175.                     toolbar.disable();
  176.                 });
  177.                 function onItemCheck(item) {
  178.                     alert(item.text);
  179.                 };
  180.             });
  181.     </script>
  182. </head>
  183. <body>
  184.     <div id='toolbar'></div>
  185.         <div >
  186.             <button id="enableBtn">enableBtn<button>
  187.             <button id="disabledleBtn">disabledleBtn<button>
  188.         </div>
  189. </body>
  190. </html>

ExtJs之工具栏及菜单栏的更多相关文章

  1. C# winfrom容器布局与工具栏&&右键菜单栏&&隐藏显示小图标的的简单事件

    前两天的时候学习了winfrom,简单地说就是各种布局,然后给按钮,textbox等各种控件添加各种事件的操作,经过前天一晚上,昨天一天的练习操作的还算熟练,但是对构造函数传值还是不是很了解,由于各种 ...

  2. wxpython 创建工具栏和菜单栏

    下面看一下关于创建工具栏,状态栏和菜单的方法,看下面一个例子: import wx class ToolBarFrame(wx.Frame): def __init__(self,parent,id) ...

  3. qt 工具栏和菜单栏

    在前面的QMainWindow的基础之上,我们开始着手建造我们的应用程序.虽然现在已经有一个框架,但是,确切地说我们还一行代码没有写呢!下面的工作就不那么简单了!在这一节里面,我们要为我们的框架添加菜 ...

  4. Virtual Box 工具栏（菜单栏）消失的解决方法

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html 现在Virtual Box非常牛逼(不排除Oracle又准备像Java SE那样 ...

  5. Javascript - ExtJs - Toolbar - 工具栏

    Toolbar组件 创建工具栏 Toolbar类是一种子组件,它不能独立存在,需要依附在其它组件上面.很多容器组件都具备tbar(顶部工具栏).bbar(底部工具栏)的配置,所以可以像下面那样使用它. ...

  6. wx工具栏，菜单栏，状态栏

    #!/usr/bin/env python # -*- coding: utf- -*- import wx import wx.py.images class ToolbarFrame(wx.Fra ...

  7. 隐藏gvim中的工具栏和菜单栏

    在vim的配置文件.vimrc中添加如下代码: "Toggle Menu and Toolbar set guioptions-=m set guioptions-=T map <si ...

  8. gvim最简化设置，去掉工具栏和菜单栏

    编辑vimrc文件(该文件位于gvim安装目录下),在文件末尾添加以下语句即可 set gfn=Courier_New:h14colorscheme torteset guioptions-=mset ...

  9. QT学习之菜单栏与工具栏

    QT学习之菜单栏与工具栏 目录 简单菜单栏 多级菜单栏 上下菜单栏 工具栏 简单菜单栏 程序示例 from PyQt5.QtWidgets import QApplication, QMainWind ...

随机推荐

  1. Git 设置别名[alias]

    工作中我经常设置一下别名... 别名就在[alias]后面,要删除别名,直接把对应的行删掉即可. 而当前用户的Git配置文件放在用户主目录下的一个隐藏文件.gitconfig中: $ cat .git ...

  2. JVM学习总结五(番外)——JConsole

    之前本来打算结合自己写的小程序来介绍JConsole和VirtualVM的使用的,但是发现很难通过一个程序把所有的场景都体现出来,所以还是决定用书中的典型小例子来讲更加清晰. 一.JConsole的基 ...

  3. IOS之表视图单元格删除、移动及插入

    1.实现单元格的删除,实现效果如下 - (void)viewDidLoad { [super viewDidLoad]; //设置导航栏 self.editButtonItem.title = @&q ...

  4. 有关ZxMiddleTier构想

    终于决定动手写一个自己的东西,没有其它想法,人已经30多了,感觉原来学的东西都是零散的,想通过这样一个中间层的项目,串联起原来所学的东西,形成一个体系,也算是对自己这么多年的程序员的生涯做出一个交代, ...

  5. [LAMP]【转载】——PHP7.0的安装

    ***原文链接:http://my.oschina.net/sallency/blog/541287 php编译过程报错解决可参考:http://www.cnblogs.com/z-ping/arch ...

  6. 设置搜狗输入法在任何时候按左右两侧的shift激活

    如上图,搜狗输入法for linux最近与广大用户见面了,现在的版本是1.0.0.0014,本人系统是ubuntu 14.04非麒麟版本 使用过程中有个习惯就是在任何窗口内只要按任意一侧的shift就 ...

  7. Java BigDecimal大数字操作

    在java中提供了大数字的操作类,即java.math.BinInteger类和java.math.BigDecimal类.这两个类用于高精度计算,其中BigInteger类是针对大整数的处理类,而B ...

  8. “我爱淘”第二冲刺阶段Scrum站立会议1

    完成任务: 完成了webservice的配置与测试,实现了在客户端的搜索功能,并且可以实现图书的发布功能,就是将图书的信息添加到数据库中. 计划任务: 在客户端实现分类功能,通过学院的分类查看书籍. ...

  9. Kibana 修改logo及汉化导航

    修改此文件下E:\happy\kinbana\kibana-4.2.2-windows\kibana-4.2.2-windows\optimize\bundles的kibana.bundle.js文件 ...

  10. shell中的比较语句

    Linux比较字符串.判断文件是否存在及是否可读等,通常用"[]"来表示条件测试. 注意:这里的空格很重要.要确保方括号的空格.笔者就曾因为空格缺少或位置不对,而浪费好多宝贵的时间 ...