ExtJS：鼠标移出菜单后菜单自动隐藏

1、使用的是Extjs2.0.2。

2、遇到的问题，简述如下：

当下拉菜单显示后，如果不做任何操作，而直接移开鼠标，此时菜单不会自动消失（隐藏），一直会显示在屏幕上。

必须需要鼠标单击一下菜单项，或单击页面的其他地方后，该菜单才会消失（隐藏）。

3、为了增强用户体验，测试鼠标在移出下拉菜单后，使菜单可以自动隐藏。

下面是测试Demo的代码：

<%@ page language="java" pageEncoding="UTF-8"%>

Ext.onReady(function(){
    Ext.QuickTips.init();

    //子级菜单项
    var menu1_1_1 = new Ext.menu.Menu({
       id:'menu1_1_1',
                 items: [
                        {id: "1551",text:'测试1',handler: onItemClick},
                        {id: "1552",text:'测试2',handler: onItemClick},
                        {id: "1553",text:'测试3',handler: onItemClick}
                      ]
                 });
    //子级菜单项
    var menu1_1 = new Ext.menu.Menu({
           id:'menu1_1',
                     items:[
                        {id: "151",text:'子项1',handler: onItemClick},
                           {id: "152",text:'子项2',handler: onItemClick},
                           {id: "153",text:'子项3',handler: onItemClick},
                           {id: "154",text:'子项4',handler: onItemClick},
                           {id: "155",text: '子项5',menu: menu1_1_1}]
            });
    //菜单1
    var menu1 = new Ext.menu.Menu({
     id: 'menu1',
     items: [
      {id: "11",text:'菜单项1',handler: onItemClick},
      {id: "12",text:'菜单项2',handler: onItemClick},
      {id: "13",text:"菜单项3",handler: onItemClick},
      {id: "14",text: "菜单项4",handler: onItemClick},
      {id: "15",text: "菜单项5",menu: menu1_1},
      {id: "16",text: "菜单项6",handler: onItemClick}
            ]
     });

//菜单2
    var menu2 = new Ext.menu.Menu({
     id: 'menu2',
     items: [
     {id: "21",text: '菜单1',handler: onItemClick},
     {id: "22",text: "菜单2",handler: onItemClick},
     {id: "23",text: "菜单3",handler: onItemClick}
            ]
     });

    //菜单3
    var menu3 = new Ext.menu.Menu({
     id: 'menu3',
     items: [
      {id: "31",text: '菜单4',handler: onItemClick},
      {id: "32",text: "菜单6",handler: onItemClick}
            ]
     });

    var d_menu1 = Ext.get("d_menu1");
    var d_menu2 = Ext.get("d_menu2");
    var d_menu3 = Ext.get("d_menu3");

d_menu1.on("mouseover",
               function(e){
    menu1.show(d_menu1);}
             );

    d_menu2.on("mouseover",
               function(e){
    menu2.show(d_menu2);}
              );

    d_menu3.on("mouseover",
                function(e){
     menu3.show(d_menu3);}
              );

    //鼠标移出菜单后，菜单自动隐藏。
    var mouseOutHideMenu = function(MyMenu){
           MyMenu.on("mouseout",
                  function(menu,e,itme){
                     if(!e.getRelatedTarget().contains(e.getTarget())&& !menu.getEl().contains(e.getRelatedTarget())){
    //下面这句if语句，是判断鼠标是否移动到子菜单上。
    if (!Ext.get(e.getTarget()).hasClass('x-menu-item')){
        hideAllMenu();
    }
                     }else
                        if(e.getRelatedTarget().contains(menu.getEl().dom)){
                //下面这句if语句，是判断鼠标是否移动到子菜单上。
                if (!Ext.get(e.getTarget()).hasClass('x-menu-item-icon')&&!Ext.get(e.getTarget()).hasClass('x-menu-item')){
        hideAllMenu();
           }
                     }
              });
     }

    //每个菜单项添加监听
    mouseOutHideMenu(menu1);
    mouseOutHideMenu(menu2);
    mouseOutHideMenu(menu3);
    mouseOutHideMenu(menu1_1);
    mouseOutHideMenu(menu1_1_1);

    var hideAllMenu = function(){
  //隐藏菜单
  menu1.hide();
  menu2.hide();
  menu3.hide();
  menu1_1.hide();
  menu1_1_1.hide();
}

    var page_header=Ext.get('menu_header');

page_header.on("mouseover",function(e){
hideAllMenu(); //隐藏菜单
});
});

