ジェフの答えは、このための1つのアプローチに対する部分的な答えですが(これが効果的に使用されている完全な例については、http://flex.gunua.com/ ?p = 119を参照してください)、私が望んでいたほど一般的ではありません。 。
ありがたいことに、私はついにExperts Exchange(hobbit72による回答)でItemRendererとしてグリッドで機能するカスタムコンポーネントを作成する方法を説明しているいくつかの素晴らしいヘルプを見つけました。そのコードを拡張して、コンボボックスをItemEditorとしても使用できるようにしました。完全なコンポーネントは次のとおりです。
<?xml version="1.0" encoding="utf-8"?>
<mx:ComboBox
xmlns:mx="http://www.adobe.com/2006/mxml"
dataChange="setSelected()"
change="onSelectionChange(event)"
focusEnabled="true">
<mx:Script>
<![CDATA[
import mx.events.DataGridEvent;
import mx.events.ListEvent;
import mx.controls.dataGridClasses.DataGridListData;
private var _ownerData:Object;
private var _lookupField:String = "value";
// When using this component as an itemEditor rather than an itemRenderer
// then set ' editorDataField="selectedItemKey"' on the column to
// ensure that changes to the ComboBox are propogated.
[Bindable] public var selectedItemKey:Object;
public function set lookupField (value:String) : void {
if(value) {
_lookupField = value;
setSelected();
}
}
override public function set data (value:Object) : void {
if(value) {
_ownerData = value;
setSelected();
}
}
override public function get data() : Object {
return _ownerData;
}
private function setSelected() : void {
if (dataProvider && _ownerData) {
var col:DataGridListData = DataGridListData(listData);
for each (var dp:Object in dataProvider) {
if (dp[_lookupField] == _ownerData[col.dataField]) {
selectedItem = dp;
selectedItemKey = _ownerData[col.dataField];
return;
}
}
}
selectedItem = null;
}
private function onSelectionChange (e:ListEvent) : void {
if (selectedItem && _ownerData) {
var col:DataGridListData = DataGridListData(listData);
_ownerData[col.dataField] = selectedItem[_lookupField];
selectedItemKey = selectedItem[_lookupField];
}
}
]]>
</mx:Script>
</mx:ComboBox>
このコンポーネントの使用は簡単です。ItemRendererとして:
<mx:DataGridColumn headerText="Child" dataField="PersonID" editable="false" textAlign="center">
<mx:itemRenderer>
<mx:Component>
<fx:GridComboBox dataProvider="{parentDocument.childrenData}" labelField="Name" lookupField="PersonID" change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true))"/>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
このコンポーネントの使用は簡単です。そしてItemEditorとして:
<mx:DataGridColumn labelFunction="lookupChildName" headerText="Child" dataField="PersonID" editable="true" editorDataField="selectedItemKey">
<mx:itemEditor>
<mx:Component>
<fx:GridComboBox dataProvider="{parentDocument.childrenData}" labelField="Name" lookupField="PersonID" change="dispatchEvent(new mx.events.DataGridEvent(mx.events.DataGridEvent.ITEM_FOCUS_OUT, true, true))"/>
</mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
ItemEditorとして使用する場合は、カスタムlabelFunction(私の場合はPersonIDから名前を検索する)を使用する必要があることに注意してください。そうしないと、フィールドが編集されていないときにのみグリッドにキーが表示されます(問題ありません)。キー/値が同じ場合)。
私の場合、アイテムフォーカスアウトイベントを伝播して、ユーザーに即座にフィードバックを提供する必要があることに注意してください(私のDataGridにはitemFocusOut="handleChange()"
)。したがって、change
イベントはITEM_FOCUS_OUTイベントを作成します。
ユーザーが編集するセルをクリックしたときにのみ表示されるComboBoxを気にしない場合は、ComboBoxをItemEditorとして使用するより簡単な方法があることに注意してください。私が望んでいたアプローチは、すべての行のDataGridにコンボボックスを表示し、編集可能で、適切なイベント伝播を使用する一般的な方法でした。