菜单的种类很多,包括下拉菜单、分组菜单、右键菜单等等,右键菜单与Window桌面上单击右键弹出的菜单效果一样,只是样式不同,菜单上的内容包括文字、单选框、按钮等。对于EXT来说,这些菜单的实现都非常简单。
我们可以在一个面板的顶端或底端放置一横排功能按钮,按下不同的按钮时会执行不同的操作。我们把这个横条称为工具条,放在工具条上的按钮称为菜单。本章将详细介绍EXT中工具栏和菜单的使用方法。
一、简单菜单
创建一个简单工具条的方法如下,注意的一点是HTML代码必须要有:<div id="toolbar"></div>
过程大致包括:先创建一个工具条,用工具条的render()函数把它渲染在DIV上,然后调用Toolbar的add函数,向Toolbar添加4个按钮,同时还可以添加单击处理事件。
- Ext.onReady(function(){
- vartb=newExt.Toolbar();
- tb.render('toolbar');
- tb.add({
- text:"新建N",
- handler:function(){
- Ext.Msg.alert('提示','新建');
- }
- },{
- text:"修改C"
- },{
- text:"删除"
- },{
- text:"显示"
- });
- });
效果如图1所示:
图1 简单的工具条
二、向菜单中添加分隔线
分隔线显示就是一条水平线,可以使用它将菜单中不同类型的菜单项分隔显示,Ext中向菜单中添加分隔线的方式有两种。
1、使用连字符或'separator'作为参数,如下面的代码所示:
- varmenu1=newExt.menu.Menu({
- items:[
- {text:'菜单一'},
- {text:'菜单二'}
- ]
- });
- menu1.add('separator');
- vartb=newExt.Toolbar();
- tb.render('toolbar');
- tb.add({
- text:'新建',
- menu:menu1
- });
2、用Ext.menu.Separator的实例作为参数,如下面的代码所示:
- menu1.add(newExt.menu.Separator());
具体效果如图2所示:
图2.1 无分隔线效果
图2.2 具有分隔线效果
三、多级菜单
下拉菜单可以嵌套,而且嵌套的层数似乎任意的,我们先来看一个两层结构的菜单,实现方法很简单,只要在下拉菜单中再加一个menu菜单参数并指定对应的下级菜单即可,如下面代码所示:
- varmenuHistory=newExt.menu.Menu({
- items:[
- {text:'今天'},
- {text:'昨天'},
- {text:'一周'},
- {text:'一年'}
- ]
- });
- varmenuFile=newExt.menu.Menu({
- items:[{
- text:'新建'
- },{
- text:'打开'
- },{
- text:'保存'
- },{
- text:'历史',menu:menuHistory
- },{
- text:'关闭'
- }]
- });
- vartb=newExt.Toolbar();
- tb.render('toolbar');
- tb.add({
- text:'文件',
- menu:menuFile
- });
实现效果图如下所示:
图3 两层结构的嵌套菜单
在上面的实例中,我们可以直接使用menu参数指定在菜单的哪个部分加上子菜单。利用这些方法,我们就可以轻易实现自己想要的功能菜单了。
四、高级菜单
除了上面提到的最基本的菜单按钮,EXT还为我们提供了一些功能比较复杂的菜单控件,供我们直接调用,本节将详细介绍这些高级菜单的使用方法和实例。
4.1 多选菜单和单选菜单
我们使用Ext.menu.CheckItem来创建多选菜单,text参数表示菜单上显示的文字,checked参数表示当前菜单项是否被选中.checkHandler用来指定选中菜单时执行的处理菜单.单选菜单也基本类似,具体使用代码如下:
- varmenuCheckbox=newExt.menu.Menu({
- items:[
- newExt.menu.CheckItem({
- text:'粗体',
- checked:true,
- checkHandler:function(item,checked){
- Ext.Msg.alert('多选',(checked?'选中':'取消')+'粗体');
- }
- }),
- newExt.menu.CheckItem({
- text:'斜体',
- checked:true,
- checkHandler:function(item,checked){
- Ext.Msg.alert('多选',(checked?'选中':'取消')+'斜体');
- }
- })
- ]
- })
- vartb=newExt.Toolbar();
- tb.render('toolbar');
- tb.add({
- text:'字体',
- menu:menuCheckbox
- });
效果图如图4所示
图4 多选菜单
4.2 时间菜单
EXT为我们提供了选择日期的菜单Ext.menu.DateMenu,它可以让我们直接把日期选择功能加入到菜单中,实现的代码如下:
- tb.add({
- text:'日期',
- menu:newExt.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,如下面代码所示:
- tb.add({
- text:'颜色',
- menu:newExt.menu.ColorMenu({
- handler:function(cm,color){
- if(typeofcolor=='string'){
- Ext.Msg.alert('选择颜色','选择的颜色是'+color);
- }
- }
- })
- });
五、小结
本章主要介绍如何创建工具条和菜单,以及如何使用下拉菜单和分级菜单对我们需要的功能按钮进行分组显示,除此之外,还关于高级菜单进行了分析。至于分页控件Ext.PagingToolbar的使用方法在后面的章节会给出介绍。
菜单的种类很多,包括下拉菜单、分组菜单、右键菜单等等,右键菜单与Window桌面上单击右键弹出的菜单效果一样,只是样式不同,菜单上的内容包括文字、单选框、按钮等。对于EXT来说,这些菜单的实现都非常简单。
我们可以在一个面板的顶端或底端放置一横排功能按钮,按下不同的按钮时会执行不同的操作。我们把这个横条称为工具条,放在工具条上的按钮称为菜单。本章将详细介绍EXT中工具栏和菜单的使用方法。
一、简单菜单
创建一个简单工具条的方法如下,注意的一点是HTML代码必须要有:<div id="toolbar"></div>
过程大致包括:先创建一个工具条,用工具条的render()函数把它渲染在DIV上,然后调用Toolbar的add函数,向Toolbar添加4个按钮,同时还可以添加单击处理事件。
- Ext.onReady(function(){
- vartb=newExt.Toolbar();
- tb.render('toolbar');
- tb.add({
- text:"新建N",
- handler:function(){
- Ext.Msg.alert('提示','新建');
- }
- },{
- text:"修改C"
- },{
- text:"删除"
- },{
- text:"显示"
- });
- });
效果如图1所示:
图1 简单的工具条
二、向菜单中添加分隔线
分隔线显示就是一条水平线,可以使用它将菜单中不同类型的菜单项分隔显示,Ext中向菜单中添加分隔线的方式有两种。
1、使用连字符或'separator'作为参数,如下面的代码所示:
- varmenu1=newExt.menu.Menu({
- items:[
- {text:'菜单一'},
- {text:'菜单二'}
- ]
- });
- menu1.add('separator');
- vartb=newExt.Toolbar();
- tb.render('toolbar');
- tb.add({
- text:'新建',
- menu:menu1
- });
2、用Ext.menu.Separator的实例作为参数,如下面的代码所示:
- menu1.add(newExt.menu.Separator());
具体效果如图2所示:
图2.1 无分隔线效果
图2.2 具有分隔线效果
三、多级菜单
下拉菜单可以嵌套,而且嵌套的层数似乎任意的,我们先来看一个两层结构的菜单,实现方法很简单,只要在下拉菜单中再加一个menu菜单参数并指定对应的下级菜单即可,如下面代码所示:
- varmenuHistory=newExt.menu.Menu({
- items:[
- {text:'今天'},
- {text:'昨天'},
- {text:'一周'},
- {text:'一年'}
- ]
- });
- varmenuFile=newExt.menu.Menu({
- items:[{
- text:'新建'
- },{
- text:'打开'
- },{
- text:'保存'
- },{
- text:'历史',menu:menuHistory
- },{
- text:'关闭'
- }]
- });
- vartb=newExt.Toolbar();
- tb.render('toolbar');
- tb.add({
- text:'文件',
- menu:menuFile
- });
实现效果图如下所示:
图3 两层结构的嵌套菜单
在上面的实例中,我们可以直接使用menu参数指定在菜单的哪个部分加上子菜单。利用这些方法,我们就可以轻易实现自己想要的功能菜单了。
四、高级菜单
除了上面提到的最基本的菜单按钮,EXT还为我们提供了一些功能比较复杂的菜单控件,供我们直接调用,本节将详细介绍这些高级菜单的使用方法和实例。
4.1 多选菜单和单选菜单
我们使用Ext.menu.CheckItem来创建多选菜单,text参数表示菜单上显示的文字,checked参数表示当前菜单项是否被选中.checkHandler用来指定选中菜单时执行的处理菜单.单选菜单也基本类似,具体使用代码如下:
- varmenuCheckbox=newExt.menu.Menu({
- items:[
- newExt.menu.CheckItem({
- text:'粗体',
- checked:true,
- checkHandler:function(item,checked){
- Ext.Msg.alert('多选',(checked?'选中':'取消')+'粗体');
- }
- }),
- newExt.menu.CheckItem({
- text:'斜体',
- checked:true,
- checkHandler:function(item,checked){
- Ext.Msg.alert('多选',(checked?'选中':'取消')+'斜体');
- }
- })
- ]
- })
- vartb=newExt.Toolbar();
- tb.render('toolbar');
- tb.add({
- text:'字体',
- menu:menuCheckbox
- });
效果图如图4所示
图4 多选菜单
4.2 时间菜单
EXT为我们提供了选择日期的菜单Ext.menu.DateMenu,它可以让我们直接把日期选择功能加入到菜单中,实现的代码如下:
- tb.add({
- text:'日期',
- menu:newExt.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,如下面代码所示:
- tb.add({
- text:'颜色',
- menu:newExt.menu.ColorMenu({
- handler:function(cm,color){
- if(typeofcolor=='string'){
- Ext.Msg.alert('选择颜色','选择的颜色是'+color);
- }
- }
- })
- });
五、小结
本章主要介绍如何创建工具条和菜单,以及如何使用下拉菜单和分级菜单对我们需要的功能按钮进行分组显示,除此之外,还关于高级菜单进行了分析。至于分页控件Ext.PagingToolbar的使用方法在后面的章节会给出介绍。
分享到:
相关推荐
EXTJS4自学手册——EXT基本方法、属性(onReady、define、create) EXTJS4自学手册——EXT基本方法、属性(apply、applyIf、constructor) EXTJS4自学手册——EXT基本方法、属性(mixins、statics、require) EXTJS...
EXTJS4 菜单栏
Extjs 超级工具栏图标
本文介绍在桌面程序开发中很常用也很简单的工具栏和菜单,但是在通常的web开发中,要实现好工具栏和菜单并非易事,然而extjs使我们能够用类似桌面程序开发的方法来开发web的工具栏和菜单。
ExtJS4.0图文实例——数据组件介绍及简单应用
extjs属性方法集中方便你查看学习,赶快来下载吧!学习extjs
详细介绍了各种工具栏的使用及实例代码,对初学者很有用
Extjs+Gride使用方法 Extjs Gride
Extjs动态菜单可添加子项和编辑子项,拖动保存、dwr实现存储数据。
Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4 API文档阅读(四)——Data ExtJS4 Grid组件 Extjs4 TreeGrid Extjs4 TreePanel...
配置和表格控件使用 表单与输入控件 树形结构 拖放以及弹出窗口
一个关于extjs的动态树demo 好久没裸写(不用框架)过了,都不记得关闭数据连接的语句写在哪里了。 这个demo至少要你懂得一些extjs语法,否则,你会看着很费劲。 里面提供了需要的表结构和mysql驱动 如果你不会mysql...
Extjs 下拉菜单实现拼音输入进行检索
这是我在网上看到的好东东,和大家分享下,个人认为对extjs学习很有帮助!
xtJs已经升级到了5.0了,目前可能多数应用还在使用ExtJs 3.系列。 从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从...
extjs4.2 desktop demo 拓展功能:图标换行,拖动,多级开始菜单,修正extjs4.2的一些bug,加了几个桌面图标,纯js无后台程序,无需发布即可浏览。
Extjs4API文档阅读(三)——布局和容器[参照].pdf
extjs实现动态树加载菜单
项目进行前端框架升级——extJS 4升级至extJS6.6所遇的一些问题及相对应的解决方案建议
Extjs教程源码 介: ***************第一部分基础知识**************** 第一讲: EXTJS4.0概述和HelloWorld程序 ...第三十讲: EXTJS4.0的Desktop使用讲解 本资料共包含以下附件: EXTJS4.0视频教程配套代码.zip