Flex ComboBox和Datagrid组件用法指导-combobox控件用法

在学习Flex组建的过程中，你难免会遇到Flex ComboBox和datagrid的使用，Flex ComboBox的外表做出来了里面的数据怎么办呢？问题就出在这里了，这里向大家简单介绍一下。

Flex ComboBox和datagrid的使用

看完了Flex简略教程,由于是英文版的，所以有些地方还是没怎么明白。没办法只好自己慢慢试拉，今天把Flex ComboBox和DataGrid的使用方法研究了一下。为什么要选Flex ComboBox和DataGrid呢？像button这类东西说是在没什么好讲的大家都明白。Flex ComboBox的外表做出来了里面的数据怎么办呢？问题就出在这里了。(如果不知道什么是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>

不要害怕，重要的地方都用黑体标出来了。[bindable]是捆绑标记，这样数据就可以与部件进行动态交换数据。之后就是Flex ComboBox里选项的内容了，Array是属性声明，label是外面看到的选项，data就是真正的数据内容。上面例子中数据是图片的地址，图片放在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存储数据将来会在表格中显示出来.

<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>

这一段就把数据显示出来了也不是太难了，adobeFlex不提供傻瓜式输入，我们就得辛苦一点自己输入了。

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

【编辑推荐】