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

最新推荐文章于 2017-10-18 10:37:00 发布

转载最新推荐文章于 2017-10-18 10:37:00 发布 · 93 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/366493

本文介绍如何使用ExtJS创建复杂的菜单和工具栏，包括字体大小选择、加粗斜体设置、日期和颜色选择等功能。通过具体的代码示例展示了如何定义按钮及其下拉菜单项。

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

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
({
width: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
({
   width:300,height:200,items:[btn],renderTo:"BuildMenu5"
});

本文转自温景良博客园博客，原文链接：http://www.cnblogs.com/wenjl520/archive/2008/11/03/1325617.html，如需转载请自行联系原作者