Flex ComboBox和Datagrid组件用法指导

开发 后端
Flex组件有很多值得学习的地方,本文向大家介绍一下Flex组件中Flex ComboBox和datagrid的使用,希望本文的介绍能让你有所收获。

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

Flex ComboBox和datagrid的使用

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

所谓Flex ComboBox就是下拉菜单了1234(在博客里搞出这东西也不容易啊,代码在下面附上)
先给出一段代码:
 

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

 不要害怕,重要的地方都用黑体标出来了。[bindable]是捆绑标记,这样数据就可以与部件进行动态交换数据。之后就是Flex ComboBox里选项的内容了,Array是属性声明,label是外面看到的选项,data就是真正的数据内容。上面例子中数据是图片的地址,图片放在bin文件下。第二段黑体就是真正的Flex ComboBox了。下面一段可有可无,用来检验的。注意红色的部分这些是需要自己声明的。

下面讲DataGrid,首先把代码全部给出来:
 

  1. <mx:XMLListidmx:XMLListid="employees"> 
  2. <employee> 
  3. <name>xhinker1</name> 
  4. <phone>555-219-2270</phone> 
  5. <email>ccoenraets@fictitious.com</email> 
  6. <active>true</active> 
  7. </employee> 
  8. <employee> 
  9. <name>xhinker2</name> 
  10. <phone>555-219-2012</phone> 
  11. <email>jwall@fictitious.com</email> 
  12. <active>true</active> 
  13. </employee> 
  14. <employee> 
  15. <name>xhinker3</name> 
  16. <phone>555-219-2012</phone> 
  17. <email>maurice@fictitious.com</email> 
  18. <active>false</active> 
  19. </employee> 
  20. <employee> 
  21. <name>xhinker4</name> 
  22. <phone>555-219-2000</phone> 
  23. <email>mjones@fictitious.com</email> 
  24. <active>true</active> 
  25. </employee> 
  26. </mx:XMLList> 

这里是用xml存储数据将来会在表格中显示出来.
 

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

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

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

【编辑推荐】

  1. 解析Flex4的十大变化
  2. Flex3到Flex4的转变新特性值得关注
  3. 解析对AdobeFlex的十大误解
  4. FlexBuilder3.0与Eclipse3.4的***结合
  5. 学习Flex时必须要知道的10件事情

 

 

责任编辑:佚名 来源: 51cto.com
相关推荐

2010-08-11 16:03:02

Flex DataGr

2010-08-05 10:08:06

Flex效果

2010-07-28 10:48:48

FlexReport开

2010-08-13 13:46:04

Flex效果组件

2010-08-11 15:11:52

Flex组合框

2010-07-27 15:28:02

Flex DataBi

2010-07-29 09:44:17

Flex编程

2010-07-30 10:02:40

Flex验证控件

2010-07-28 10:38:29

Flex开源框架

2010-08-11 16:10:27

Flex DataGr

2010-08-05 13:44:12

Flex布局

2010-08-05 09:05:14

Flex Button

2010-08-06 10:32:49

Flex数据类型

2010-08-13 09:21:12

FlexButton组件

2010-08-13 11:21:31

Flex渲染器

2010-08-13 09:11:11

LabelFlex

2010-08-05 10:16:14

Flex效果

2010-07-27 14:44:23

Flex Array

2010-07-28 09:29:36

Flex DataGr

2010-08-10 14:25:42

SilkTestFlex
点赞
收藏

51CTO技术栈公众号