简析 Ext.menu.Menu

最新推荐文章于 2025-11-04 16:58:43 发布

最新推荐文章于 2025-11-04 16:58:43 发布 · 138 阅读

文章标签：

#EXT

framework / lib 专栏收录该内容

72 篇文章

订阅专栏

本文探讨了ExtJS框架中菜单管理机制的实现原理。通过分析Ext.menu.MenuMgr组件如何处理菜单的显示与隐藏，特别是点击空白区域自动关闭所有菜单的功能，揭示了ExtJS优雅处理用户交互的设计思想。

由于要做一个树状菜单结构，就简单参考了一下 extjs menu 的源代码。

Class Ext.menu.Menu

Package:	Ext.menu
Defined In:	Menu.js
Class:	Menu
Subclasses:	ColorMenu , DateMenu
Extends:	Observable

A menu object. This is the container to which you add all other menu items. Menu can also serve as a base class when you want a specialized menu based off of another component (like Ext.menu.DateMenu for example).

发现一个处理挺巧妙的，比如我们点击一个菜单弹出子菜单，然后离开到页面空白处，点击一下所有菜单都会自动关闭。

当如，处理不难，全局监控 click 好了，可要写的优雅如 extjs 那就太难为了。Extjs 中的这方面处理主要由 Ext.menu.MenuMgr 负责，当new 一个新的 menu 时，在他的构造函数中：

Ext.menu.MenuMgr.register(this);

将自己注册到了一个全局，由 MenuMgr 来管理自己的外部交互。而 MenuMgr 则监控 menu 的显示事件

menu.on("show", onShow);
function onShow(m) {
    var last = active.last();
    lastShow = new Date();
    active.add(m);
    if (!attached) {
        Ext.getDoc().on("mousedown", onMouseDown);
        attached = true;
    }
    if (m.parentMenu) {
        m.getEl().setZIndex(parseInt(m.parentMenu.getEl().getStyle("z-index"), 10) + 3);
        m.parentMenu.activeChild = m;
    } else if (last && last.isVisible()) {
        m.getEl().setZIndex(parseInt(last.getEl().getStyle("z-index"), 10) + 3);
    }
}

可见，在 menu 显示时，同时在 document 监控 mousedown 事件

function onMouseDown(e) {
    if (lastShow.getElapsed() > 50 && active.length > 0 && !e.getTarget(".x-menu")) {
        hideAll();
    }
}

于是在页面其他部位点一下，所有的 menu 都隐藏了，O(∩_∩)O~