Wednesday, April 15, 2009

Creating a custom context menu

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
    <mx:DataGrid x="231" y="45" id="sampleGrid" dataProvider="{sampleXML.person}">
        <mx:columns>
            <mx:DataGridColumn headerText="Name" dataField="name"/>
            <mx:DataGridColumn headerText="Age" dataField="age"/>
        </mx:columns>
    </mx:DataGrid>
    <!--This is the XML used as the data provider for the data grid-->
    <mx:XML xmlns="" id="sampleXML" format="e4x">
        <people>
            <person>
                <name>John</name>
                <age>20</age>
            </person>
            <person>
                <name>Sean</name>
                <age>22</age>
            </person>
            <person>
                <name>Max</name>
                <age>25</age>
            </person>
        </people>        
    </mx:XML>
    <!--This is the XML used for the context menu-->
    <mx:XML format="e4x" id="menuData">
        <root>
            <menuitem label="Menu Item 1"/>
            <menuitem label="Menu Item 2"/>
         </root>
    </mx:XML>
    <mx:Script>
        <![CDATA[
            import mx.controls.FlexNativeMenu;
            import mx.events.FlexNativeMenuEvent;
            import mx.controls.Alert;
            private var dgContextMenu:FlexNativeMenu;
            public function initApp():void
            {
                dgContextMenu=new FlexNativeMenu();
                createContextMenu();
            }
            private function createContextMenu():void
            {
                dgContextMenu.dataProvider=menuData;
                dgContextMenu.labelField="@label";
                dgContextMenu.showRoot=false;
                dgContextMenu.setContextMenu(sampleGrid);
                dgContextMenu.addEventListener(FlexNativeMenuEvent.ITEM_CLICK,onItemClick);
            }
            private function onItemClick(e:FlexNativeMenuEvent):void
            {
                switch(e.index)
                {
                    case 0:
                            Alert.show("You clicked Menu Item 1");        
                            break;
                    case 1:
                            Alert.show("You clicked Menu Item 2");        
                            break;    
                }
            }
        ]]>
    </mx:Script>    
</mx:WindowedApplication>

No comments:

Post a Comment