flex中的labelFunction(combox和dataGrid)
flex中的labelFunction(combox和dataGrid) FlexXMLHTML.【转载】
Flex中,对于显示一个字段,只需要指定对应字段属性给labelField即可,当需要上述所需要的功能的时候就得做个转换了,在Flex的基于List的组件都有一个labelFunction方法能很简单指定所需要显示的内容。
如有这么一个例子,有一个对象他包含一个name和age,现在需要一个ComboBox显示为:“name,age”,下面看例子代码:
Java代码
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
3. creationComplete="init()" backgroundColor="white">
4. <mx:Script>
5. <![CDATA[
6.
7. [Bindable]
8. private var cbxDataProvider:Array;
9.
10. private function init():void
11. {
12. cbxDataProvider = [
13. {name:"kissjava", age:"100"},
14. {name:"rocky", age:"88"},
15. {name:"jiang", age:"99"}
16. ];
17. }
18.
19. private function cbxDisplayFunction(data:Object):String
20. {
21. var label:String = "";
22. if(data.hasOwnProperty("name")){
23. label += data.name + ",";
24. }
25. if(data.hasOwnProperty("age")){
26. label += data.age;
27. }
28.
29. return label;
30. }
31. ]]>
32. </mx:Script>
33. <mx:Text id="text" x="30" y="30" text="这是labelFunction的测试例子"/>
34. <mx:ComboBox id="cbx" labelFunction="cbxDisplayFunction"
35. dataProvider="{cbxDataProvider}" x="30" y="60"/>
36.</mx:Application>
<?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。
Java代码
1.<?xml version="1.0" encoding="utf-8"?>
2.<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
3. <mx:Script>
4. <![CDATA[
5. [Bindable]
6. public var myDataProvider:Array = [ 125000000.99,
7. 1700000000.01,
8. 984561321483.56,
9. 0.99,
10. 5.75,
11. 31400000000.01];
12.
13. public function myLabelFunction(item:Object, column:DataGridColumn):String
14. {
15. var amount:String = item.toString(); //若有多列,这里需要item.xxx
16. var dollars:String = amount.split(".")[0];
17. var dollarDigitCount:Number = dollars.toString().length;
18.
19. var value:String;
20.
21. if (dollarDigitCount >= 7 && dollarDigitCount <= 9)
22. {
23. value = dollars.slice(0, -6) + " Million";
24. }
25. else if (dollarDigitCount >= 10 && dollarDigitCount <= 12)
26. {
27. value = dollars.slice(0, -9) + " Billion";
28. }
29. else if (dollarDigitCount >= 13)
30. {
31. value = dollars.slice(0, -12) + " Trillion";
32. }
33. else
34. {
35. value = item.toString();
36. }
37.
38. return "$" + value;
39. }
40. ]]>
41. </mx:Script>
42.
43. <mx:DataGrid id="dg" dataProvider="{myDataProvider}" >
44. <mx:columns>
45. <mx:DataGridColumn headerText="Click To Sort" labelFunction="myLabelFunction"/>
46.<!-- 这里没有dataField是因为只有一列 -->
47. </mx:columns>
48. </mx:DataGrid>
49.
50. <mx:TextInput id="textInput" text="{dg.selectedItem}"/>
51.
52.</mx:Application>