Hiding nested controls in a Flex RichTextEditor control

The following example shows you how you can toggle the RichTextEditor control’s nested link text input by setting both the visible and includeInLayout properties of the control.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/23/hiding-nested-controls-in-a-flex-richtexteditor-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.TextInput;

            private function toggle_linkTextInput():void {
                var textInput:TextInput = richTextEditor.linkTextInput;
                var isSelected:Boolean = checkBox.selected;
                textInput.visible = isSelected;
                textInput.includeInLayout = isSelected;
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="RichTextEditor linkTextInput visible:"
                labelPlacement="left"
                selected="true"
                change="toggle_linkTextInput();" />
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>

View source is enabled in the following example.

Tagged as: includeInLayout, linkTextInput, visible