在dijit.Menu上设置最大高度

Question

我有一个使用dijit.menu的弹出式子菜单，由于动态输入，它可能会很长。我想设置最大高度和overflow-y:auto到dijit.menu。所以当它变得太长时会有一个滚动条。

var subMenu  = new dijit.Menu({ parentMenu: this.mainMenu});

//....add a lots of submenu items here

this.mainMenu.addChild(new dijit.PopupMenuItem({label: "some label", popup: subMenu}));

问题是dijit.menu的最高级别是<table>，而max-height将无法使用它。此外，与dijit.form.select不同，dijit.menu不会将maxHeight作为参数。

我注意到很久以前在dojo上有一张描述这个问题的故障单并标记为已修复。但是，我仍然不知道如何在菜单上设置maxheight。（修复似乎不再存在）

Ticket #9086 (Allow CSS height on dijit.Menu)

任何有关我如何能够做到这一点的提示都会被暗示。

Answer 1

正如您所指出的，Dojo处理dijit.Menu小部件的DOM创建的方式存在问题。问题不在于maxHeight不被接受作为参数（因为您可以将其作为Object或String的一部分传递到窗口小部件的style属性中），而不是如何应用样式。

您提到Menu小部件的“顶级”是<table>节点。然而，这不是全部真相。该节点是Dojo向客户端（您）提供的“顶级”domNode，但Menu实际上包含在您无法直接从小部件访问的另一个<div>中，并且您的样式应该

应用于此节点。

此<div>具有属性class="dijitPopup dijitMenuPopup"，但我怀疑您想要将样式设置为全局Dijit弹出窗口/菜单。为避免这种情况，您可以按如下方式在窗口小部件上设置baseClass属性：

new Menu({
    baseClass: "myCustomMenu",
    targetNodeIds: ["myTarget"]
});

这会将该顶级<div>属性更改为class="dijitPopup myCustomMenuPopup"。这为您提供了一个类，您可以使用实现目标所需的CSS样式进行修改：

.myCustomMenuPopup {
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
} 

jsfiddle中的

Here is a working example。