AdvancedDataGrid の列の 1 つで、コンボボックスを itemEditor として使用したいと考えています。私は周りを見回して、Spark ComboBox コンポーネントを使用することに決めました。それらは洗練されており、textInput に入力するときの文字列の自動補完など、多くの優れた機能をネイティブにサポートしているようです。少しいじくり回した後、ADG に Spark ComboBox を追加し、ユーザーが新しいアイテムを追加したときに拡張できるようにデータ プロバイダーをセットアップし、すべてを接続しました。結果は有望に思えますが、いつものように、いくつかの詳細は私にとって克服することが不可能であり (実際、私はまだフレックスのプロではありません)、誰かが私を正しい方向に向けることができることを望んでいました. コードは以下に貼り付けられ、ここで説明するトリックを使用して、spark コンポーネントを mx グリッドの itemEditor として使用します。
(非常にシンプルな) アプリで遊んでみると、右側の最後の列を (数回) クリックして ComboBox を開くと、リストから値を選択し、別のセルをクリックして、選択した値が、左のセルに表示されます。ただし、ここで厄介なもののリストを開始します。
- ComboBox に入力を開始し、目的の項目が表示されたときに Enter キーを押すと、ComboBox は空のままになります。
- ComboBox に新しい項目を入力して Enter キーを押すと、項目がデータ プロバイダーに追加されます (正しい動作) が、ComboBox は空のままです。
- セルを最初にクリックすると、現在の値も消えます
最初の 2 つの厄介なシナリオをデバッグしましたが、Enter キーを押すと、myCB_changeHandler の前に advanceddatagrid1_itemEditEndHandler が呼び出されるようです。これは、dataGrid がそのセルで更新を行うときに myRetVal が設定されないことを意味します。リストから選択した場合、つまり機能する場合は逆になります。それについてどうするかはわかりません:-(
3番目の厄介な症状についてもアドバイスをいただければ幸いです。
ありがとう！
へ
MXML アプリ
<fx:Declarations>
<s:ArrayCollection id="myCbDb"/>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.AdvancedDataGridEvent;
import mx.events.DataGridEventReason;
import mx.events.FlexEvent;
[Bindable]
public var dataProv:ArrayCollection = new ArrayCollection();
[Bindable]
private var dpADG:ArrayCollection = new ArrayCollection([
{Name:'Pavement', duration:10, complete:0.1, ownerResource:'jon'},
{Name:'Pavement', duration:20, complete:.2, ownerResource:'randy'},
{Name:'Saner', duration:30, complete:.30, ownerResource:'joe'},
{Name:'Saner', duration:10, complete:.40, ownerResource:'mia'},
{Name:'The Doors', duration:5, complete:.50, ownerResource:'mia'},
{Name:'The Doors', duration:0, complete:.60, ownerResource:'jill'},
{Name:'Grateful Dead', duration:20, complete:.70, ownerResource:'jill'},
{Name:'Grateful Dead', duration:10, complete:.80, ownerResource:'joe'},
{Name:'Grateful Dead', duration:10, complete:.90, ownerResource:'jon'},
{Name:'The Doors', duration:5, complete:1, ownerResource:'jon'},
{Name:'The Doors', duration:10, complete:0, ownerResource:'jon'}
]);
private function formatDuration(data:Object, column:AdvancedDataGridColumn):String
{
var retVal:String = "";
var duration:Number = data[column.dataField] as Number;
retVal = duration.toString() + " days";
return retVal;
}
private function formatComplete(data:Object, column:AdvancedDataGridColumn):String
{
var retVal:String = "";
var duration:Number = data[column.dataField] as Number;
duration *= 100;
retVal = duration.toString() + " %";
return retVal;
}
private function formatResources(data:Object, column:AdvancedDataGridColumn):String
{
var retVal:String = data[column.dataField] as String;
return retVal;
}
protected function advanceddatagrid1_creationCompleteHandler(event:FlexEvent):void
{
for each (var a:Object in dpADG.source)
{
var s:String = a["ownerResource"];
if (!dataProv.contains(s))
{
dataProv.addItem(s);
trace("adding element ", s);
}
}
}
protected function advanceddatagrid1_itemEditEndHandler(event:AdvancedDataGridEvent):void
{
if (event.dataField == "ownerResource")
{
var editor:ResourceComboBoxField = ADG.itemEditorInstance as ResourceComboBoxField;
var name:String = editor.myRetVal;
// handle the ESC case first off
if (event.reason == DataGridEventReason.CANCELLED)
{
// Do not update cell.
return;
}
// do something with myRetVal if needed be
}
}
]]>
</fx:Script>
<mx:AdvancedDataGrid
width="100%" height="100%"
id="ADG"
sortExpertMode="true"
editable="true"
creationComplete="advanceddatagrid1_creationCompleteHandler(event)"
dataProvider="{dpADG}"
itemEditEnd="advanceddatagrid1_itemEditEndHandler(event)">
<mx:columns>
<mx:AdvancedDataGridColumn dataField="Name" />
<mx:AdvancedDataGridColumn dataField="duration" labelFunction="formatDuration" itemEditor="DurationField" editorDataField="value"/>
<mx:AdvancedDataGridColumn dataField="complete" labelFunction="formatComplete" itemEditor="CompleteField" editorDataField="value"/>
<mx:AdvancedDataGridColumn dataField="ownerResource" labelFunction="formatResources" editorDataField="myRetVal">
<mx:itemEditor>
<fx:Component>
<local:ResourceComboBoxField myDP="{outerDocument.dataProv}">
</local:ResourceComboBoxField>
</fx:Component>
</mx:itemEditor>
</mx:AdvancedDataGridColumn>
</mx:columns>
</mx:AdvancedDataGrid>
とコンポーネント
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.collections.IList;
import spark.events.IndexChangeEvent;
public var myRetVal:String = new String();
[Bindable]
public var myDP:ArrayCollection;
// Event handler to determine if the selected item is new.
protected function myCB_changeHandler(event:IndexChangeEvent):void
{
// Determine if the index specifies a new data item.
if(myCB.selectedIndex == spark.components.ComboBox.CUSTOM_SELECTED_ITEM)
// Add the new item to the data provider.
myDP.addItem(myCB.selectedItem);
myRetVal = myCB.selectedItem;
}
]]>
</fx:Script>
<s:ComboBox id="myCB" width="140" change="myCB_changeHandler(event);" dataProvider="{myDP}"/>