Flex ComboBox和Datagrid組件用法指導(dǎo)

作者：xhinker 2010-07-27 13:53:15

開發(fā) 后端

Flex組件有很多值得學(xué)習(xí)的地方，本文向大家介紹一下Flex組件中Flex ComboBox和datagrid的使用，希望本文的介紹能讓你有所收獲。

在學(xué)習(xí)Flex組建的過程中，你難免會遇到Flex ComboBox和datagrid的使用，F(xiàn)lex ComboBox的外表做出來了里面的數(shù)據(jù)怎么辦呢？問題就出在這里了，這里向大家簡單介紹一下。

Flex ComboBox和datagrid的使用

看完了Flex簡略教程,由于是英文版的，所以有些地方還是沒怎么明白。沒辦法只好自己慢慢試?yán)裉彀袴lex ComboBox和DataGrid的使用方法研究了一下。為什么要選Flex ComboBox和DataGrid呢？像button這類東西說是在沒什么好講的大家都明白。Flex ComboBox的外表做出來了里面的數(shù)據(jù)怎么辦呢？問題就出在這里了。(如果不知道什么是Flex的話，看一下Flex入門或許會有些幫助)

所謂Flex ComboBox就是下拉菜單了1234(在博客里搞出這東西也不容易啊,代碼在下面附上)
先給出一段代碼:

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="[url]http://www.adobe.com/2006/mxml[/url]"layout="absolute"> 
<mx:Script> 
<![CDATA[  
[Bindable]  
publicvarcards:Array=[{label:"xhinker1",data:"1.jpg"},  
{label:"xhinker2",data:"2.jpg"},{label:"xhinker3",data:"3.jpg"}];  
 
[Bindable]  
publicvarselectedItem1:Object;  
[Bindable]  
publicvarselectedItem2:Object;  
]]> 
</mx:Script> 
<mx:Flex ComboBoxxmx:Flex ComboBoxx="10"y="10"dataProvider="{cards}"width="150"  
close="selectedItem2=Flex ComboBox(event.target).selectedItem"> 
</mx:ComboBox> 
<mx:HBoxxmx:HBoxx="168"y="10"width="368"> 
<mx:Labeltextmx:Labeltext="Youselected:{selectedItem2.label}"/> 
<mx:Labeltextmx:Labeltext="Data:{selectedItem2.data}"width="168"/> 
</mx:HBox> 
</mx:Application>

不要害怕，重要的地方都用黑體標(biāo)出來了。[bindable]是捆綁標(biāo)記，這樣數(shù)據(jù)就可以與部件進(jìn)行動態(tài)交換數(shù)據(jù)。之后就是Flex ComboBox里選項的內(nèi)容了，Array是屬性聲明，label是外面看到的選項，data就是真正的數(shù)據(jù)內(nèi)容。上面例子中數(shù)據(jù)是圖片的地址，圖片放在bin文件下。第二段黑體就是真正的Flex ComboBox了。下面一段可有可無，用來檢驗的。注意紅色的部分這些是需要自己聲明的。

下面講DataGrid,首先把代碼全部給出來：

<mx:XMLListidmx:XMLListid="employees"> 
<employee> 
<name>xhinker1</name> 
<phone>555-219-2270</phone> 
<email>ccoenraets@fictitious.com</email> 
<active>true</active> 
</employee> 
<employee> 
<name>xhinker2</name> 
<phone>555-219-2012</phone> 
<email>jwall@fictitious.com</email> 
<active>true</active> 
</employee> 
<employee> 
<name>xhinker3</name> 
<phone>555-219-2012</phone> 
<email>maurice@fictitious.com</email> 
<active>false</active> 
</employee> 
<employee> 
<name>xhinker4</name> 
<phone>555-219-2000</phone> 
<email>mjones@fictitious.com</email> 
<active>true</active> 
</employee> 
</mx:XMLList>

這里是用xml存儲數(shù)據(jù)將來會在表格中顯示出來.

<mx:DataGrididmx:DataGridid="dg"rowCount="4"dataProvider="{employees}"enabled="true"> 
<mx:columns> 
<mx:DataGridColumndataFieldmx:DataGridColumndataField="name"headerText="Name"/> 
<mx:DataGridColumndataFieldmx:DataGridColumndataField="phone"headerText="Phone"/> 
<mx:DataGridColumndataFieldmx:DataGridColumndataField="email"headerText="Email"/> 
</mx:columns> 
</mx:DataGrid>

這一段就把數(shù)據(jù)顯示出來了也不是太難了，adobeFlex不提供傻瓜式輸入，我們就得辛苦一點(diǎn)自己輸入了。

下拉菜單的博客代碼<SELECTsize=1name=select><OPTIONselected>1</OPTION><OPTION>2</OPTION><OPTION>3</OPTION><OPTION>4</OPTION></SELECT>

【編輯推薦】

解析Flex4的十大變化
Flex3到Flex4的轉(zhuǎn)變新特性值得關(guān)注
解析對AdobeFlex的十大誤解
FlexBuilder3.0與Eclipse3.4的***結(jié)合
學(xué)習(xí)Flex時必須要知道的10件事情

責(zé)任編輯：佚名來源： 51cto.com

Flex ComboBox