数据容器类ComboxBox 、DatGrid

comboBOX 下拉列表组件

具体创建时，首先先定义一个Data Provider ,然后通过dataProvider 属性设定即可。它还具有editable属性，可以设定是否允许用户键盘输入。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script>  </mx:Script> <mx:Panel x="200" y="58" width="478" height="231" layout="absolute" title="Combox example" fontSize="12"> <mx:ComboBox id="cbox1" x="10" y="25" dataProvider="{cards}" close="closeHandler(event);" /> <mx:ComboBox x="10" y="56" dataProvider="{cards2}" close="closeHandler(event);" /> <mx:VBox x="198" y="10" width="215" height="110"> <mx:Text text=" select a type of credit card" width="186" height="24" fontSize="12" color="#31A9C3"/> <mx:Label text="You selected:" width="197" height="24" id="mylable"/> <mx:Label text="Data:" width="113" height="23" id="mydata"/> </mx:VBox> </mx:Panel> </mx:Application>

效果如图所示：

DatGrid 是一种显示多列显示的列表组件。

代码如下：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:XMLList id="employees"> <employee> <name>sunny</name> <phone>136832918**</phone> <email>jingjing9061@163.com</email> <active>true</active> </employee> <employee> <name>lunay</name> <phone>158225186**</phone> <email>yuemingyifei@163.com</email> <active>true</active> </employee> <employee> <name>sky</name> <phone>136832*1**1</phone> <email>weilan614614@163.com</email> <active>true</active> </employee> <employee> <name>smalie</name> <phone>2551-57868</phone> <email>smalie@163.com</email> <active>true</active> </employee> </mx:XMLList> <mx:Panel x="90" y="43" width="591" height="399" layout="absolute" title="DataGrid example " fontSize="12"> <mx:DataGrid x="47" y="37" width="411" height="130" id="dg" rowCount="5" dataProvider="{employees}"> <mx:columns> <mx:DataGridColumn headerText="Name" dataField="name" /> <mx:DataGridColumn headerText="Phone" dataField="phone"/> <mx:DataGridColumn headerText="Email" dataField="email" /> </mx:columns> </mx:DataGrid> <mx:Form x="47" y="195" width="411" height="97"> <mx:FormItem width="267" height="21" label="Name"> <mx:Label text="{dg.selectedItem.name}" width="167" height="22"/> </mx:FormItem> <mx:FormItem width="271" height="28" label="Email"> <mx:Label text="{dg.selectedItem.email}" width="173" height="19"/> </mx:FormItem> <mx:FormItem width="267" height="22" label="Phone"> <mx:Label text="{dg.selectedItem.phone}" width="172" height="19"/> </mx:FormItem> </mx:Form> </mx:Panel> </mx:Application>

效果如图所示：