如何在两个div中分离按钮

Question

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

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

我需要两个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方法被触摸到菜单按钮。弹出窗口内容的第一项只是任何项(可以使用按钮)，第二项是具有高度的列表，如果项超过高度，将显示滚动。