how to separate buttons in two divs

I have qx.ui.menu.Buttons. I need to show the first button always and add a scrollbar on the other (3-4) buttons if the height is bigger than 400 px.

There are two <div>s. First <div> with one button is always the same. The second <div> has 3 buttons and the second <div>'s height is 400 px.

I need two wrappers in qx.ui.menu.Menu for buttons. But when I add a new qx.ui.menu.Menu() and add buttons there it won't show up (it opens from SetOpener, open).

// 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
});

Solution

The one of simple and fast solutions which comes to mind:

  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});

Instead of using a menu for button which has restricted API I use a popup window with list content inside it. The popup is touched to the menu button via placeToWidget method. First item of the popup window content is just any item (may use button instead) the second one is a list which has height and if items exceed the height there will be scroll shown.