extjs 菜单栏使用（转）

最新推荐文章于 2020-01-06 15:24:52 发布

chenweishaoxing

最新推荐文章于 2020-01-06 15:24:52 发布

阅读量321

点赞数

CC 4.0 BY-SA版权

分类专栏： EXTJS 文章标签： javascript 人工智能 ViewUI

本文链接：https://blog.youkuaiyun.com/chenweishaoxing/article/details/84217208

EXTJS 专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍了使用Ext框架实现菜单栏和工具栏的方法，包括定义菜单、工具栏、按钮等组件，以及如何嵌套使用不同类型的菜单项如DateMenu和ColorMenu。同时提供了代码示例并解释了如何在工具条中添加各种元素，如查询条件、搜索按钮、导出功能等。此外，还介绍了Ext中的分隔符和字符串项的使用，并提供了添加元素的多种方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext系列之菜单栏和工具栏

分类： Javascript 2010-08-28 23:32 1668人阅读评论(0) 收藏举报

菜单栏和工具栏是经常用的，今天大家一块看看Ext中的菜单和工具如何使用吧！

先看下面的代码，貌似有点长，不过注释很清楚，而且下面我会逐一去解释：

[javascript]view plaincopy
<html>  
    <head>  
        <link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />  
        <mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script>  
        <mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script>  
        <mce:script type="text/javascript"><!--  
            Ext.onReady(function(){  
                var mnFile=new Ext.menu.Menu({//定义一工具栏一个按钮的下拉列表Menu（注意这个item中有点乱，主要为了让大家多看几种形式）  
                    id:'mnFile',  
                    items:[   
                        {  
                            text:'新建',  
                            icon:'ext/docs/resources/favicon.ico',//设置菜单前面图标  
                            handler:function(){  
                                Ext.Msg.alert("系统提示","您单击了‘新建’");  
                            }  
                        },  
                        new Ext.menu.Item({  
                            text:'打开'  
                        })  
                    ]  
                });  
                  
                var mnSystem=new Ext.menu.Menu({//第二个Menu列表，这里看一下二级菜单  
                    id:'mnSystem',  
                    items:[   
                        new Ext.menu.Item({  
                            text:'设置',  
                            menu:[  
                                    {text:'皮肤', menu:new Ext.menu.ColorMenu({handler:function(cm,color){  
                                        Ext.Msg.alert("系统消息","您选择的颜色："+color);  
                                    }})},  
                                    {text:'日期',menu:new Ext.menu.DateMenu({handler:function(dp,date){  
                                        Ext.Msg.alert("系统消息",date.format("您选择的日期是:Y年m月d日"));  
                                    }})},  
                                    new Ext.menu.Separator(),//创建分隔符  
                                    new Ext.menu.Item({//三级菜单  
                                        text:'语言',  
                                        menu:[  
                                            new Ext.menu.CheckItem({text:"中文",group:"language"}),   
                                            new Ext.menu.CheckItem({text:"English",group:"language"})  
                                        ]  
                                    }),  
                                    'separator', //这样也可以添加分隔符  
                                    new Ext.menu.Item({//注意和上面的区别就是这个没有group，所以就显示为了多选框  
                                        text:'字体类型',  
                                        menu:[  
                                            new Ext.menu.CheckItem({text:"斜体"}),   
                                            new Ext.menu.CheckItem({text:"加粗"}),   
                                            new Ext.menu.CheckItem({text:"下划线"})  
                                        ]  
                                    }),  
                                    '-'//同样可以创建分隔符  
                                      
                            ]  
                        }),  
                    ]  
                });  
                var btnFile=new Ext.Button({  
                    text:'文件',  
                    menu:mnFile  
                });  
                var btnSystem=new Ext.Button({  
                    text:'系统',  
                    menu:mnSystem  
                });  
                var tb=new Ext.Toolbar({  
                    id:'tb',  
                    width:'auto',  
                    height:30,  
                    items:[  
                        btnFile,  
                        btnSystem  
                    ]  
                });  
                tb.render(Ext.getBody());  
                      
            });  
          
// --></mce:script>  
        <mce:style type="text/css"><!--  
            .item{  
                padding-left:10px,  
                color:red  
            }  
          
--></mce:style><style type="text/css" mce_bogus="1">         .item{  
                padding-left:10px,  
                color:red  
            }  
        </style>  
    </head>  
    <body>  
        <div id="divMenu"></div>  
    </body>  
</html>  

