ExtJS的使用方法汇总(6)——工具栏和菜单

转载 2013年07月10日 09:13:41
ExtJS的使用方法汇总(6)——工具栏和菜单

目录(?)[+]
菜单的种类很多,包括下拉菜单、分组菜单、右键菜单等等,右键菜单与Window桌面上单击右键弹出的菜单效果一样,只是样式不同,菜单上的内容包括文字、单选框、按钮等。对于EXT来说,这些菜单的实现都非常简单。


我们可以在一个面板的顶端或底端放置一横排功能按钮,按下不同的按钮时会执行不同的操作。我们把这个横条称为工具条,放在工具条上的按钮称为菜单。本章将详细介绍EXT中工具栏和菜单的使用方法。


一、简单菜单
创建一个简单工具条的方法如下,注意的一点是HTML代码必须要有:<div id="toolbar"></div>


过程大致包括:先创建一个工具条,用工具条的render()函数把它渲染在DIV上,然后调用Toolbar的add函数,向Toolbar添加4个按钮,同时还可以添加单击处理事件。


[c-sharp] view plaincopy
Ext.onReady(function(){  
             var tb=new Ext.Toolbar();  
             tb.render('toolbar');  
               
             tb.add({  
                text:"新建N",  
                handler:function(){  
                    Ext.Msg.alert('提示','新建');  
                }  
             },{  
                text:"修改C"  
             },{  
                text:"删除"  
             },{  
                text:"显示"  
             });  
        });  
效果如图1所示:






图1 简单的工具条


二、向菜单中添加分隔线
分隔线显示就是一条水平线,可以使用它将菜单中不同类型的菜单项分隔显示,Ext中向菜单中添加分隔线的方式有两种。


1、使用连字符或'separator'作为参数,如下面的代码所示:


[c-sharp] view plaincopy
var menu1=new Ext.menu.Menu({  
                items:[  
                    {text:'菜单一'},  
                    {text:'菜单二'}  
                ]  
             });  
             //menu1.add('-');  
             menu1.add('separator');  
             var tb=new Ext.Toolbar();  
             tb.render('toolbar');  
               
             tb.add({  
                text:'新建',  
                menu:menu1  
             });  
2、用Ext.menu.Separator的实例作为参数,如下面的代码所示:


[c-sharp] view plaincopy
menu1.add(new Ext.menu.Separator());  
 


具体效果如图2所示:






图2.1 无分隔线效果






图2.2 具有分隔线效果


三、多级菜单
下拉菜单可以嵌套,而且嵌套的层数似乎任意的,我们先来看一个两层结构的菜单,实现方法很简单,只要在下拉菜单中再加一个menu菜单参数并指定对应的下级菜单即可,如下面代码所示:


[c-sharp] view plaincopy
var menuHistory=new Ext.menu.Menu({  
                items:[  
                    {text:'今天'},  
                    {text:'昨天'},  
                    {text:'一周'},  
                    {text:'一年'}  
                ]  
             });  
               
             var menuFile=new Ext.menu.Menu({  
                items:[{  
                    text:'新建'  
                },{  
                    text:'打开'  
                },{  
                    text:'保存'  
                },{  
                    text:'历史',menu:menuHistory  
                },{  
                    text:'关闭'  
                }]  
             });  
               
             var tb=new Ext.Toolbar();  
             tb.render('toolbar');  
               
             tb.add({  
                text:'文件',  
                menu:menuFile  
             });  
实现效果图如下所示:






图3 两层结构的嵌套菜单


在上面的实例中,我们可以直接使用menu参数指定在菜单的哪个部分加上子菜单。利用这些方法,我们就可以轻易实现自己想要的功能菜单了。


四、高级菜单
除了上面提到的最基本的菜单按钮,EXT还为我们提供了一些功能比较复杂的菜单控件,供我们直接调用,本节将详细介绍这些高级菜单的使用方法和实例。


4.1 多选菜单和单选菜单


我们使用Ext.menu.CheckItem来创建多选菜单,text参数表示菜单上显示的文字,checked参数表示当前菜单项是否被选中.checkHandler用来指定选中菜单时执行的处理菜单.单选菜单也基本类似,具体使用代码如下:


[c-sharp] view plaincopy
var menuCheckbox=new Ext.menu.Menu({  
                items:[  
                    new Ext.menu.CheckItem({  
                        text:'粗体',  
                        checked:true,  
                        checkHandler:function(item,checked){  
                            Ext.Msg.alert('多选',(checked?'选中':'取消')+'粗体');  
                        }  
                    }),  
                    new Ext.menu.CheckItem({  
                        text:'斜体',  
                        checked:true,  
                        checkHandler:function(item,checked){  
                            Ext.Msg.alert('多选',(checked?'选中':'取消')+'斜体');  
                        }  
                    })  
                ]  
             })  
             var tb=new Ext.Toolbar();  
             tb.render('toolbar');  
               
             tb.add({  
                text:'字体',  
                menu:menuCheckbox  
             });  
