[Ext JS]鼠标移入移除时弹出和关闭窗口| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]鼠标移入移除时弹出和关闭窗口

## 鼠标移入移除时弹出和关闭窗口
### 需要实现功能的规格描述
鼠标进入某个区域时自动弹出一个新窗口，在该新窗口中可以做一些选择等功能
但鼠标离开新窗口时，自动关闭该新窗口。
类似菁优网在组卷时选取教材版本和年级的功能，页面如下：

### 框架实现思考
Ext JS 的组件中，Button具备mouseover和mouseout的事件，其他的组件包含focus，blur获得或失去焦点的事件，但是没有鼠标移入和移除事件。
HTML的标准元素包含mouseover、mouseout以及mouseleave等事件
任何Ext JS的组件都可以通过getEl() 方法获取该组件的DOM。故可以通过组件的DOM添加鼠标移入和移除事件处理
### 方案思路
在组件渲染完成后（afterrender事件），获取组件或子元素的DOM，给该DOM添加mouseover事件和处理的方法。
在处理方法中打开一个窗口，并给该窗口赋一个唯一的id， 在打开该窗口时判断，如果存在则打开，如果不存在则创建。
新窗口创建并显示之后，获取该窗口的DOM并添加鼠标移出事件和关闭窗口的处理方法。
新窗口的显示的位置可以通过获取组件的位置进行相对显示。
### 示例
这里以快速测试方式演示鼠标移动到面板的Header部分时，弹出一个选择对话框，但鼠标离开对话框时，关闭对话框，实现的效果如下：
![](/upload/picture/2022-10-09/upload_b22fc01d14d1f9db7732c54c8e716cf9.png)
源码如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="author" content="Chen Xueming">
<title>ExtJS7 Demo</title>
<script type="text/javascript" src="../../ext/build/ext-all-debug.js"></script>
<link href="../../build/development/Ext7DemoApp/classic/resources/Ext7DemoApp-all.css" rel="stylesheet"        type="text/css"/>
<script>//类型定义</script>
<script>//执行脚本        
Ext.onReady(function(){   
Ext.create('Ext.panel.Panel',{     
title:'Mouse Over and out of Header',  
margin:40,                
html:'This is Test',   
listeners:{       
afterrender:function(thisPanel){
var header = thisPanel.getHeader();
var headerDom = thisPanel.getHeader().getEl();                        headerDom.on('mouseover',function(){
var pos=header.getPosition();
if(Ext.getCmp('myWindow')==null){                                Ext.create('Ext.window.Window',{
id:'myWindow', 
width:600,      
height:400,     
header:false,    
items:{          
xtype:'form',  
defaults:{        
xtype:'checkboxgroup'},  
items:[{                  
items:[{ 
boxLabel:'boy',
name:'gender',
inputValue:'1'
},{
boxLabel:'girl', 
name:'gender',
inputValue:'2'}]}]}}).showAt(pos[0], pos[1]+80);                                Ext.getCmp('myWindow').getEl().on('mouseleave',function(){                                    Ext.getCmp('myWindow').hide();});}else{   
Ext.getCmp('myWindow').show();}});}},   
renderTo: Ext.getBody()})});
</script>
</head>
<body>
</body>
</html>
```

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]鼠标移入移除时弹出和关闭窗口

网站导航