qooxdoo

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


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


Solution

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