在我分享的一篇文章中,讲解了几种关于做DataProvider的途径,但是最近没事又仔细的了解了一下。发现这其中还有好多变化之处。
下面就讲拿用数组作为数据提供器来详细解析一下:
举个最简单的例子:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/DataProviderArray/index.html"
width="150" height="140"
>
<mx:Script>
<![CDATA[
[Bindable]
public var cards:Array = ["Visa", "MasterCard", "American Express"];
]]>
</mx:Script>
<mx:ComboBox id="statesCombo" dataProvider="{cards}"/>
</mx:Application>
这很简单吧。选择下拉框,弹出三个选项。
如果改成这样呢?
<fx:Script>
<![CDATA[
[Bindable]
public var cards:Array=
[
{label:"Visa",data:1},
{label:"MasterCard",data:2},
{label:"American Express",data:3}
];
private function closeHandler(event:Event):void {
myLabel.text = "You selected: " + ComboBox(event.target).selectedItem.label;
myData.text = "Data: " + ComboBox(event.target).selectedItem.data;
}
]]>
</fx:Script>
<mx:Panel title="ComboBox Control Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:ComboBox width="150" close="closeHandler(event);" dataProvider="{cards}">
</mx:ComboBox>
<mx:VBox width="250">
<mx:Text width="200" color="blue" text="Select a type of credit card."/>
<mx:Label id="myLabel" text="You selected:"/>
<mx:Label id="myData" text="Data:"/>
</mx:VBox>
</mx:Panel>
我们只看关键代码,发现还是一样能运行,这是怎么回事呢,查一下官方文档才知道,
是这么说的:dataProvider
Array 中项目的字段名,将在 TextInput 部分和下拉列表中显示为标签。默认情况下,该控件会使用每个 Array 对象的 label
的属性,并显示该属性。 恍然大悟。。。原来它会自动匹配上这个属性。其实这种写法是正规的,一开始那种不太规范。
如果我们把其中的label全该为别的名的话,比如labelfoo,在运行的话,发现关联不上了。这时我们怎么办呢,我们难道不能随便写这个名字吗?官方文档还说了下句话:但是,如果 dataProvider
项目不包含 label
属性,则可以设置 labelField
属性以使用其它属性。
God!人家都已经说的很明白了。
这是我们可以这样,
<fx:Script>
<![CDATA[
[Bindable]
public var cards:Array =
[
{labelfoo:"Visa",data:1},
{labelfoo:"MasterCard",data:2},
{labelfoo:"American Express",data:3}
];
private function closeHandler(event:Event):void {
myLabel.text = "You selected: " + ComboBox(event.target).selectedItem.labelfoo;//???????????
myData.text = "Data: " + ComboBox(event.target).selectedItem.data;//????????????
}
]]>
</fx:Script>
<mx:Panel title="ComboBox Control Example"
height="75%" width="75%" layout="horizontal"
paddingTop="10" paddingBottom="10" paddingLeft="10" paddingRight="10">
<mx:ComboBox width="150"
close="closeHandler(event);" dataProvider="{cards}">
<mx:labelField>labelfoo</mx:labelField>//这样就可以随意匹配了。
</mx:ComboBox>
<mx:VBox width="250">
<mx:Text width="200" color="blue" text="Select a type of credit card."/>
<mx:Label id="myLabel" text="You selected:"/>
<mx:Label id="myData" text="Data:"/>
</mx:VBox>
</mx:Panel>
问题又来了:现在我们遇到这样的问题:通过上面的方法,我们只能用到它其中的一个属性。那如果我们有这么个数组private var myDP:Array= [{id:1,fName:"Lucky", lName:"Luke"}, {id:2, fName:"Bart", lName:"Simpson"}]; 现在想在下拉别表框显示
fName和IName这两个属性的拼接,也就是每个下拉列表显示Lucky Luke和Bart Simpson,但是我们值能在<labelField>中只能写一个属性,这样就不能实现我们想的那样了,怎么办呢?
默认情况下,在Flex 中基于List 的控件都是使用dataProvider 中的元素的label 属性来做显 示。在一些情况中,无论如何,dataProvideer 中都没有label 属性存在,这些情况就需要你 来设定连接dataProvider 中的多个字段来实现一个显示值。这个labelFunction 属性允许用户 定义自己的方法来呼叫dataProvider 中每个元素,然后对于每个元素返回显示值。如下范例,
ComboBox 的labelFunction 属性包含了一个getFullName 函数的引用,这个函数连接了 dataProvider 中单个元素的fName 和lName 字段来返回一个全名的字串。
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="horizontal">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var myDP:ArrayCollection = new ArrayCollection([
{id:1,fName:"Lucky", lName:"Luke"},
{id:2, fName:"Bart", lName:"Simpson"}]);
private function getFullName(item:Object):String{
return item.fName + " " + item.lName;
}
<mx:ComboBox dataProvider="{myDP}"
labelFunction="getFullName"/>
]]>
</mx:Script>
</mx:Application>
这个问题解决了,还有个问题,
ComboBox(event.target).selectedItem.labelfoo和
ComboBox(event.target).selectedItem.data这两句是什么意思?如果用Flex Buider的话打点儿只能点到selectedItem这,再点也没有labelfoo和data这两个属性,后来观察这两个字段不正是 数组里中的 每个对象的两个属性嘛。又是查了文档才知道:
selectedItem属性包含对 dataProvider
中所选项目的引用。如果该数据是一个对象或类实例,则修改该对象或实例中的属性会修改dataProvider
,其视图也会随之更改。
哦,原来鱼刺!