是否可以在Flex DropDownList中指定单个字体?

时间:2011-02-08 18:14:58

标签: flex actionscript-3 drop-down-menu flex4

我刚刚实施了一个从此ComboCheck example获取的复选框的下拉列表,但使其扩展DropDownList而不是ComboBox,以提供我需要的更好的功能。我正在尝试创建一个DropDownList,其中某些项目是粗体和非复选框(或可以是复选框)而其他项目则不是。

我还没有在网上找到关于这样做的任何内容,并且一直试图解决这个问题。我目前正在使用ArrayCollection作为dataProvider,但我认为这可能是我的问题,我应该尝试在flex而不是AS3中设置标签。

有人知道这是否可行?如果是这样,他们是否有任何可能有助于我指向正确方向的链接?

感谢。

编辑:为itemRenderer添加了代码,这个工作我只需要指定我想要加粗的每个项目,尽管有更好的方法在flex代码中执行此操作而不是在渲染器中检查匹配的字符串?

public class ComboCheckItemRenderer extends ItemRenderer{  
    public var item:CheckBox;  

    public function ComboCheckItemRenderer(){
        super();
        item = new CheckBox();
        item.x = 5;
        addElement(item);
        item.addEventListener(MouseEvent.CLICK, onClick);
    }

    private var _data:Object;
    [Bindable]override public function set data (value:Object):void {
        if (value!=null) {
            _data = value;
            item.label = value.label;
            if(item.label == "item1"){
                item.setStyle("color","0x00ff00");
                item.setStyle("fontWeight","bold");
            }
            item.selected = value.selected;
        }
    }

Edit 2: What I am ultimately trying to do is create a dropdown of checkboxes with data that I obtain from blazeDS that basically has a bunch of group titles and their corresponding sub-elements. I am trying to have the dropdown make the groups be in bold and to the left, and their sub-elements normal font and offset to the right. I also need to know when they are clicked whether it was a group header or sub-element, so that I can add them to an object that I will be sending back to my service to perform a sql query on. ie.

[ ]**GROUP**  
   [ ] element
   [ ] element
[ ]**GROUP**  
   [ ] element

public class ComboCheckItemRenderer extends ItemRenderer{ public var item:CheckBox; public function ComboCheckItemRenderer(){ super(); item = new CheckBox(); item.x = 5; addElement(item); item.addEventListener(MouseEvent.CLICK, onClick); } private var _data:Object; [Bindable]override public function set data (value:Object):void { if (value!=null) { _data = value; item.label = value.label; if(item.label == "item1"){ item.setStyle("color","0x00ff00"); item.setStyle("fontWeight","bold"); } item.selected = value.selected; } }

1 个答案:

答案 0 :(得分:0)

您的数据是什么样的?你为什么不使用MXML呢?为什么要覆盖set data()而不是挂钩dataChange事件?你写的代码比你需要的更多。

让我们看一下更多" Flexy"办法。请注意我如何使用数据绑定来处理所有内容,并根据输入的数据有条件地设置fontWeight。任何更复杂的内容都应该归结为Script标记中的函数。

<?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="true">

    <fx:Script>
        <![CDATA[
            protected function onClick(event:MouseEvent):void {
            }
        ]]>
    </fx:Script>

    <s:CheckBox x="5" click="onClick(event)" 
                label="{data.label}" selected="@{data.selected}" 
                fontWeight="{data.label == 'item1' ? 'bold' : 'normal'}"/>


</s:ItemRenderer>

根据您在编辑中添加的问题,我会问:您使用的是什么标准?您可以在绑定表达式中放置任何函数,因此至少可以执行以下操作:

    <fx:Script>
    <![CDATA[
        private var itemsToBold:Array = ["label1", "label2"];

        private function getFontWeight(label):String {
            if(itemsToBold.indexOf(label) > 0)
                return "bold";

            return "normal";
        }

    ]]>
</fx:Script>

<s:CheckBox fontWeight="{getFontWeight(data.label)}"/>