Extjs学习 menu菜单

最新推荐文章于 2022-05-27 16:39:31 发布
最新推荐文章于 2022-05-27 16:39:31 发布
阅读量2k 收藏
点赞数
分类专栏： Extjs 文章标签： menu extjs function date html border

本菜单的效果

 

完整代码下载

 

详细代码：

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <title>EXT MenuTest..........</title>

        <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">

        <script type="text/javascript" src="adapter/ext/ext-base.js"></script>

        <script type="text/javascript" src="ext-all.js"></script>

        <script type="text/javascript" src="build/locale/ext-lang-zh_CN.js"></script>

        <script type="text/javascript">

           

        /**

         * 颜超群

         * 2008.05.31

         *

         *

         *菜单

         *

         * 所在包:   Ext.menu

         *

         * 所有菜单类:

         *      Ext.menu.Adapter   

         *      Ext.menu.BaseItem  

         *      Ext.menu.CheckItem

         *      Ext.menu.ColorItem

         *      Ext.menu.ColorMenu

         *      Ext.menu.DateItem

         *      Ext.menu.Item

         *      Ext.menu.Menu

         *      Ext.menu.MenuMgr

         *      Ext.menu.Separator

         *                

         */

            /*

             * 最常用的菜单类

             * Ext.menu.Menu

             * 属性:items    可以放菜单包中所有的实例，一般我们常用Ext.menu.Item

             *

             * Ext.menu.Item属性:

             *

             * handler      处理函数

             * hideDelay    隐藏延迟，默认100毫秒

             * hideOnClick  是否点击菜单项后自动隐藏，默认是true

             * href         指定链接地址

             * hrefTarget   链接打开的发式

             * icon         可以指定在菜单项前面显示的图标，默认没有图标

             * text         菜单项显示的文本，可以使用Html

             *

             */

           

           

            Ext.onReady(function(){

               

                var menu1=new Ext.menu.Menu({

                    items:[{                //菜单项的集合

                        text:"颜超群",      //菜单项的文本，

                        href:"http://jaychaoqun.cnblogs.cn",//指定链接地址

                        hrefTarget:"_blank",        //链接打开的发式，在新窗口打开

                        icon:"icon-info.gif"        //菜单项前面的图标

                    },{

                        text:"颜超群",

                        href:"http://jaychaoqun.cnblogs.cn",

                        hrefTarget:"_blank",

                        icon:"icon-info.gif"

                    },{

                        text:"颜超群",

                        href:"http://jaychaoqun.cnblogs.cn",

                        hrefTarget:"_blank",

                        icon:"icon-info.gif"

                    },{

                        text:"颜超群",

                        href:"http://jaychaoqun.cnblogs.cn",

                        hrefTarget:"_blank",

                        icon:"icon-info.gif"

                    },{

                        text:"颜超群",

                        href:"http://jaychaoqun.cnblogs.cn",

                        hrefTarget:"_blank",

                        icon:"icon-info.gif"

                    },{

                        text:"颜超群",

                        href:"http://jaychaoqun.cnblogs.cn",

                        hrefTarget:"_blank",

                        icon:"icon-info.gif"

                    }]

                });

                /**

                 * 普通菜单

                 */

                var menu2=new Ext.menu.Menu({

                    items:[{

                        text:"<b>粗体</b>",

                        handler:handlerMenu

                    },{

                        text:"<i>斜体<i>",

                        handler:handlerMenu

                    },{

                        text:"<u>下划线</u>",

                        handler:handlerMenu

                    },{

                        text:"<font color=red>红色字体</font>",

                        handler:handlerMenu

                    }]

                });

               

                /**

                 * 带子菜单的菜单

                 */

                var menu3=new Ext.menu.Menu({

                    items:[{

                        text:"菜单项1",         //菜单项的文本，

                                    //子菜单

                        menu:{items:[{text:"子菜单1",handler:handlerMenu},{text:"子菜单2",handler:handlerMenu},{text:"子菜单3",handler:handlerMenu}]}

                    },{

                        text:"菜单项2",

                        menu:{items:[{text:"子菜单1"},{text:"子菜单2"},{text:"子菜单3"}]}

                    },{

                        text:"菜单项3",

                        menu:{items:[{text:"子菜单1"},{text:"子菜单2"},{text:"子菜单3"}]}

                    }]

                });

                /**

                 * 日期菜单和颜色菜单

                 */

                var menu4=new Ext.menu.Menu({

                    items:[{

                        text:"请选择日期",

                        hideDelay:2000,     //延迟隐藏2000毫秒

                        menu:new Ext.menu.DateMenu({    //日期菜单

                            handler:function(db,date){

                                Ext.Msg.alert("Date","您选的日期是"+date.format("Y年m月d日"));

                        }})

                    },{

                        text:"请选择颜色",

                        menu:new Ext.menu.ColorMenu({   //颜色菜单

                            handler:function(cm,color){

                                Ext.Msg.alert("Color","您选择的颜色是: "+color);

                            }

                        })

                    }]

                });

                var panel=new Ext.Panel({ //new 一个Panel 用以显示菜单

                    width:800,          //宽度

                    border:false,       //没有边框

                    renderTo:"div1",    //显示的位置，在body里的一个div

                    tbar:[{text:"导航菜单",menu:menu1},      //把菜单放在Panel的顶部工具栏

                        {text:"普通菜单",menu:menu2},

                        {text:"带子菜单的菜单",menu:menu3},

                        {text:"日期和颜色",menu:menu4}

                    ]

                });

                /**

                 * 用以处理菜单项点击事件

                 * @param {Object} item

                 */

                function handlerMenu(item){

                    Ext.Msg.alert("提示","您点击了"+item.text+"项");                

                }

            });        

        </script>

    </head>

    <body>

        <br><br>

        <div align="center" id="div1"></div>

    </body>

