Flex Examples » removeItemAt() http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Adding a delete button in the hovered state of a Spark List control item renderer in Flex 4 http://blog.flexexamples.com/2010/04/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/ http://blog.flexexamples.com/2010/04/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/#comments Fri, 09 Apr 2010 23:10:34 +0000 Peter deHaan http://blog.flexexamples.com/?p=2718 The following example shows how you can add a delete button to the hovered state of a Spark List control item renderer in Flex 4 by creating a custom item renderer and listening for the mouseDown event.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/04/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/ --> <s:Application name="Spark_List_itemRenderer_hovered_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx">   <s:List id="lst" itemRenderer="skins.CustomItemRen" width="300" horizontalCenter="0" [...]]]> The following example shows how you can add a delete button to the hovered state of a Spark List control item renderer in Flex 4 by creating a custom item renderer and listening for the mouseDown event.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_hovered_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
 
    <s:List id="lst"
            itemRenderer="skins.CustomItemRen"
            width="300"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="justify"
                    requestedRowCount="8" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object label="Application" />
                <fx:Object label="BorderContainer" />
                <fx:Object label="Button" />
                <fx:Object label="ButtonBar" />
                <fx:Object label="CheckBox" />
                <fx:Object label="ComboBox" />
                <fx:Object label="DataGroup" />
                <fx:Object label="DataRenderer" />
                <fx:Object label="DropDownList" />
                <fx:Object label="Group" />
                <fx:Object label="HGroup" />
                <fx:Object label="HScrollBar" />
                <fx:Object label="HSlider" />
                <fx:Object label="Label" />
                <fx:Object label="List" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the custom Spark List item renderer, skins/CustomItemRen.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/ -->
<s:ItemRenderer name="CustomItemRen"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx" 
        autoDrawBackground="true"
        minHeight="24">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.CloseEvent;
 
            import spark.components.List;
 
            protected function button1_clickHandler(evt:MouseEvent):void {
                Alert.show(data.label,
                        "Are you sure you want to delete this item?",
                        Alert.YES|Alert.CANCEL,
                        null,
                        alrt_closeHandler);
            }
 
            protected function alrt_closeHandler(evt:CloseEvent):void {
                switch (evt.detail) {
                    case Alert.YES:
                    case Alert.OK:
                        Object(owner).dataProvider.removeItemAt(itemIndex);
                        break;
                    case Alert.CANCEL:
                    case Alert.NO:
                        Object(owner).selectedIndex = -1;
                        break;
                    default:
                        break;
                }
            }
        ]]>
    </fx:Script>
 
    <s:HGroup width="100%" height="100%"
            verticalAlign="middle"
            paddingLeft="2" paddingRight="2"
            paddingTop="2" paddingBottom="2">
        <s:Label id="lbl" text="{data.label}" width="100%" />
        <s:Button id="btn"
                accentColor="red" emphasized="true"
                includeIn="hovered"
                width="12" height="12"
                mouseDown="button1_clickHandler(event);" />
    </s:HGroup>
 
</s:ItemRenderer>

View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2010/04/09/adding-a-delete-button-in-the-hovered-state-of-a-spark-list-control-item-renderer-in-flex-4/feed/ 6 Removing items from a Flex DataGrid control using the DragManager class http://blog.flexexamples.com/2008/04/16/removing-items-from-a-flex-datagrid-control-using-the-dragmanager-class/ http://blog.flexexamples.com/2008/04/16/removing-items-from-a-flex-datagrid-control-using-the-dragmanager-class/#comments Thu, 17 Apr 2008 03:51:52 +0000 Peter deHaan http://blog.flexexamples.com/2008/04/16/removing-items-from-a-flex-datagrid-control-using-the-dragmanager-class/ The following example shows how you can drag an item from a Flex DataGrid control onto an Image control to remove the item from a data provider.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/04/16/removing-items-from-a-flex-datagrid-control-using-the-dragmanager-class/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.core.IUIComponent; import mx.events.DragEvent; import [...]]]> The following example shows how you can drag an item from a Flex DataGrid control onto an Image control to remove the item from a data provider.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/04/16/removing-items-from-a-flex-datagrid-control-using-the-dragmanager-class/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.core.IUIComponent;
            import mx.events.DragEvent;
            import mx.managers.DragManager;

            private function image_dragEnter(evt:DragEvent):void {
                var obj:IUIComponent = IUIComponent(evt.currentTarget);
                DragManager.acceptDragDrop(obj);
            }

            private function image_dragDrop(evt:DragEvent):void {
                var item:Object = dataGrid.selectedItem;
                var idx:int = arrColl.getItemIndex(item);
                arrColl.removeItemAt(idx);
            }
        ]]>
    </mx:Script>

    <mx:ArrayCollection id="arrColl">
        <mx:source>
            <mx:Array>
                <mx:Object c1="r1.c1" c2="r1.c2" c3="r1.c3" c4="r1.c4"/>
                <mx:Object c1="r2.c1" c2="r2.c2" c3="r2.c3" c4="r2.c4"/>
                <mx:Object c1="r3.c1" c2="r3.c2" c3="r3.c3" c4="r3.c4"/>
                <mx:Object c1="r4.c1" c2="r4.c2" c3="r4.c3" c4="r4.c4"/>
                <mx:Object c1="r5.c1" c2="r5.c2" c3="r5.c3" c4="r5.c4"/>
                <mx:Object c1="r6.c1" c2="r6.c2" c3="r6.c3" c4="r6.c4"/>
                <mx:Object c1="r7.c1" c2="r7.c2" c3="r7.c3" c4="r7.c4"/>
                <mx:Object c1="r8.c1" c2="r8.c2" c3="r8.c3" c4="r8.c4"/>
                <mx:Object c1="r9.c1" c2="r9.c2" c3="r9.c3" c4="r9.c4"/>
            </mx:Array>
        </mx:source>
    </mx:ArrayCollection>

    <mx:Panel title="Drag DataGrid item over the trash icon to remove item"
            styleName="opaquePanel">
        <mx:DataGrid id="dataGrid"
                dataProvider="{arrColl}"
                dragEnabled="true"
                width="400"
                rowCount="6"
                verticalScrollPolicy="on">
            <mx:columns>
                <mx:DataGridColumn dataField="c1"
                        headerText="Column 1" />
                <mx:DataGridColumn dataField="c2"
                        headerText="Column 2" />
                <mx:DataGridColumn dataField="c3"
                        headerText="Column 3" />
                <mx:DataGridColumn dataField="c4"
                        headerText="Column 4" />
            </mx:columns>
        </mx:DataGrid>

        <mx:ControlBar horizontalAlign="right">
            <mx:Image id="image"
                    source="@Embed('assets/iconUninstall.png')"
                    dragDrop="image_dragDrop(event);"
                    dragEnter="image_dragEnter(event);" />
        </mx:ControlBar>
    </mx:Panel>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/04/16/removing-items-from-a-flex-datagrid-control-using-the-dragmanager-class/feed/ 12