Tips on MenuBar control and its dataProvider in flex

Suppose we have a MenuBar and its dataPovider as below.

<mx:MenuBar id=”myMenu” dataProvider=”{xmlLst}” labelField=”@label” itemClick=”fnItemClick(event)” />

<mx:XMLList id=”xmlLst”>
        <root label=”year”>
            <menuitem label=”2001″ enabled=”true”/>
            <menuitem label=”2002″ enabled=”false”/>
            <menuitem label=”2003″ enabled=”true”/>
            <menuitem label=”2004″ enabled=”false”/>
            <menuitem label=”2005″ enabled=”true”/>
        </root>
</mx:XMLList>

and the itemClick handler below
private function fnItemClick(event:MenuEvent):void
{
//code goes here on itemClick
}
Desc: The MenuBar displays the XMLList dataProvider with all the years as menuitems[because labelField=”@label”], and has a handler for itemClick “fnItemClick”.

Now the tips..

1.To set enabled=true for the year 2002.
xmlLst.menuitem.(@label==”2002″).@enabled=true;
//this is like traversing the XMLList.
//this will reflect changes both to XMLList and MenuBar
2.To set for all enabled=true.
//here we got to traverse the XMLList and change the data.
for each(var xml:XML in xmlLst.menuitem)
{
 xml.@enabled=true; 
}
3.To set enabled=false for selected Item.
//in the itemClick handler use the below code
event.item.@enabled=false;

Things to remember:- while accessing attributes of XML we got to use ‘@’ before the attribute name, not neccessary if it is an Object.

Download code.

Note:- Examples or code you have seen on this blog so far are related to Flex 3 SDK.

Advertisements

4 Responses to Tips on MenuBar control and its dataProvider in flex

  1. […] Tips on MenuBar control and its dataProvider in flex « flex on blog – by kumar flexonblog.wordpress.com/2009/09/25/tips-on-menubar-control-and-its-dataprovider-in-flex – view page – cached — From the page […]

  2. Sam says:

    Can you change the enabled attributes without the root label??

  3. Amuthanjrv says:

    The tips and example code is really useful.

  4. Soumya Vinod says:

    Menubar can be also created in flex by another quick way and posted at http://bbso.wordpress.com/2012/02/22/flex-menubar/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: