データを含む単純な DataGrid があります。列の 1 つで、標準の編集ボックスの代わりに ComboBox を使用してフィールドを編集したいと考えています。
それ、どうやったら出来るの?インターネットで見つけたあらゆる種類のことを試しましたが、値を更新するだけでは失敗します。これを行うのはそれほど難しいことではないと思います。
データを含む単純な DataGrid があります。列の 1 つで、標準の編集ボックスの代わりに ComboBox を使用してフィールドを編集したいと考えています。
それ、どうやったら出来るの?インターネットで見つけたあらゆる種類のことを試しましたが、値を更新するだけでは失敗します。これを行うのはそれほど難しいことではないと思います。
私はそれを考え出した。テキスト編集フィールドではなく、単純なドロップダウンボックスが必要でした。
次のコードは私が欲しいものです:
<mx:DataGridColumn dataField="type" headerText="Type" editorDataField="value">
<mx:itemEditor>
<fx:Component>
<mx:ComboBox>
<mx:dataProvider>
<fx:String>Gauge</fx:String>
<fx:String>Graph</fx:String>
<fx:String>Indicator</fx:String>
</mx:dataProvider>
</mx:ComboBox>
</fx:Component>
</mx:itemEditor>
</mx:DataGridColumn>
私は実際にこれを自分で行う過程にあり、spark:DataGrid を使用すると、実際には halo よりも少し簡単になりますが、どちらも同じセットアップ/アーキテクチャに従います。
皮切りに:
spark.components.gridClasses.ComboBoxGridItemEditor;
データ設定の性質やアプリケーションでこの種の編集がどれほど多用されるかに応じて、ほとんどのドキュメントが <fx:component> 内で示唆しているようにインラインで記述するか、単純にこれをサブクラス化することができます (舞台裏ではありますが)。これらは同じものです - 後者の方が再利用がはるかに簡単です)。私のシナリオでのコンボのデータは、より大きな親オブジェクトのサブ選択であるため、自分で簡単にすることを選択し、追加のプロパティdataFieldを追加して、他のレンダラー/エディターを模倣することにしました-実際にセル自体に表示されるもの(編集モードでない場合)。
基本的なセットアップは、多かれ少なかれ次のようになります (少なくとも私の場合はそうです)。
public class AccountComboEditor extends ComboBoxGridItemEditor
{
private _dataField:String;
public function AccountComboEditor()
{
super();
//note - typically you wouldn't do "logic" in the view but it's simplified as an example
addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete);
}
public function get dataField():String { return _dataField; }
public function set dataField(value:String):void
{
if (_dataField !=value) //dosomeadditionalvalidation();
_dataField = value;
}
override public function prepare():void
{
super.prepare();
if (data && dataField && comboBox) comboBox.labelField = data[dataField];
}
protected function onCreationComplete(event:FlexEvent):void
{
//now setup the dataProvider to your combo box -
//as a simple example mine comse out of a model
dataProvider = model.getCollection();
//this isn't done yet though - now you need a listener on the combo to know
//what item was selected, and then get that data_item (label) back onto this
//editor so it has something to show when the combo itself isn't in
//editor mode
}
}
したがって、本当の要点は、コンボボックスのlabelFieldを、サブクラスの内部で、または追加のプロパティとして公開する必要がある場合は外部でセットアップすることです。
次の部分は、実際のデータ グリッドのmx.core.ClassFactoryの一部としてこれを使用することです。単純なビューは次のようになります。
<s:DataGrid>
<fx:Script>
private function getMyEditor(dataField:String):ClassFactory
{
var cf:ClassFactory = new ClassFactory(AccountComboEditor);
cf.properties = {dataField : dataField };
return cf;
}
</fx:Script>
<s:columns>
<mx:ArrayList>
<s:GridColumn itemEditor="{getMyEditor('some_data_property')}" />
</mx:ArrayList>
</s:columns>
</s:DataGrid>
このCreation item renderers... doc に詳細が記載されています。