ExtJS：鼠标移出菜单后菜单自动隐藏
ExtJS：鼠标移出菜单后菜单自动隐藏
1、使用的是Extjs2.0.2。
2、遇到的问题，简述如下：
当下拉菜单显示后，如果不做任何操作，而直接移开鼠标，此时菜单不会自动消失（隐藏），一直会显示在屏幕上。
必须需要鼠标单击一下菜单项，或单击页面的其他地方后，该菜单才会消失（隐藏）。
3、为了增强用户体验，测试鼠标在移出下拉菜单后，使菜单可以自动隐藏。
下面是测试Demo的代码：
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>TEST</title>
<link rel="stylesheet" type="text/css" href="./extjs/ext-all.css" />
<link rel="stylesheet" type="text/css" href="./extjs/ext-patch.css" />
<script type="text/javascript" src="./extjs/ext-base.js"></script>
<script type="text/javascript" src="./extjs/ext-all.js"></script>
<script type="text/javascript" src="./extjs/ext-lang-zh_CN.js"></script>
<script type=text/javascript>
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>
<table height="50" width="1004" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><div id = "d_menu1">菜单1</div></td>
<td><div id = "d_menu2">菜单2</div></td>
<td><div id = "d_menu3">菜单3</div></td>
<td>
</tr>
</table>
</body>
</html>
[－完－]
by JRQ
2010/12/30