Is there an easy way to center a qx.ui.popup.Popup

Question

I am attempting to show an image in a qx.ui.popup.Popup but am having trouble understanding how it can be centered on the screen. The demo browser has an example for placement but it's pretty hard to follow. Any help is appreciated.

Answer 1

Try capturing the "appear" event and moving the popup to the center of the widget that fills the screen. Example code and link to Qooxdoo Playground example: Qooxdoo Playground

// Document is the application root
var doc = this.getRoot();
var mypop = new qx.ui.control.ColorPopup();
mypop.exclude();
mypop.setValue("#23F3C1");
mypop.addListener("appear", function() {
  var parent = this.getLayoutParent();
  if (parent) {
    var bounds = parent.getBounds();
    if (bounds) {
      var hint = this.getSizeHint();

      var left = Math.round((bounds.width - hint.width) / 2);
      var top = Math.round((bounds.height - hint.height) / 2);

      if (top < 0) {
        top = 0;
      }
      this.setLayoutProperties({
        top: top,
        left: left
      });
    }
  }
}, mypop);

var mybtn = new qx.ui.form.Button("Open Popup");
mybtn.addListener("execute", function (e) {
  //mypop.placeToWidget(mybtn);
  mypop.show();
});

doc.add(mybtn, {
  left: 20,
  top: 20,
});