Flex学习笔记_06 使用组件处理数据和交互_01常用组件（中）

Flex学习笔记_06 使用组件处理数据和交互_01常用组件（上）

Flex学习笔记_06 使用组件处理数据和交互_01常用组件（下）

 

 

1.8 DataGrid 组件 -- 制作图书选购列表

DataGrid组件的作用和HTML页面中的表格类似，将数据以行、列的格式显示出来。

 

每一纵列的宽度不定，用户可以在运行时调整宽度。

可在运行时调整列的顺序

点击列标题栏可对列数据进行排序

可以自定义每列的标题栏

和List组件一样，可以自定义每个单元格的itemRenderer

 

使用Model定义数据源，

columns 定义了所有的列，其中DataGridColumn 代表一列的信息，dataField的值不可省略，这个值必须是数据源中每条数据包含的属性名，否则无法显示。headerText 表示列标题。

rowCount 表示显示的行数，如果height没有设置，则用这个属性来技术高度。height=rowCount*rowHeight行高。

selectedItem 属性代表当前选中行的数据，可以在数据绑定中，当它的值发生变化时，使用该属性的任何物件都会自动更新。

 

接着我们利用itemRenderer 在DataGrid中加入复选框创建组件：

在组件中添加一个复选框。并添加change事件的方法addCart。

this.parentApplication 表示父Application，就是我们后面使用该组件的Application。

new cartEvent(data,cart_check.selected)

addCart 方法创建了一个自定义事件 cartEvent 事件，并且将必要的属性传到该事件，

然后通过 dispatchEvent 派发该事件。

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import bookEvent.cartEvent;
			internal function addCart():void{
				this.parentApplication.dispatchEvent(new cartEvent(data,cart_check.selected));
			}
		]]>
	</mx:Script>
	<mx:CheckBox id="cart_check" x="0" y="0" label="购买" change="addCart()"/>
</mx:Canvas>

以下为定义一个cartEvent 事件类：

所有的事件继承Event， 在构造函数中定义了两个参数：_data 和 _isAdd，创建事件的时候，将通过这两个参数将信息传入事件中。

super("AddBook") 调用父类Event 的构造函数，并把事件类型“AddBook”传递过去。只有调用了父类的构造函数，才能成为真正的事件对象。

package bookEvent
{
	import flash.events.Event;

	public class cartEvent extends Event{
		public var isAdd:Boolean;
		public var book:Object;
		function cartEvent(_data:Object,_isAdd:Boolean):void{
			isAdd = _isAdd;
			book = _data;
			
			super("AddBook");
		}
	}
}

 

接下来是主程序。

在程序初始化函数中，addEventListener("AddBook",AddHandler) 为当前对象添加了对AddBook事件的监听。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" fontSize="12" creationComplete="initApp()">
		<mx:Script>
			<![CDATA[
				import mx.events.DataGridEvent;
				import mx.events.DataGridEventReason
				import bookEvent.cartEvent;
				import view.*;
				
				internal function initApp():void{
					addEventListener("AddBook",AddHandler);
				}
				internal function AddHandler(evt:cartEvent):void{
					if(evt.isAdd){
						tip_txt.text = "你选择购买："+evt.book.name;
					}else{
						tip_txt.text = "你放弃购买："+evt.book.name;
					}
				}
				
				internal function checkInfo(evt:DataGridEvent):void{
					//如果没有作修改
					if (evt.reason == DataGridEventReason.CANCELLED){
                    	return;
                	}
                	//确定修改的属性
               		if(evt.dataField == "date"){
                    	// 清除原来的数据
                    	evt.preventDefault();
                    	// 得到新的数据
                    	book_DG.editedItemRenderer.data.date = dateCell(DataGrid(evt.target).itemEditorInstance).num_year.value;
                    	// 关闭item editor
                    	book_DG.destroyItemEditor(); 
                    	//更新数据源 
                    	book_DG.dataProvider.itemUpdated(evt.itemRenderer.data);
                	}
				}
			]]>
		</mx:Script>
    	<mx:Model id="books">
       		<datas>
        		<book>
            		<name>Flash第一步</name>
            		<author>陈冰</author>
            		<date>2006</date>
        		</book>
        		<book>
            		<name>Flex第一步</name>
            		<author>walktree</author>
            		<date>2007</date>
        		</book>
        		<book>
            		<name>Apollo第一步</name>
            		<author>还不知道呢</author>
            		<date>2008</date>
        		</book>
       		</datas>
    	</mx:Model>    
        <mx:Label width="100%" color="#004080" text="选择一本书购买"/>
        <mx:DataGrid editable="true" id="book_DG" width="100%" height="156" itemEditEnd="checkInfo(event)" rowCount="5" dataProvider="{books.book}">
            <mx:columns>
                <mx:DataGridColumn dataField="name" headerText="书名"/>
                <mx:DataGridColumn dataField="author" headerText="作者"/>
                <mx:DataGridColumn dataField="date" headerText="出版日期" itemEditor="view.dateCell" />
                <mx:DataGridColumn headerText="购买" itemRenderer="view.cartCell" editable="false"/>
            </mx:columns>
        </mx:DataGrid>
		
		<mx:Canvas height="150" width="100%" backgroundColor="#ffffff">
        <mx:Label id="tip_txt" text="还没有选择书目"/>   
        </mx:Canvas>

</mx:Application>

 

此外还有headerRenderer 控制标题栏的界面 和 itemEditor 控制单元格中编辑状态下的界面，使用跟itemRenderer一样。要使用itemEditor必须将DataGrid 的editable 属性设为true。还要设置函数来处理编辑完成事件，更新数据。主程序代码见上面 。

 

接着我们再定义一个组件：

在下面的组件中，使用了NumericStepper 数字选择控件来提供便捷操作。

在用户完成编辑单元格数据后，itemEditEnd事件将被触发，DataGridEvent 事件被派发出去，因此使用监听函数：itemEditEnd="checkInfo(event)"

if (evt.reason == DataGridEventReason.CANCELLED) 检查事件的类型

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="180">
	<mx:NumericStepper id="num_year" x="0" y="0" minimum="1900" maximum="2100" value="{data.date}"/>
	<mx:Label text="请选择年份" x="96" y="2"/>
</mx:Canvas>