プログラミングとかそんなの

■[flex][as3] AdvancedDataGridのヘッダに表示される縦線を消す方法

AdvancedDataGridのデフォルト設定だと、ヘッダがイケテなくて困った人は多いと思います。

とくに、並び替え機能が不要なときにsorter領域の縦線が消したくなった人は多いと思います。

普通に考えると、sortableColumnsというプロパティをfalseに設定する、もしくはAdvancedDataGridColumnのsortableプロパティをfalseにすれば並び替えができなくなる代わりに縦線は消えるだろうと思います。しかし、この縦線は並び替えを無効にしても残ります。

では、どうすれば良いのか？

ここでのやり取りを追ってみると、AdvancedDataGridのsortExpertModeプロパティを「true」にすれば良いらしいことがわかります。確かに、これを設定すると、

という感じで縦線が消えます。ちなみに、このプロパティをtrueにするとctrl（macではcommand）キーで複数列の並び替えが出来るようになります。つまりAdobe的には、（ctrl押しながらクリック出来る人） = （エキスパート）ということなんでしょうね。

以下余談です。

つい最近、Flex Builder3を入手したのでFlexを触り始めました。起動がもっさりするのが気になりますが概ね快適です。

Flexを触り始めて思ったのが、色々とできそうなんだけど具体的にどうやればいいのかを調べるのが非常に面倒だと感じました。

特に日本語の情報源が乏しく、嵌まった場合にWEBを検索してもあまり有益な情報を得られないのが初心者にはつらい気がします。(FxUGが頼みの綱って感じですね）

というわけで、これからはFlexのTips的な記事も少しずつ書いていきたいなと思います。

サンプルコード

<?xml version="1.0"?>
<!-- charts/AxisRendererStrokes.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			[Bindable]
			private var dataList:Array = [
				{col1: 100, col2:200, col3:500},
				{col1: 100, col2:200, col3:400},
				{col1: 200, col2:200, col3:300},
				{col1: 200, col2:200, col3:200},
				{col1: 300, col2:200, col3:100}
			];
		]]>
	</mx:Script>
	<mx:AdvancedDataGrid designViewDataType="flat" sortableColumns="false" sortExpertMode="true" dataProvider="{dataList}" id="adg1">
		<mx:columns>
			<mx:AdvancedDataGridColumn headerText="列 1" dataField="col1"/>
			<mx:AdvancedDataGridColumn headerText="列 2" dataField="col2"/>
			<mx:AdvancedDataGridColumn headerText="列 3" dataField="col3"/>
		</mx:columns>
	</mx:AdvancedDataGrid>
</mx:Application>

参考

• [flex_india:11774] advanceddatagrid removing the sorting incos from the column header
• 複数列によるソート(Adobe Flex3 ヘルプ)

Permalink | コメント(0) | トラックバック(0)