上面我方了完整的代码，有相应的ext库的话可以直接运行，下面我们逐一看一下相关内容。

Ext中的Menu很容易使用，但是对于没有用过的初学者往往有一个误区就是认为声明一个Menu对象（例如上面的mnFile）就可以直接放到工具栏上（例如上面的tb），其实是不对的，通过代码我们看到Menu对象是放在一个button中再将button放到Toolbar上面的；Ext中有几类Menu的Item类型，上面我将常用的都列出来了（还有就是自定义和baseItem这里就不再说了），其他都好说也容易理解，但是注意DateMenu和ColorMenu的使用，并不是直接作为一个menu(注意这里是小写的menu)中使用的而是放到一个Menu的item中使用的（这一点是很合理的，因为总不能直接在menu中出现一个color选框吧，总要点一个类似按钮的东西弹出来才好用啊）；然后就是对于CheckItem是单选还是多选我上面已经注释了，想要单选的话就在同一组中标记相同的group就可以了；还有就是初学者会被menu嵌套中item和最后提一下啊就是Ext中经常用到分隔符，我上面已经将三种使用方式都列出来了，不过大家不要错误理解分隔符，不仅仅是纵向分割，想工具条上的多个横排按钮的分割也是如此。

关于Toolbar我再多说两句,请看下面的例子：

[javascript]view plaincopy
Ext.onReady(function(){  
    var tb=new Ext.Toolbar({  
        id:'tb',  
        renderTo:'divToolbar',  
        autoWidth:true,  
        autoHeight:true,  
        items:[  
            '查询条件：',  
            new Ext.form.Field({  
                  
            }),  
            '',  
            {  
                xtype:'button',  
                text:'搜索',  
                iconCls:'btn_search'  
            },  
            '->',//  
            '<b>其他功能：</b>',  
            new Ext.Button({  
                text:'导出Excel'  
            }),  
            '-',  
            {  
                text:'导出word'  
            }  
        ]  
    });  
          
});  

对于toolbar中的元素并非什么都可以，这个可以查看相关文档，当时相信通过上面和下面的例子已经将常用的元素都列出来了（当然像DateField这些我们没有列举）。对于toolbar有时候我们还这样来添加元素（为了使代码清晰，很多部分都是和上面对应的，例如上面的string文本和addText就是对应的）：

[javascript]view plaincopy
var tb=new Ext.Toolbar({  
    id:'tb',  
    renderTo:'divToolbar',  
    autoWidth:true,  
    autoHeight:true  
});  
tb.addText("查询条件：");  
tb.addField(new Ext.form.TextField({name:'tf'}));//addField方法可以添加大部分form控件  
tb.addSpacer();  
tb.addButton({text:'搜索',iconCls:'btn_search'});  
tb.addFill();  
tb.addElement('divHtml');//参数就是一个html元素的id                
tb.add(new Ext.Button({text:'导出Excel'}));  
tb.addSeparator();  
tb.add(new Ext.Button({text:'导出Word'}));  
tb.add(new Ext.SplitButton({  
    text:'帮助',  
    arrorTooltip:'更多',  
    menu:new Ext.menu.Menu({  
        items:[  
            {  
                text:'升级'  
            },  
            {  
                text:'关于'  
            }  
        ]     
    })  
}))  
tb.addDom({tag:'i',html:'版权'});  
tb.add('<b>copyright by cmjstudio<b>');  
tb.doLayout();//重新布局，否则可以去掉tb中renderTo在这里写tb.render('divToolbar');不然是看不到上面的布局元素的  

注意：在Ext中一般给容器添加item时，可以使用其对应的add方法；也可以直接在构造函数中写（这一般有两种，我们在前面也说过，要么是只有主体的类[也就是只有{…}]里面可以指明xtype，要么是匿名的对象也[就是直接new XXX({})]）。当然值得说明的是对于直接写在构造函数中只有主体的情况一般不指明xtype对于不同父容器也有默认的类型，除此之外有些特殊的情况（例如分隔符和toolbar的stringitem）也可以值写一个string类型的文本用引号引起来作为item。

题外话：在此再说一下，我会尽量将更多的东西放进来然后尽可能组织的有条理，例如有时候你可能看到有的相似的组件我们一个配置属性特别多而且很多注释，而有的却又属性很少又没有注释。那是因为我觉得我们只需要学会一个其他就会了，既然是学习没必要相同的东西都列出来，这样的话反而有时候不利于学习。