qooxdoo

how to bind property of visibility of dropdown


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

Solution

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