Flex中ComboBox和Datagrid组件如何使用

这篇文章将为大家详细讲解有关Flex中ComboBox和Datagrid组件如何使用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

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>

关于Flex中ComboBox和Datagrid组件如何使用就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。