CODEWITHSUNDEEP
apache-flex
Adnan
Adnan

Reputation: 26350

Flex: Delete visual element

I have a VGroup in my application that contains several custom components of type MyComponent. Now I have a delete method in MyComponent that should once ran delete the element from the VGroup. I know I should use parentDocument.vgroupId.removeElement() but what to pass as a reference?

Note: I want to do the delete within a method from MyComponent

UPDATE: here is my source: In my main application

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

Now I add my custom component as:

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

And from MyComponent I call 

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

If I cast it as this as IVisualElement I get an error that it is equal to null

Upvotes: 1

Views: 4099

Answers (2)

user1749053
user1749053

Reputation: 101

<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>

Upvotes: 0

ocodo
ocodo

Reputation: 30258

This example will show how you can do it..

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>

Define MyComponent.mxml like this...

<?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>

Upvotes: 1

Related Questions