function onItemClick(item){
//alert('Click!');
}
</script>
</head>

<body>

<div id="menu_header">
<table height="20" cellSpacing="0" cellPadding="0" width="1004" border="0">
   <tr>
     <td>Welcome</td>
   </tr>
</table>
</div>

</body>
</html>

[－完－]

by JRQ

2010/12/30

转载于:https://www.cnblogs.com/java0819/archive/2010/12/31/2146207.html

ExtJS：鼠标移出菜单后菜单自动隐藏相关推荐

echarts 地图去除点击事件_echarts 地图鼠标移出地图后的事件要怎么写
不需要做鼠标移出地图后的事件监听. echarts 点击一个区域,会选中它.再次点击,就取消选中. 只需要设置地图只能选择一个,然后监听点击事件,鼠标点击时,判断该区域是否选中,如果选中则显示相应区域 ...
echarts鼠标滑动缩放后会自动回弹(已解决)
今天碰到的一个小坑:由于数据过多,在有限的视野内显示不完,需要滑动缩放完成数据的预览.跟着官方文档写之后确实是实现缩放和滑动,但是问题也就出现了,过了几秒后自动回弹原大小. 原代码:(会发生回弹) d ...
鼠标移入下拉菜单相关问题？
一.这是需要实现的效果功能描述: 鼠标移入导航,下方显示对应的菜单: 鼠标移出导航,隐藏下方对应的菜单: 当下方菜单显示后,鼠标移入没有变化: 当鼠标移出下方的菜单,菜单进行隐藏: 如图所示: 二. ...
制作可以自动隐藏的弹出式菜单
关键在于对WM_ENTERIDLE消息的处理在菜单状态下移动鼠标会产生WM_ENTERIDLE消息这时用TempPoint.WindowFromPoint可以取得当前鼠标所指窗体的句柄再用Get ...
html字段隐藏,HTML5+CSS3实现超酷登录窗口(自动隐藏默认文本及判断必填字段)
内容介绍热点排行相关文章下载地址↓ 效果非常不错的登录窗口,输入框获取焦点后会自动隐藏默认文本,如果为空会提示必填字段 ,经测试,效果相当不错,感兴趣的朋友可以参考下哈在网页head区添加以下代码 ...
Pycharm2019使用方法（六）——鼠标放代码中单击Edit后菜单功能
上一章:Pycharm2019使用方法(五)--鼠标放代码中单击鼠标右键后菜单功能一.鼠标放代码中单击Edit后菜单功能二.说明 Paste from History 从历史粘贴记录中选择,进行粘 ...
table内容超长自动隐藏，鼠标放置后浮动显示全部内容
目录问题描述解决思路相关代码 1.限定td的宽度 2.内容特殊处理 3.全局指定动态指定css样式 4.效果如下延伸贴两个关于rem/em/px介绍的参考文献问题描述有的时候table作 ...
Android 拖拽球吸附动画,android可拖动，展示菜单，能自动吸边和半隐藏的悬浮球...
FloatBall 效果图 | Gradle 项目根目录的build.gradle: buildscript { allprojects { repositories { jcenter() } } ...
android自动隐藏悬浮菜单,FloatBall
FloatBall 效果图 | Gradle 项目根目录的build.gradle: buildscript { allprojects { repositories { jcenter() } } ...

ExtJS：鼠标移出菜单后菜单自动隐藏

ExtJS：鼠标移出菜单后菜单自动隐藏相关推荐

最新文章

热门文章