つれずれなるままの開発日記(最近はFlexばかり..)

Archive for 2009/11/2

さて、DataGirdのヘッダをいろいろとカスタマイズしたいなとおもって、その備忘録です。

１）ヘッダを表示しない

単純にDataGridの１列目を項目として２列目を値の入力などのようなプロパティ編集として使いたい場合に、
ヘッダを表示したくないということがある。
この場合には

<mx:DataGrid showHeaders="false" />

ただし、ここで注意しなければいけないのがヘッダの表示がないと、列幅を変える場所がなくなってしまうのです。
普通のセルの縦の区切り線でもサイズを変更できるようにできればいいのですが・・・

なので、私が気をつけているのは・・・

<mx:DataGridColumn headerText="項目名" minWidth="100" width="100" />
<mx:DataGridColumn headerText="値" />

のように１列目は幅を固定します。
ただし、なぜかリサイズとかすると、この設定を無視してサイズが変わるので画面の更新で再度、設定しなおします。
（headerTextは表示されませんが、わかりやすいように値をいれているだけです。）

列の幅の調整については私はこのようにしてにげました。

２）あるヘッダだけソートをさせなくしたい。

セルにチェックボックスや、ボタンなどを表示しているときに、そのヘッダをクリックされてもソートされないようにしたい。

<mx:DataGridColumn sortable="false" />

３）ヘッダにアイコンなどの画像などを表示したい

DataGridColumnに対してheaderRendererを設定してやればよい。

<mx:DataGridColumn id="dgf_priority">
	<mx:headerRenderer>
		<mx:Component>
			<mx:HBox verticalAlign="middle" horizontalGap="0">
				<mx:Image source="@Embed('assets/star_s.png')" />
				<mx:Label text="スター" />
			</mx:HBox>
		</mx:Component>
	</mx:headerRenderer>
</mx:DataGridColumn>

４）ヘッダの高さを取得・変更する

ヘッダの高さは
<mx:DataGridColumn headerHeight=”10″ />
のように設定できます。取得も同じプロパティです。