Flex4 学习笔记-comboBox 和 DataGrid组件的使用

 

下面讲介绍一下..ComboBox 和DataGrid 两种组件的使用.

这两种组件用的非常多.

 

ComboBox是下拉列表. 只需要通过dataProvider,属性绑定一个集合.

就能自动把集合中的数据,填充到ComboBox中.

 

DataGrid 是 数据表格. 也是通过.dataProvider绑定 集合对象..可以自动填充列.和自定义列.. DataGrid可以实现列拖动和列排序效果..

 

具体代码实现如下:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="application1_creationCompleteHandler(event)"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:VerticalLayout verticalAlign="middle" horizontalAlign="center"/>
	</s:layout>

	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.events.FlexEvent;
			
			[Bindable]
			private var comboBoxData:ArrayCollection = null;
			
			//单击事件;重新填充ComboBox下拉列表;
			protected function btn_clickHandler(event:MouseEvent):void
			{
				comboBoxData = new ArrayCollection([
					{label:"请选择"},
					{label:"Java"},
					{label:".NET"},
					{label:"C++"},
					{label:"SAP"}
				]);	
			}
			
			//绑定;
			[Bindable]
			private var dataGridData:ArrayCollection = new ArrayCollection([
				{id:"100",name:"张三",age:"23",sex:"男",address:"湖南省株洲市"},
				{id:"101",name:"李四",age:"20",sex:"女",address:"广东省深圳市"},
				{id:"102",name:"王五",age:"22",sex:"女",address:"江西省萍乡市"}
			]);
			
			
			//加载时触发的事件;
			protected function application1_creationCompleteHandler(event:FlexEvent):void
			{
				//实例化数据集合;
				comboBoxData = new ArrayCollection([
					{label:"请选择"},
					{label:"JavaScript"},
					{label:"VBScript"},
					{label:"ActionScript"}
				]);	
			}

		]]>
	</fx:Script>

	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<mx:DataGrid width="618" id="dataGridID" dataProvider="{dataGridData}" >
		 <mx:columns>
			 <!--headerText指定的是列名，dataField指定的是需要绑定列的字段-->
			<mx:DataGridColumn headerText="编号" dataField="id"/>
			<mx:DataGridColumn headerText="姓名" dataField="name"/>
			<mx:DataGridColumn headerText="年龄" dataField="age"/>
			<mx:DataGridColumn headerText="性别" dataField="sex"/>
			<mx:DataGridColumn headerText="地址" dataField="address"/>
		</mx:columns>
	</mx:DataGrid>
	
	<s:Button id="btn" click="btn_clickHandler(event)" label="填充ComboBox下拉列表"></s:Button>
	
	<s:ComboBox id="comboBox" selectedIndex="0" dataProvider="{comboBoxData}"></s:ComboBox>
	
	
</s:Application>

 

运行结果: