如何在两个div中分离按钮

Question

我有qx.ui.menu.Buttons。如果高度大于400像素，我需要始终显示第一个按钮，并在其他(3-4(个按钮上添加滚动条。

有两个<div>。第一个有一个按钮的<div>总是相同的。第二个<div>有3个按钮，第二个<div>的高度是400像素。

我需要qx.ui.menu.Menu中的两个按钮包装器。但当我添加一个新的qx.ui.menu.Menu()并在那里添加按钮时，它不会显示(它从SetOpener打开，打开(。

// Create a button
let menu = qx.ui.menu.Menu()
menu.add(new qx.ui.menu.Button('test2'))
// Document is the application root
var doc = this.getRoot();
// Add button to document at fixed coordinates
doc.add(menu, {
left : 200,
top  : 50
});

Answer 1

脑海中浮现的简单快速的解决方案之一：

let menuButton = new qx.ui.form.MenuButton("Menu");
// menu and static part
const win = new qx.ui.popup.Popup();
const staticItem = new qx.ui.form.ListItem("Item 1");
staticItem.addListener("click", function(){
// do something
});
win.add(staticItem);
win.setLayout(new qx.ui.layout.VBox());
// list 2 (dynamic part)
const list2 = new qx.ui.form.List();
list2.setHeight(100);
for (let i = 0; i < 10; i++){
list2.add(new qx.ui.form.ListItem(`Item ${i}`));
}
win.add(list2);
menuButton.addListener("click", function(){
win.placeToWidget(menuButton);
win.show();
});
let doc = this.getRoot();
doc.add(menuButton, {left: 100, top: 50});

我没有使用限制API的按钮菜单，而是使用了一个弹出窗口，其中包含列表内容。通过placeToWidget方法将弹出窗口触摸到菜单按钮。弹出窗口内容的第一个项目只是任何项目(可以使用按钮(，第二个项目是一个有高度的列表，如果项目超过高度，将滚动显示。