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>