zoukankan      html  css  js  c++  java
  • EXTJS学习系列提高篇:第十二篇(转载)作者殷良胜,利用Ext实现类似Windows的操作

    显示字体和字号的菜单样式

    var menu = new Ext.menu.Menu();
    menu.add
    (
         {
             text:"字号",
             menu:
             [
                 new Ext.menu.CheckItem({text:"大",group:"font"}),
                 new Ext.menu.CheckItem({text:"中",group:"font"}),
                 new Ext.menu.CheckItem({text:"小",group:"font"})
             ]
         },
         {
             text:"字体",
             menu:
             [
                 new Ext.menu.CheckItem({text:"加粗"}),
                 new Ext.menu.CheckItem({text:"斜体"})
             ]
         }
    }

    下拉菜单的显示,点文件后就会出现图中所示的菜单

    var btn1 = new Ext.Button
    ({
      text:"文件",cls: 'x-btn-text-icon',icon:"../Images/Menus/house.png",
      menu:
      [
          {text:"打开",icon:"../Images/Menus/house.png"},
          {text:"保存",icon:"../Images/Menus/house.png"},
          {text:"删除"},
          {text:"关闭"},
          {text:"退出"}
      ]
    });
    var btn2 = new Ext.Button
    ({
      text:"编辑",cls: 'x-btn-text-icon',icon:"../Images/Menus/house.png",
      menu:
      [
          {text:"复制",icon:"../Images/Menus/house.png"},
          {text:"拷贝",icon:"../Images/Menus/house.png"},
          '-',
          {text:"查找"},
          {text:"替换"}
      ]
    });

    var toolbar = new Ext.Toolbar
    ({
       300,height:200,items:[btn1,btn2],renderTo:"BuildMenu5"
    });

    日期菜单和颜色菜单样式的显示

      

    var btn = new Ext.Button
    ({
        text:"其它",cls: 'x-btn-text-icon',icon:"../Images/Menus/house.png",
        menu:
        [
          {text:"选择日期",icon:"../Images/Menus/house.png",menu:new Ext.menu.DateMenu()},
          {text:"选择颜色",icon:"../Images/Menus/house.png",menu:new Ext.menu.ColorMenu()}
        ]
    });
    var toolbar = new Ext.Toolbar
    ({
       300,height:200,items:[btn],renderTo:"BuildMenu5"
    });

    版权说明

      如果标题未标有<转载、转>等字则属于作者原创,欢迎转载,其版权归作者和博客园共有。
      作      者:温景良
      文章出处:http://wenjl520.cnblogs.com/  或  http://www.cnblogs.com/

  • 相关阅读:
    《个人-GIT使用方法》
    课后作业-阅读任务-阅读提问-1
    《20170914-构建之法:现代软件工程-阅读笔记》
    结对-贪吃蛇游戏-开发环境搭建过程
    《结对-贪吃蛇游戏-设计文档》
    Forward团队-爬虫豆瓣top250项目-需求分析
    Forward团队-爬虫豆瓣top250项目-成员简介与分工
    《结对-网页贪吃蛇游戏-需求分析》
    《团队-团队编程项目作业名称-团队信息》
    《对软件工程课程的期望》
  • 原文地址:https://www.cnblogs.com/wenjl520/p/1325617.html
Copyright © 2011-2022 走看看