Flex: удалить визуальный элемент

Question

В моем приложении VGroup, который содержит несколько пользовательских компонентов типа MyComponent.Теперь у меня есть метод удаления в MyComponent, который должен был однажды выполнить удаление элемента из VGroup.Я знаю, что должен использовать parentDocument.vgroupId.removeElement(), но что передать в качестве ссылки?

Примечание. Я хочу выполнить удаление в методе из MyComponent

ОБНОВЛЕНИЕ : вот мой источник: в моем основном приложении

<s:VGroup id="vgroupId" width="100%" height="100%" />

Теперь я добавляю свой пользовательский компонент как:

 var cust:FunctionElement = new MyComponent(); // MyComponent extends spark Panel
 vgroupId.addElement(cust);

И из MyComponent я звоню

parentDocument.vgroupId.removeElement(this) // get this error => TypeError: Error #1034: Type Coercion failed: cannot convert global@5ed30d1 to mx.core.IVisualElement.

Если я приведу его как this as IVisualElement, я получаю ошибкуравно null

Answer 1

Этот пример покажет, как вы можете это сделать ..

ExampleApp.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">     
    <fx:Script>
        <![CDATA[
            protected function button1_mouseUpHandler(event:MouseEvent):void
            {
                vgroup.addElement(new MyComponent());
            }
        ]]>
    </fx:Script>
    <s:VGroup id="vgroup" top="30" />
    <s:Button label="Add" mouseUp="button1_mouseUpHandler(event)"/>
</s:Application>

Определите MyComponent.mxml следующим образом ...

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/mx" width="100" height="35">
    <fx:Script>
        <![CDATA[
            import spark.components.VGroup;
            protected function button1_mouseUpHandler(event:MouseEvent):void
            {
                // A few useful traces to see what's what and where.
                trace(this);
                trace(this.parent);
                trace((this.parent as VGroup).getElementIndex(this));
                // But all we actually need is ...
                var vgroup:VGroup = (this.parent as VGroup);
                vgroup.removeElement(this);
                // (this.parent as VGroup).removeElement(this); // Would also work fine.
            }
        ]]>
    </fx:Script>
    <s:Button mouseUp="button1_mouseUpHandler(event)" label="Kill me!"/>
</s:Group>

Answer 2

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:s="library://ns.adobe.com/flex/spark">
    <mx:Script>

            import mx.core.IVisualElement;
            import spark.components.Button;

            private function getNewElement():IVisualElement
            {
                var btn:spark.components.Button = new spark.components.Button();
                btn.label = "button " + myContent.numElements;
                return btn;
            }

            private function addFirstElement():void
            {
                myContent.addElementAt( getNewElement(), 0 );
            }

            private function removeFirstElement():void
            {
                if( myContent.numElements > 0 )
                    myContent.removeElement( myContent.getElementAt( 0 ) );
            }

            private function removeLastElement():void
            {
                if( myContent.numElements > 0 )
                    myContent.removeElementAt( myContent.numElements - 1 );
            }


    </mx:Script>


    <mx:Button label="addFirst" click="addFirstElement();" />
    <mx:Button label="removeFirst" click="removeFirstElement()" />
    <mx:Button label="removeLast" click="removeLastElement()" />
    <mx:Button label="removeAll" click="myContent.removeAllElements()" />

    <mx:VBox id="myContent">
    </mx:VBox>

</mx:Application>