fc2ブログ


FLEXを使用して、DataGridコントロールのヘッダ色(headerColors)を変更するサンプルを作成してみます。



データグリッド(DataGrid)のヘッダー色変更 サンプルソース


■ ファイル名:Main.mxml
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="300" height="200">
<mx:Style>
global
{
themeColor: #ffcccc;
}
</mx:Style>

<mx:XMLList id="sampledata">
<sample>
<id>1</id>
<name>サンプル1</name>
</sample>
<sample>
<id>2</id>
<name>サンプル2</name>
</sample>
<sample>
<id>3</id>
<name>サンプル3</name>
</sample>
<sample>
<id>4</id>
<name>サンプル4</name>
</sample>
</mx:XMLList>

<mx:DataGrid id="dataGrid" width="100%" height="100%" dataProvider="{sampledata}" headerColors="[#ffcccc, #ffffff]">
<mx:columns>
<mx:DataGridColumn dataField="id" headerText="ID"/>
<mx:DataGridColumn dataField="name" headerText="名前"/>
</mx:columns>
</mx:DataGrid>

</mx:Application>

サンプルソースを見て頂くとすぐわかると思いますが、headerColorsでヘッダー色を変更しています。

ここでは2色(薄いピンクと白)を指定し下の方になるにつれ白っぽくなるように指定しています。
また、グリッドにフォーカスをあてた際の色の設定で、themeColorを使って指定しています。

データグリッド(DataGrid)のヘッダー色変更 サンプル

少しでも参考になれば応援お願いします。