Flex 3 - Issues with textArea "editable" property

Question

Hello Community!

I'm having issues with the property "editable" of textArea control.

I have a component: OrderView.mxml and it's associated data class OrderViewData.as.

Orderview.mxml is inside a viewStack to enable navigation from a component to another. In this particular case, OrderView.mxml is called by another component: SearchResult.mxml. I can thus navigate from SearchResult.mxml to OrderView.mxml, and back to SearchResult.mxml...

OrderView.mxml has textArea and textInput control, that have to be editable or nonEditable depending on the property var isEditable:Boolean from OrderViewData.as.

When the application is launched, isEditable = true. So, all textInput and textArea controls are editable the first time the user gets to OrderView.mxml. When the user clicks on the button order from OrderView.mxml, isEditable = false. When the user goes back to SearchResult.mxml, isEditable = true (again) --> Until here, everything works fine.

The thing is: when the user goes back to OrderView.mxml for the second time (and beyond), even if the property isEditable = true, textArea controls are still non editable... But the textInput controls are editable!

Here is some code for your comprehension: OrderView.mxml

<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" 
    backgroundColor="#F3EDEC">

    <mx:TextArea 
        id="contentTA"
        text="{OrderViewData.instance.contentTA}"
        enabled="{OrderViewData.instance.isEnabled}" 
        width="100%" height="51" 
        maxChars="18" styleName="ORTextInput"
        focusIn="if(OrderViewData.instance.isEditable) contentTA.setSelection(0, contentTA.length)"
        editable="{OrderViewData.instance.isEditable}"/>

    <mx:TextInput id="contentTI" 
        text="{OrderViewData.instance.contentTI}"
        width="40" height="18" maxChars="4" 
        styleName="ORTextInput"
        change="contentTI_change()"
        focusIn="if(OrderViewData.instance.isEditable) contentTI.setSelection(0, contentTI.length)"
        editable="{OrderViewData.instance.isEditable}"/>
</mx:Canvas>

Am I missing something? Thanks for any help you can provide.

Regards. BS_C3

Answer 1

Did you make your isEditable variable [Bindable]?

Answer 2

Well, looks like anybody has more ideas...

I came up with a not really clean solution. But it works...

I used a init function in the show event of the component, where I create the control and add it to the proper parent. Thus, the mxml code written before has been deleted =)

This init function looks like this:

private function init():void
{
    // contentTA
    if(contentTA != null && parentBox.contains(contentTA))
        parentBox.removeChild(contentTA);

    contentTA = new TextArea;

    contentTA.text = OrderViewData.instance.contentTA;
    contentTA.enabled = OrderViewData.instance.isEnabled;
    contentTA.percentWidth = 100;
    contentTA.height = 51;
    contentTA.maxChars = 50;
    contentTA.styleName = "ORTextInput";
    contentTA.editable = OrderViewData.instance.isEditable;
    contentTA.addEventListener(FocusEvent.FOCUS_IN, focusIn);

    parentBox.addChild(contentTA);

    // same thing for all the other textAreas of my component       
    ...
}