how to add a y-scrollbar to qx.ui.menu.Menu

Question

I have a lot of qx.ui.menu.Button and I want to add a scrollbar to it, how can I do it?

`var menu = new qx.ui.menu.Menu();
var button1 = new qx.ui.menu.Button("Line 431");
var button2 = new qx.ui.menu.Button("Line 30");
var forwardButton = new qx.ui.toolbar.SplitButton(
  "Next",
  null,
  menu
);
var forwardButton2 = new qx.ui.toolbar.SplitButton(
  "Next2",
  null,
  menu
);
//buttons should go one after another
//scroll = new qx.ui.container.Scroll();
//scroll._add()
this.getRoot().add(forwardButton);
this.getRoot().add(forwardButton2, {top: 30});`

the scrollbar should be like it exists for qx.ui.list.List

Answer 1

The solution is to use combination of Popup and List widgets:

// Create a button
const button1 = new qx.ui.form.Button("Click me", "test/test.png");

const model = new qx.data.Array(["a", "ab", "abc", "abcd", "abcde", "abcdef", "abcdefg", "abcdefgh"]);
const list = new qx.ui.list.List(model);
list.addListener("changeValue", function(value){console.log(value)}, this);

const popup = new qx.ui.popup.Popup(new qx.ui.layout.Grow());
popup.add(list);


// Document is the application root
const doc = this.getRoot();

// Add button to document at fixed coordinates
doc.add(button1, {left: 100, top: 50});

// Add an event listener
button1.addListener("execute", function() {
  popup.show();
  popup.placeToWidget(button1);
});