Flex extending ComboBox

Question

I created a class CustomCombo.as that extends ComboBox. What is happening is that the CustomCombo combobox is showing as being editable. I do not want this and I cant find the properties to set the editable to false.

I also tried setting the combobox's textInput.editable control to false, but to no avail.

Any help would be greatly appreciated.

CustomCombo.as

package custom {

    import spark.components.ComboBox;

    public class CustomCombo extends ComboBox {

        public function CustomCombo() {
            super();
//          this.editable = false; //<-- THIS DOESNT WORK   ***Access of possibly undefined property editable through a reference with static type custom:CustomCombo
//          this.textInput.editable = false; //<-- THIS DOESNT WORK   ***Cannot access a property or method of a null object reference
        }
    }
}

Answer 1

I see that you're using spark and not mx. The editable property I referred to is applicable only to mx based list. In spark, ComboBox extends DropDownListBase and is editable by default.

The ComboBox control is a child class of the DropDownListBase control. Like the DropDownListBase control, when the user selects an item from the drop-down list in the ComboBox control, the data item appears in the prompt area of the control.

One difference between the controls is that the prompt area of the ComboBox control is implemented by using the TextInput control, instead of the Label control for the DropDownList control. Therefore, a user can edit the prompt area of the control to enter a value that is not one of the predefined options.

For example, the DropDownList control only lets the user select from a list of predefined items in the control. The ComboBox control lets the user either select a predefined item, or enter a new item into the prompt area. Your application can recognize that a new item has been entered and, optionally, add it to the list of items in the control.

The ComboBox control also searches the item list as the user enters characters into the prompt area. As the user enters characters, the drop-down area of the control opens. It then and scrolls to and highlights the closest match in the item list.

So ideally, you should be using DropDownList in this case.

You're getting null error when trying to access textInput from the constructor because it hasn't been created yet. In mx based controls (Flex-3), you can access it from the creationComplete handler; I'm not quite sure how to do it for spark based controls.

Update: I think I've figured out how to access skin parts in spark (though you might wanna use the DropDownBox instead). You have to override the partAdded method.

override protected function partAdded(partName:String, instance:Object):void
{
    super.partAdded(partName, instance);
    if (instance == textInput)
    {
        textInput.editable = false;
    }
}

There's one catch though: it may not work in this case. The source code of ComboBox.as says that

the API ignores the visual editable and selectable properties

So DropDownList it is!

---

Initial answer, posted for mx ComboBox.

This shouldn't happen as the default value of the editable property is false.

Try explicitly setting the value to false from the constructor.

public function CustomCombo() {
  super();
  this.editable = false;
}

Answer 2

After rummaging through the Flex 4 API I found that they suggest to use the DropDownList control. From what I can see is that they removed the editable property from the ComboBox control in Flex 4, but I may be wrong.

I implemented DropDownList and that solved my problem.