15.項(xiàng)呈現(xiàn)器創(chuàng)建方法:
1)內(nèi)投方法:通過(guò)在列表控件的itemRenderer屬性中定義單個(gè)組件,能夠?qū)⒉迦氲膯蝹€(gè)組件作為項(xiàng)呈現(xiàn)器
2)內(nèi)聯(lián)方法:使用列表控件的子標(biāo)簽來(lái)定義一個(gè)或多個(gè)組件,這些組件將作為項(xiàng)呈現(xiàn)器
3)可重用組件:將自定義組件作為項(xiàng)呈現(xiàn)器
內(nèi)投方法示例:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
privatevar myDP:Array = [
{label: "Customer 1", selected: true},
{label: "Customer 2", selected: false}
];
]]>
</mx:Script>
<mx:DataGrid dataProvider="{myDP}">
<mx:columns>
<mx:DataGridColumn dataField="label" headerText="Label" />
<mx:DataGridColumn dataField="selected" itemRenderer="mx.controls.CheckBox" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
內(nèi)聯(lián)方法示例:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
privatevar myDP:Array = [
{label: "Customer 1", selected: true},
{label: "Customer 2", selected: false}
];
]]>
</mx:Script>
<mx:DataGrid dataProvider="{myDP}">
<mx:columns>
<mx:DataGridColumn dataField="label" headerText="Label" />
<mx:DataGridColumn dataField="selected">
<mx:itemRenderer>
<mx:Component>
<mx:VBox verticalAlign="middle" horizontalAlign="center">
<mx:CheckBox/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
</mx:Application>
將組件作為呈現(xiàn)器示例:
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
privatevar myDP:Array = [
{label: "Oranges", date: new Date()},
{label: "Apples", date: new Date()},
{label: "Pears", date: new Date()}
];
]]>
</mx:Script>
<mx:List dataProvider="{myDP}" itemRenderer="MyCustomItemRenderer" />
</mx:Application>
MyCustomItemRenderer.xml
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</mx:Script>
<mx:HBox>
<mx:TextInput text="{data.label}" />
<mx:DateField id="dateField" selectedDate="{data.date}" />
<mx:Button label="Button" click="Alert.show('Selected item - Fruit: ' + data.label + '"n' + 'Date: ' + dateField.selectedDate)" />
</mx:HBox>
</mx:HBox>
16.項(xiàng)編輯器
編輯過(guò)程:
a) 用戶利用鼠標(biāo)按鈕或者tab鍵激活單元格
b) 分派itemEditBeginning 事件,使用該事件能夠禁用某特定單元格或者多個(gè)單元格的編輯功能
c) 分派itemEditBegin事件以便打開(kāi)項(xiàng)編輯器,該事件可用于修改傳遞給項(xiàng)編輯器數(shù)據(jù)
d)用戶編輯單元格數(shù)據(jù)
e)用戶移除焦點(diǎn)時(shí),結(jié)束編輯會(huì)話
f)分派itemEditEnd 事件以便關(guān)閉項(xiàng)編輯器,同時(shí)使用新數(shù)據(jù)更新單元格
當(dāng)列表控件(List Tree DataGrid)的editable屬性設(shè)置為true時(shí),用戶就能夠編輯控件內(nèi)容
自定義編輯事件監(jiān)聽(tīng)器訪問(wèn)單元格數(shù)據(jù):
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.TextInput;
import mx.events.DataGridEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var productsAC:ArrayCollection = new ArrayCollection
(
[
{Product: "iPod", Price: 249},
{Product: "iMac", Price: 1299},
{Product: "MacBook Pro", Price: 1999}
]
);
private function getCellInfo(event:DataGridEvent):void
{
var myEditor:TextInput = TextInput(event.currentTarget.itemEditorInstance);
var newVal:String = myEditor.text;
var oldVal:String = event.currentTarget.editedItemRenderer.data[event.dataField];
cellInfo.text = "cell edited. \n";
cellInfo.text += "Row, column: " + event.rowIndex + ", " + event.columnIndex + "\n";
cellInfo.text += "New value: " + newVal + "\n";
cellInfo.text += "Old value: " + oldVal;
}
]]>
</mx:Script>
<mx:TextArea id="cellInfo" width="300" height="150" />
<mx:DataGrid dataProvider="{productsAC}" editable="true" itemEditEnd="getCellInfo(event)">
<mx:columns>
<mx:DataGridColumn dataField="Product" />
<mx:DataGridColumn dataField="Price" />
</mx:columns>
</mx:DataGrid>
</mx:Application>
禁用單元格編輯器:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.controls.TextInput;
import mx.events.DataGridEvent;
import mx.collections.ArrayCollection;
[Bindable]
private var productsAC:ArrayCollection = new ArrayCollection
(
[
{Product: "iPod", Price: 249},
{Product: "iMac", Price: 1299},
{Product: "MacBook Pro", Price: 1999}
]
);
private function onEditBeginning(event:DataGridEvent):void
{
if (event.rowIndex == 2)
event.preventDefault();
}
]]>
</mx:Script>
<mx:DataGrid dataProvider="{productsAC}" editable="true" itemEditBeginning="onEditBeginning(event)">
<mx:columns>
<mx:DataGridColumn dataField="Product" />
<mx:DataGridColumn dataField="Price" />
</mx:columns>
</mx:DataGrid>
</mx:Application>