Disabling item highlight indicator in the MX List control in Flex 3

In a previous example, “Disabling item roll over highlighting in the Flex DataGrid control”, we saw how you could disable the item roll over highlight in the MX DataGrid control in Flex by setting the Boolean useRollOver style.

The following example shows how you can disable the highlight indicator in the MX List control in Flex 3 by subclassing the List control and overriding the protected drawHighlightIndicator() method.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/18/disabling-item-highlight-indicator-in-the-mx-list-control-in-flex-3/ -->
<mx:Application name="MX_List_drawHighlightIndicator_test"
                xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:comps="comps.*"
                layout="vertical"
                verticalAlign="middle"
                backgroundColor="white">
 
    <comps:NoHighlightList id="lst"
            dataProvider="[Red,Orange,Yellow,Green,Blue]"
            alternatingItemColors="[#FFFFFF,#EEEEEE]"
            textRollOverColor="red"
            rowCount="4" width="100" />
 
</mx:Application>

And the custom MX List control, comps/NoHighlightList.as, is as follows:

/** http://blog.flexexamples.com/2010/06/18/disabling-item-highlight-indicator-in-the-mx-list-control-in-flex-3/ */
package comps {
    import flash.display.Sprite;
    import mx.controls.List;
    import mx.controls.listClasses.IListItemRenderer;
 
    public class NoHighlightList extends List {
        public function NoHighlightList() {
            super();
        }
 
        override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
            // ignore
        }
    }
}

Or, if you want to create the custom List control using MXML instead of ActionScript, you could do the following:

 
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/18/disabling-item-highlight-indicator-in-the-mx-list-control-in-flex-3/ -->
<mx:List name="NoHighlightListMXML"
        xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.listClasses.IListItemRenderer;
 
            override protected function drawHighlightIndicator(indicator:Sprite, x:Number, y:Number, width:Number, height:Number, color:uint, itemRenderer:IListItemRenderer):void {
                // ignore
            }
        ]]>
    </mx:Script>
 
</mx:List>

2 thoughts on “Disabling item highlight indicator in the MX List control in Flex 3

  1. Hi Sir,
    i have a problem with List Control please help me.
    Am developing Android mobile application for this am using Flash Builder 4.5 . in Mobile apps Adobe not give Grid View to present the data . that why am using List Control to present data . my problem is Am taking One Data Table from .net Webservice. how to assign that datat table to my List Control please help me
    am using Action Script to write the Coding .

Comments are closed.