flex中的labelFunction（combox和dataGrid）

最新推荐文章于 2014-08-07 17:25:00 发布

macemers

最新推荐文章于 2014-08-07 17:25:00 发布

阅读量140

点赞数

文章标签： Flex XML HTML

本文介绍了在Flex中如何使用labelFunction来定制ComboBox和DataGrid的显示内容。通过实例展示了如何将对象属性组合成自定义的字符串显示，并提供了具体代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【转载】
Flex中，对于显示一个字段，只需要指定对应字段属性给labelField即可，当需要上述所需要的功能的时候就得做个转换了，在Flex的基于List的组件都有一个labelFunction方法能很简单指定所需要显示的内容。
如有这么一个例子，有一个对象他包含一个name和age，现在需要一个ComboBox显示为：“name,age”，下面看例子代码：


<?xml version="1.0" encoding="utf-8"?>    
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"   
     creationComplete="init()" backgroundColor="white">    
    <mx:Script>    
        <![CDATA[    

            [Bindable]    
            private var cbxDataProvider:Array;    

            private function init():void   
            {    
                cbxDataProvider = [    
                            {name:"kissjava", age:"100"},    
                            {name:"rocky", age:"88"},    
                            {name:"jiang", age:"99"}    
                ];    
            }    

            private function cbxDisplayFunction(data:Object):String    
            {    
                var label:String = "";    
                if(data.hasOwnProperty("name")){    
                    label += data.name + ",";    
                }    
                if(data.hasOwnProperty("age")){    
                    label += data.age;    
                }    

                return label;    
            }    
        ]]>    
    </mx:Script>    
    <mx:Text id="text" x="30" y="30" text="这是labelFunction的测试例子"/>    
    <mx:ComboBox id="cbx" labelFunction="cbxDisplayFunction"     
       dataProvider="{cbxDataProvider}"    x="30" y="60"/>    
</mx:Application>

在dataGrid中，稍有不一样，参数(item:Object, column:DataGridColumn)是必须的，如果有多列，item.xxx代表那一列，dataField的属性也是需要的。返回值是String。


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
  <mx:Script>
    <![CDATA[
      [Bindable]
      public var myDataProvider:Array = [  125000000.99,
                1700000000.01, 
                984561321483.56,
                0.99,
                5.75,
                31400000000.01];

      public function myLabelFunction(item:Object, column:DataGridColumn):String
      {
        var amount:String = item.toString(); //若有多列，这里需要item.xxx
        var dollars:String = amount.split(".")[0];
        var dollarDigitCount:Number = dollars.toString().length;

        var value:String;

        if (dollarDigitCount >= 7 && dollarDigitCount <= 9)
        {
          value = dollars.slice(0, -6) + " Million";
        }
        else if (dollarDigitCount >= 10 && dollarDigitCount <= 12)
        {        
          value = dollars.slice(0, -9) + " Billion";
        }
        else if (dollarDigitCount >= 13)
        {
          value = dollars.slice(0, -12) + " Trillion";
        }
        else
        {
          value = item.toString();
        }

        return "$" + value;
      }
    ]]>
  </mx:Script>

  <mx:DataGrid id="dg" dataProvider="{myDataProvider}" >
    <mx:columns>
      <mx:DataGridColumn headerText="Click To Sort" labelFunction="myLabelFunction"/>
<!-- 这里没有dataField是因为只有一列 -->
    </mx:columns>
  </mx:DataGrid>

  <mx:TextInput id="textInput" text="{dg.selectedItem}"/>

</mx:Application>