etting a custom context menu on a Spark List control item

etting a custom context menu on a Spark List control item

Postby haretu » Tue Mar 29, 2011 10:22 am

he following example shows how you can set a custom context menu on a Spark List control item renderer in Flex 4 by setting the contextMenu property in the item renderer’s dataChange event.
Code: Select all
<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2010/05/06/setting-a-custom-context-menu-on-a-spark-list-control-item-renderer-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_contextMenu_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">

    <fx:Script>
        <![CDATA[
            import mx.utils.StringUtil;

            protected function lst_labelFunc(data:Object):String {
                return StringUtil.substitute("[{0}]\t{1}", data.symbol, data.name);
            }
        ]]>
    </fx:Script>

    <s:List id="lst"
            labelFunction="lst_labelFunc"
            itemRenderer="skins.CustomColumnItemRen"
            width="250"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="justify"
                    requestedRowCount="5" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object symbol="ADBE" name="Adobe Systems Incorporated" price="32.49" isNew="true" />
                <fx:Object symbol="AAPL" name="Apple Inc." price="246.25" isNew="false" />
                <fx:Object symbol="GOOG" name="Google Inc." price="498.67" isNew="true" />
                <fx:Object symbol="HPQ" name="Hewlett-Packard Company" price="48.33" isNew="false" />
                <fx:Object symbol="IBM" name="International Business Machines Corp." price="123.92" isNew="false" />
                <fx:Object symbol="NVDA" name="NVIDIA Corporation" price="14.20" isNew="true" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>

</s:Application>


And the custom Spark List control item renderer, skins/CustomColumnItemRen.mxml, is as follows:
Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/06/setting-a-custom-context-menu-on-a-spark-list-control-item-renderer-in-flex-4/ -->
<s:ItemRenderer name="CustomColumnItemRen"
        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"
        dataChange="dataChangeHandler(event);">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
    <s:layout>
        <s:HorizontalLayout gap="0"
                paddingLeft="3" paddingRight="3"
                paddingTop="3" paddingBottom="3"
                verticalAlign="middle" />
    </s:layout>

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.formatters.CurrencyFormatter;

            [Embed("assets/bullet_star.png")]
            protected const ICON:Class;

            protected function dataChangeHandler(evt:Event):void {
                const currFmt:CurrencyFormatter = new CurrencyFormatter();
                currFmt.precision = 2;

                priceTxt.text = currFmt.format(data.price);
                if (data.isNew) {
                    bmpImg.source = ICON;
                }

                // Create custom context menu.
                const cmi:ContextMenuItem = new ContextMenuItem("Copy quote");
                cmi.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, cmi_menuItemSelect);

                const cm:ContextMenu = new ContextMenu();
                cm.hideBuiltInItems();
                cm.customItems = [cmi];

                contextMenu = cm;
            }

            protected function cmi_menuItemSelect(evt:ContextMenuEvent):void {
                System.setClipboard(labelDisplay.text + "\t" + priceTxt.text);
            }
        ]]>
    </fx:Script>

    <s:Label id="labelDisplay" maxDisplayedLines="1" showTruncationTip="true" width="100%" />
    <s:Label id="priceTxt" textAlign="right" fontWeight="bold" />
    <s:BitmapImage id="bmpImg" width="16" height="16" />

</s:ItemRenderer>
Attachments
Screen shot 2011-03-29 at 10.20.51 AM.png
Screen shot 2011-03-29 at 10.20.51 AM.png (38.26 KiB) Viewed 791 times
haretu
 
Posts: 132
Joined: Sat Jan 08, 2011 9:56 pm

Return to Adobe FLEX Flash

Who is online

Users browsing this forum: No registered users and 1 guest

cron