how to bind property of visibility of dropdown - qooxdoo

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