Create combobox with non selectable separator

问题

I'd like to custom combobox. Indeed, I like to create a combox with two array separate by a line like that.

The line between All and above 40 must no selectable.

Do you know how to do that?

Thanks for helping

回答1:

Let's say we have a ComboBox with a model like this:

<s:ComboBox>
    <s:ArrayList>
        <fx:String>A</fx:String>
        <fx:Object />
        <fx:String>B</fx:String>
    </s:ArrayList>
</s:ComboBox>

The Strings are our regular elements and the Object represents the separator. I'm simplifying things here, but you should be able to translate this to your specific situation.

Now we want to assign a different ItemRenderer to each type of element. We can do this by means of the itemRendererFunction property.

<s:ComboBox itemRendererFunction="getItemRenderer">

private function getItemRenderer(item:*):IFactory {
    var renderer:Class = item is String ? DefaultItemRenderer : SeparatorItemRenderer
    return new ClassFactory(renderer);
}

Now lets create that SeparatorItemRenderer which will contain just a horizontal line and will have its enabled property set to false. This last part is very important because it will make the item non-selectable.

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                autoDrawBackground="false" enabled="false"
                height="10" disabledAlpha="1">

    <s:Line left="0" right="0" verticalCenter="0">
        <s:stroke>
            <s:SolidColorStroke color="0xdddddd" />
        </s:stroke>
    </s:Line>

</s:ItemRenderer>

And that should do it.

回答2:

With your help, I found a solution:

<?xml version="1.0" encoding="utf-8"?>

<s:ItemRenderer 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="{(data.separator==0)?true:false}"
                disabledAlpha="1"
                enabled="{(data.separator==0)?true:false}"
                mouseEnabled="{(data.separator==0)?true:false}"
                >

    <fx:Script>
        <![CDATA[
            import spark.components.supportClasses.ListBase;

        ]]>
    </fx:Script>
    <s:states>
        <s:State name="normal"/>
        <s:State name="down"/>
        <s:State name="hovered"/>
        <s:State name="selected"/>
        <s:State name="dragging"/>
        <s:State name="normalAndShowCaret"/>
        <s:State name="hoveredAndShowCaret"/>
        <s:State name="selectedAndShowCaret"/>
    </s:states>




    <s:Group top="2" left="2" right="2" bottom="2" width="100%" height="100%" >
        <s:Line width="100%" bottom="2" visible="{(data.separator==1)?true:false}" verticalCenter="0" >
            <s:stroke>
                <s:SolidColorStroke weight="2" caps="round"/>
            </s:stroke>
        </s:Line>

        <s:Label id="labelDisplay" verticalCenter="1" horizontalCenter="0" fontWeight="normal" color="#000000"
                 visible="{(data.separator==0)?true:false}" />
    </s:Group>

</s:ItemRenderer>

Thanks a lot

回答3:

Here's a solution that works in Flash without Flex in case anyone needs that (like I did). First create a new class file for a custom extension of CellRenderer:

package { 
    import fl.controls.listClasses.CellRenderer; 
    public class MyCustomCellRenderer extends CellRenderer
    {
        // override the data setter to set the enabled flag
        override public function set data(value:Object):void
        {
            super.data = value;    
            this.enabled = !(value['disabled']);
        }
    } 
}

Save it as MyCustomCellRenderer.as (or whatever you call it), then when you set up your ComboBox:

myComboBox.dropdown.setStyle("cellRenderer", MyCustomCellRenderer); 
myComboBox.dataProvider = new DataProvider();
myComboBox.dataProvider.addItem({label: "Normal Item"});
myComboBox.dataProvider.addItem({label: "Separator", disabled:true});

来源：https://stackoverflow.com/questions/10728530/create-combobox-with-non-selectable-separator