how to bind property of visibility of dropdown

Question

I want to change the color of label when dropdown is shown and return the color of label to normal when dropdown hides. How can I do it with binding?

so there will be a property

property: {
 icon: {
   check: Boolean,
   apply: handleVisibility
 }
}

this.handleVisibility = function(value) {}

this.bind()?

my code

  var label = new qx.ui.basic.Label("Default");
      label.setFont("bold");

      this.getRoot().add(label, {
        left: 20,
        top: 20,
      });

      // create a combo box
      var comboBox = new qx.ui.form.ComboBox();

      // fill the combo box with some stuff
      for (var i = 1; i < 31; i++) {
        var tempItem = new qx.ui.form.ListItem(
          "2^ " + i + " = " + Math.pow(2, i)
        );
        comboBox.add(tempItem);
      }


      // add the combobox to the documents root
      this.getRoot().add(comboBox, {
        left: 20,
        top: 40,
      });

Answer 1

I've appended about 20 lines to your code, here, to show how you might do it. You can plug this into https://playground.qooxdoo.org to test it.

var label = new qx.ui.basic.Label("Default");
label.setFont("bold");

this.getRoot().add(label, {
  left: 20,
  top: 20,
});

// create a combo box
var comboBox = new qx.ui.form.ComboBox();

// fill the combo box with some stuff
for (var i = 1; i < 31; i++) {
  var tempItem = new qx.ui.form.ListItem(
    "2^ " + i + " = " + Math.pow(2, i)
  );
  comboBox.add(tempItem);
}


// add the combobox to the documents root
this.getRoot().add(comboBox, {
  left: 20,
  top: 40,
});

// Get easy access to the textfield of the comboBox and its popup list
let textfield = comboBox.getChildControl("textfield");
let popup = comboBox.getChildControl("popup");

// When the popup's `visibility` property changes, modify the textfield's
// `backgroundColor` property. The value of the `visibility` property will be
// "hidden" or "visible". We use a `converter`, to convert the value
// from one of those, to the color to be used. (A color of `null`, used in
// this example when the popup is hidden, means use the default color.)
popup.bind(
  "visibility",
  textfield,
  "backgroundColor",
  {
    converter : function(data, model, source, target) 
    {
      return data == "visible" ? "cyan" : null;
    }
  });