5/7/12

Colours in combobox dataprovider

Dear All,

I came across a post in the internet which i thought it will be useful for beginners. This post is about using item renderer in combo box and display the list items in different colur.

CustomCombobox.mxml  

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                layout="absolute"
                creationComplete="init();">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var popcmb:ArrayCollection=new ArrayCollection();

            private function init():void
            {
                popcmb.addItem({label: "Value1", data: 100});
                popcmb.addItem({label: "Value2", data: 200});
                popcmb.addItem({label: "Value3", data: 300});
                popcmb.addItem({label: "Value4", data: 400});
                popcmb.addItem({label: "Value5", data: 500});
            }
        ]]>
    </mx:Script>
    <mx:Panel x="180"
              y="79"
              width="533"
              height="305"
              layout="absolute"
              title="Custom ComboBox"
              borderColor="#70A7FA">
        <mx:ComboBox id="cmb"
                     x="152"
                     y="70"
                     width="150" dataProvider="{popcmb}"
                     height="30" itemRenderer="LabelComp">
        </mx:ComboBox>
    </mx:Panel>

</mx:Application>
------------------------------------------------------------------------------------------------
LabelComp.mxml 

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
    <mx:Label  text="{data.label}">
       
    </mx:Label>
    <mx:Script>
        <![CDATA[
            override public function set data(value:Object):void{
                super.data = value;
                if(value && value.data){
                    if(value.data<400){
                        setStyle("color","#FF0000");   
                    }
                    else{
                        setStyle("color","#00FF00");
                    }
                }
                else{
                    setStyle("color","#000000");   
                }
                    super.invalidateDisplayList();
            }
        ]]>
    </mx:Script>
</mx:HBox>

Courtesy : Internet

No comments:

Post a Comment

Popular Posts