效果图如图4所示






图4 多选菜单


4.2 时间菜单


EXT为我们提供了选择日期的菜单Ext.menu.DateMenu,它可以让我们直接把日期选择功能加入到菜单中,实现的代码如下:


[c-sharp] view plaincopy
tb.add({  
                text:'日期',  
                menu:new Ext.menu.DateMenu({  
                    handler:function(dp,date){  
                        Ext.Msg.alert('选择日期','你选择的日期是{0}.',date.format('Y年m月d日'));  
                    }  
                })  
             });  
注意,这时Ext.menu.DateMenu时一个Menu而不是MenuItem,使用时应该用menu参数将它设置成上级菜单的子菜单。实现的效果图如图5所示。






图5 日期菜单


4.3 颜色菜单


EXT为我们提供了选择颜色的功能菜单Ext.menu.ColorMenu,效果图如图6所示。






图6 颜色菜单


颜色选择菜单虽然不常用,但它的效果十分绚丽,它的用法与日期菜单相似,也有特定的handler,如下面代码所示:


[c-sharp] view plaincopy
tb.add({  
                text:'颜色',  
                menu:new Ext.menu.ColorMenu({  
                    handler:function(cm,color){  
                        if(typeof color=='string'){  
                            Ext.Msg.alert('选择颜色','选择的颜色是'+color);  
                        }  
                    }                  
                })  
             });  


五、小结
本章主要介绍如何创建工具条和菜单,以及如何使用下拉菜单和分级菜单对我们需要的功能按钮进行分组显示,除此之外,还关于高级菜单进行了分析。至于分页控件Ext.PagingToolbar的使用方法在后面的章节会给出介绍。

相关文章推荐

ExtJS的使用方法汇总6——工具栏和菜单

菜单的种类很多,包括下拉菜单、分组菜单、右键菜单等等,右键菜单与Window桌面上单击右键弹出的菜单效果一样,只是样式不同,菜单上的内容包括文字、单选框、按钮等。对于EXT来说,这些菜单的实现都非常简...

Extjs5.1学习笔记2——工具栏和菜单栏的使用

1、工具栏的使用,如下代码所示: Ext.onReady(function(){ //创建一个垂直的工具栏 var toolbar = new Ext.toolbar.Toolbar({ re...

ExtJS的使用方法汇总(2)——表单与输入控件

目录(?)[-] 一创建一个简单的表单二FormPanel和BasicForm详解三EXT支持的控件 文本输入控件ExtformTextField多行文本输入控件ExtformTextArea日期...

ExtJS的使用方法汇总7——数据存储与传输

Ext.data在命名空间中定义了一系列store、reader和proxy。Grid和ComboxBox都是以Ext.data为媒介获取数据的,它包含异步加载、类型转换、分页等功能。EXT默认支持A...

ExtJS的使用方法汇总4——拖放以及弹出窗口

本章主要简单介绍下拖放以及弹出窗口的简单应用。 一、拖放 拖放在EXT的组件体系中占有很重要的地位,很多组件内部都封装了对拖放功能的实现,本节主要讨论拖放的组件结构和范例,重点是单独使用Ext.d...

ExtJS的使用方法汇总2——表单与输入控件

一、创建一个简单的表单 1、具体配置信息参考上篇文章 2、创建简单表单的实现代码如下所示: [c-sharp] view plaincopy "text/javascrip...

ExtJS的使用方法汇总(1)——配置和表格控件使用

ExtJS时一套AJAX控件,本人认为它是目前我见过最好最美的JS控件库,所以非常有学习和使用价值,如果你还没有接触过ExtJS或者压根对其不感兴趣,那么没有必要看下去了,ExtJS是一套完整的RIA...

ExtJS的使用方法汇总(1)——配置和表格控件使用

ExtJS的使用方法汇总(1)——配置和表格控件使用 分类: .Net方面 Web开发2009-09-09 14:06 11328人阅读 评论(31) 收藏 举报 extjshea...

ExtJS的使用方法汇总1——配置和表格控件使用

一、ExtJS下载以及配置 1、下载地址:www.extjs.com/(这是官网,大家可以选择自己喜欢的版本下载) 2、配置过程,假设下载后的目录为Ext,我们在该目录下建立我们自己的目录MyEx...

【工作笔记】从零开始学ExtJs6( 四)—— 首页树状菜单和Tab页的实现

题外话 做一个项目要向完成对应的模块,肯定是先要有树形菜单结构,点击对应才dna跳转到相应界面,在extjs中如何实现。是上周遇到的一个小问题,现在做做记录app目录下创建data/menuDat...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ExtJS的使用方法汇总(6)——工具栏和菜单
举报原因:
原因补充:

(最多只允许输入30个字)