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

posted @ 2010-12-31 21:13 程序员的那些阅读(2894) 评论(0) 编辑收藏举报

刷新页面返回顶部

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

公告