[Flex3]itemRendererのコンポーネントがtextプロパティを持っていない場合の対処方法

前回の「itemRendererで編集したデータをdataProviderに反映させる」では、
itemRendererにtextInputを使用しました。

今回はcheckBoxを使用してみます。
前回同様、2つのデータグリッド間でうまく連携できるでしょうか?

サンプルコードは次の通りです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Album:true},
                {Album:true}
            ]);
 		]]>
	</mx:Script>
	<mx:VBox>
		<mx:DataGrid id="dg1" dataProvider="{initDG}" width="300" editable="true">
			<mx:columns>
				<mx:DataGridColumn headerText="Album" dataField="Album" rendererIsEditor="true">
					<mx:itemRenderer>
						<mx:Component>
							<mx:CheckBox/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
		<mx:DataGrid id="dg2" dataProvider="{initDG}" width="300" editable="true">
			<mx:columns>
				<mx:DataGridColumn headerText="Album" dataField="Album" rendererIsEditor="true">
					<mx:itemRenderer>
						<mx:Component>
							<mx:CheckBox/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
	</mx:VBox>
</mx:Application>



前回からの変更点は以下4点。
 ・itemRendererをテキストインプットからチェックボックスに変更
 ・DataGridColumnのプロパティに「rendererIsEditor=true」を追加
  ※アイテムレンダラーをアイテムエディタとして使用するため
 ・初期値(initDG)を文字列から「true」に変更
  ※チェックボックスに変更したため
 ・確認ボタンと、押下時の処理を削除

 

それでは起動してみます。

flex_itemrenderer2_01.jpg

 

1行目のチェックボックスの選択を解除してフォーカスアウトしてみます。

flex_itemrenderer2_02.jpg

 

そうすると次のエラーが発生しました。
ReferenceError: Error #1069: itemRendererSample_inlineComponent1 にプロパティ text が見つからず、デフォルト値もありません。

これは、DataGridColumnのeditorDataField プロパティのデフォルト値が 「text」なためです。
アイテムレンダラーで使用しているチェックボックスはtextプロパティを持っていません。

これを解消するにはDataGridColumnのediterDataFieldプロパティにcheckBoxのプロパティである「selected」を指定します。
実際のコードは以下のようになります。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			
            [Bindable]
            private var initDG:ArrayCollection = new ArrayCollection([
                {Album:true},
                {Album:true}
            ]);
 		]]>
	</mx:Script>
	<mx:VBox>
		<mx:DataGrid id="dg1" dataProvider="{initDG}" width="300" editable="true">
			<mx:columns>
				<mx:DataGridColumn headerText="Album" dataField="Album" rendererIsEditor="true" editorDataField="selected">
					<mx:itemRenderer>
						<mx:Component>
							<mx:CheckBox/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
		<mx:DataGrid id="dg2" dataProvider="{initDG}" width="300" editable="true">
			<mx:columns>
				<mx:DataGridColumn headerText="Album" dataField="Album" rendererIsEditor="true" editorDataField="selected">
					<mx:itemRenderer>
						<mx:Component>
							<mx:CheckBox/>
						</mx:Component>
					</mx:itemRenderer>
				</mx:DataGridColumn>
			</mx:columns>
		</mx:DataGrid>
	</mx:VBox>
</mx:Application>


 

早速起動して、先程と同じように1行目のチェックボックスの選択を解除してフォーカスアウトします。

flex_itemrenderer2_03.jpg

 

すると、今度はエラーも発生せず、データグリッド間の連携もうまくいきました。

意外とはまりそうなので、覚え書きしておきました…

このブログについて

このブログは吉祥寺にあるブレインチャイルド株式会社の社員で投稿しています。
業務ではまってしまったことや発見したこと。
自分達で新たに学習してみようと思って勉強し始めたことなどを綴っています。
こんな社員が働いているブレインチャイルドに興味がわいててきたなら、是非お問い合わせください。
会社案内
求人案内
先輩のコメント