</html>

 

 

jazwoo
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
(7)ExtJS之菜单
虚心求学_一点一滴
02-25 1389
007_menu.js： //1:菜单和工具栏结合 /*Ext.onReady(function(){ var toolbar=new Ext.toolbar.Toolbar({//创建工具栏 renderTo:Ext.getBody(), width:300 }); var fileMenu=new Ext.menu.Menu({//文件创建菜单 shadow:'fr
ExtJS2.0开发与实践笔记[3]——Ext中的Menu
【Java究竟怎么玩?】
03-20 9563
在桌面程序gui开发中,menu是我们所经常使用的组件之一，它为用户提供了便利的程序功能选择项；而在web开发中，如何制作menu菜单效果一直是个很棘手的问题，如何让菜单通用，如何令菜单响应事件都需要我们自己动手来完成。所幸Ext也为我们提供了Menu组件，以Ext进行开发时，我们的不必要工作量将大大的减少。Ext的Menu组件，是通过几个类的联合来使用的，这些类包括：Ext.Toolbar、Ex
ExtJS6.2开发-首页左菜单添加菜单数据(四)
砌墙民工的博客
01-06 286
一、修改菜单组件 1.找到app目录下main\core\index\component\indexLeftMenu.js文件 2.修改initComponent函数，代码内容如下： initComponent : function() { this.style = ""; this.store = Ext.create('Ext.data.TreeStore', { roo...
Extjs实现菜单下拉和鼠标右键菜单（加入系统菜单权限判断，有权限则显示，无反之）...
weixin_30654419的博客
04-23 155
其实实现并不难。废话不说，先看效果图： （点击“更多功能”按钮，出现下拉菜单，这样就能把一些菜单按钮放到这里，使可视页面不会很拥挤） （在当前页面的任何位置鼠标右键，弹出菜单选项） 现在看看这样通过Extjs实现： 1 <script language="javascript"> 2 var menu = new Ext.menu.Menu(); ...
ext6.2 如何给树菜单添加滚动条
强哥的博客
09-20 2090
使用extjs6官方模板admin-dashboard的话 直接在main.js 里直接加 滚动条的属性 autoScroll:true,containerScroll : true, 是不管用的， 方法如下：xtype：mainContainerWrap 这个 替换成下面这个 从之前的一个整个大个面板变成2个小面板 让 菜单，和右边的展示 独立分开 这样子就改变了之前 他们是用一个滚动条方
JS+CSS右键操作、动态波浪、菜单栏、loading
Benxiaohai_311的博客
05-27 886
一、右键进行一些操作 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <style type="text/css">
ExtJS 设置级联菜单的默认值
10-29
ExtJS在修改这样的页面上赋值是很方便的，在正文中1.2.1代码中可以看出，一行代码就可以搞定，但这是对于普通控件而言，如文本框。对于ComboBox可没这么简单...
Toolbar Menu 菜单(实例分享)
09-25
一款简洁大气的div+css菜单。经常可以用的到的
menu-dinamico-extjs:动态 ExtJS 菜单
06-10
带有 PHP 的 ExtJS 动态菜单这是使用 PHP 的 ExtJS 动态菜单示例，我的意思是使用 PHP，但它可以用任何后端语言完成。 此存储库包含 Ext 项目 5.1 版的“app”文件夹。 菜单由“menu.php”文件定制。 如下： <?...
extjs desktop相关 动态生成开始菜单 多级菜单的快捷方式
04-03
NULL 博文链接：https://cat-rat.iteye.com/blog/1462567
ExtJS-3.4.0系列目录
04-08
一、基础篇 1、Ext JS下载及配置 2、基本功能 　2.1、Ext.MessageBox消息框 　2.2、Ext.window.MessageBox 3、工具栏和菜单栏 　3.1、Ext.toolbar.Toolbar工具栏 　3.2、Ext.menu.Menu菜单栏 4、表单
menudiv.php,使用html中的Menu和Menuitem元素快速创建菜单详解
weixin_29204749的博客
03-18 214
今天向你介绍HTML 5中的两个元素：Menu和Menuitem，这两个元素是W3C交互元素中的一部分。现在Web的演变已经不仅仅局限于文档之间的链接，在APPs中，页面的行为越来越多，因此，是时候形成一个Web交互的标准了。Menu和Menuitem是在开发者中谈论最热门的两个元素，可能是由于主流浏览器对其缺乏足够的支持。在我写这篇文章的时候，FireFox已经实现了这个元素。Menu和Nav的...
(五)Electron 菜单（Menu）
热门推荐
此心勿动的博客
04-13 2万+
这一章对electron的菜单初体验，做一个简单的用例,点击菜单加载网页。electron的菜单被封装之后使用起来非常方便。var template = [{ label: 'Edit', submenu:[ { label:'item1', click:function(){} }， { type: '
ExtJS的使用方法汇总(6)——工具栏和菜单
薛敬明的专栏
09-15 1万+
菜单的种类很多，包括下拉菜单、分组菜单、右键菜单等等，右键菜单与Window桌面上单击右键弹出的菜单效果一样，只是样式不同，菜单上的内容包括文字、单选框、按钮等。对于EXT来说，这些菜单的实现都非常简单。我们可以在一个面板的顶端或底端放置一横排功能按钮，按下不同的按钮时会执行不同的操作。我们把这个横条称为工具条，放在工具条上的按钮称为菜单。本章将详细介绍EXT中工具栏和菜单的使用方法。一、
ExtJs菜单Menu
ysj5125094的专栏
07-16 187
创建简单Meun,实现在TreePanel上面右键. /** 创建简单Menu */ function createMenu(){ //创建一个菜单 var myMenu = new Ext.menu.Menu({ items:[{ text: '右键快捷方式1', menu: [{ ...
Ext.menu.Menu菜单栏
weixin_34320724的博客
04-14 192
1、Ext.menu.Menu主要配置项 Ext.menu.Menu组件主要配置项 配置项参数类型说明 items Mixed 有效菜单项数组 ignoreParentClicks Boolean 忽略任何作为父菜单项的单击事件，默认为false plain Boolean 是否移除菜单左侧的竖线，默认为false 菜单项主要类型 ...
[ExtJS2.1教程-4]Menu(菜单)
llying
02-04 247
menu.html [code="html"] 菜单举例 js css引用这里省略了 [/code] menu.js [code="js"] Ext.onReady(function(){ var menu = new Ext.menu.Menu({ minWidth:200,//最小宽度 items:[{ t...
Extjs menu菜单怎么用
学习也休闲
10-16 2822
文章转载于： Extjs menu菜单的简单用法   http://www.studyofnet.com/news/156.html   在ExtJS中，菜单项由Ext.menu.Item类定义，该类直接继承自Ext.menu.BaseItem，我们只需创建一个菜单Menu对象，然后往Menu对象中加入菜单项，然后在需要显示菜单的时候调用菜单Menu对象的show或showAt方法即可在指
Extjs 实现menu居中效果（仿弹窗）
Kuroko's Development Notes
11-23 1060
简单的效果图：   实现方法： 在button的点击事件中添加以下关键代码：             var menu = Ext.getCmp("databaseMenu");             var menuWidth = Ext.getCmp("databaseMenu").getWidth();             var menuHight = Ext.getCm...
extjs 树形菜单
最新发布
05-24
ExtJS 是一个流行的 JavaScript 框架，提供了丰富的 UI 组件。要创建一个树形菜单，可以使用 Ext.tree.Panel 组件。 以下是一个简单的示例代码： ``` Ext.create('Ext.tree.Panel', { title: 'Tree Panel', ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值