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

需要实现功能的规格描述

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

框架实现思考

1. Ext JS 的组件中，Button具备mouseover和mouseout的事件，其他的组件包含focus，blur获得或失去焦点的事件，但是没有鼠标移入和移除事件。
2. HTML的标准元素包含mouseover、mouseout以及mouseleave等事件
3. 任何Ext JS的组件都可以通过getEl() 方法获取该组件的DOM。故可以通过组件的DOM添加鼠标移入和移除事件处理

方案思路

1. 在组件渲染完成后（afterrender事件），获取组件或子元素的DOM，给该DOM添加mouseover事件和处理的方法。
2. 在处理方法中打开一个窗口，并给该窗口赋一个唯一的id， 在打开该窗口时判断，如果存在则打开，如果不存在则创建。
3. 新窗口创建并显示之后，获取该窗口的DOM并添加鼠标移出事件和关闭窗口的处理方法。
4. 新窗口的显示的位置可以通过获取组件的位置进行相对显示。

示例

这里以快速测试方式演示鼠标移动到面板的Header部分时，弹出一个选择对话框，但鼠标离开对话框时，关闭对话框，实现的效果如下