DataGridを使ってリストをカラムがうまく変更されないので、その調整をするようなクラスを作成しました。
具体的には、拡大、縮小すると一部のフィールドだけ拡大、縮小してしまうのです。
この再現方法がわからないのですが、たまに発生するのです。
あとはminWidthを設定していても、縮小するとたまに、その指定以下になってしまうと気があります。
さらに、私はその部分にresiable=”false”を指定しているので、そうなってしまうともう拡大することができないのです。

なので、この部分を強制的に再度、サイズを調整するクラスを作成しました。
動きとしては、拡大、縮小するときにそれまでの比率を保ったまま拡大、縮小されるのですが、その調整が終わった後にminWidthの指定があるものに関しては、そのサイズに再度調整しています。

実際にこの処理が行われるのは、サイズがユーザにより変更されたときと、全体のサイズ(更新が必要な時)の変更があったときのイベントを利用しています。

DataGridのカラムのサイズがユーザにより変更された時のイベントは

dataGrid.addEventListener(DataGridEvent.COLUMN_STRETCH,changeColumnWidth);

です。
はじめ、DataGridColumnのソースを見たらset width()でイベントを発行していたので、それを使えばと思いましたが、あっ、widthを変えているのだからそれじゃ、どうすれば・・とDataGridのソースを見ました。
そしたら、DataGridEvent.COLUMN_STRETCHがあったので、おお、それだと。

そして、とりあえずこんな感じ。
[AS]
package com.coltware.cise.ui.helper
{
import flash.utils.Dictionary;

import mx.controls.DataGrid;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.events.DataGridEvent;
import mx.events.FlexEvent;

public class DataGridResizeController
{
private var dataGrid:DataGrid = null;
private var oldWidth:Number = -1;
private var oldColNum:Number = -1;
private var invalidateDisplayList:Boolean = false;
private var cols:Dictionary;
private var _enable:Boolean = true;

public function DataGridResizeController(dg:DataGrid)
{
cols = new Dictionary();

dataGrid = dg;
enable = true;
}

public function get enable():Boolean{
return _enable;
}

public function set enable(b:Boolean):void{
if(b){
_enable = true;
dataGrid.addEventListener(FlexEvent.CREATION_COMPLETE,create);
dataGrid.addEventListener(FlexEvent.UPDATE_COMPLETE,update);
dataGrid.addEventListener(DataGridEvent.COLUMN_STRETCH,changeColumnWidth);
}
else{
_enable = false;
dataGrid.removeEventListener(FlexEvent.CREATION_COMPLETE,create);
dataGrid.removeEventListener(FlexEvent.UPDATE_COMPLETE,update);
dataGrid.removeEventListener(DataGridEvent.COLUMN_STRETCH,changeColumnWidth);
}
}

private function create(e:FlexEvent):void{
oldWidth = dataGrid.width;

}

private function update(e:FlexEvent):void{
trace(“update …”);
if(oldWidth != dataGrid.width){
invalidateDisplayList = true;
}

if(invalidateDisplayList){
oldWidth = dataGrid.width;
for(var key:Object in cols){
var p:Number = cols[key] as Number;
var w:Number = Math.floor(oldWidth * p);
var c:DataGridColumn = key as DataGridColumn;
if(c && c.minWidth > w){
trace(“no resize col ” + c.minWidth + “>” + w );
}
else{
c.width = w;
}
}

// 最後に小さくなりすぎた resize = false のオブジェクトを戻す
for each(var col:DataGridColumn in dataGrid.columns){
if(!col.resizable && col.minWidth){
col.width = col.minWidth;
}
}
invalidateDisplayList = false;

}
else{
}
}

/**
* カラムのサイズがユーザにより変更された時の処理
*
*/
private function changeColumnWidth(e:DataGridEvent):void{
computePercent();
}

private function computePercent():void{
var w:Number = dataGrid.width;

cols = new Dictionary();

var arr:Array = new Array();

for each(var col:DataGridColumn in dataGrid.columns){
if(col.visible){
if(col.resizable){
arr.push(col);
}
else{
w = w – col.width;
}
}
}
for each(var col2:DataGridColumn in arr){
var p:Number = col2.width / w;
cols[col2] = p;
}
}

}
}
[/AS]

結構、ASDocの結果ってわかりにくいなーと思いますね。
というか、プロパティやらイベントやら、1つのクラスに多すぎるのかもしれません。
最近、見えるんだったらソースを見てしまえと、見てしまいます。

余談ですが、ここで、Flex Builderの「定義へ移動」のメニューはいいですね。
でも、それでもある程度見当が付いているときには、だらだらとみているのは面倒なのでFlex Linux版をインストールして、それで、grepを使って思いの処理がありそうか調べています。

ただ、おおよそうまくいくようになったのですが、それでもたまに最後のカラムだけが拡大・縮小してもサイズ変更されない場合があるのです。
これまた、なぜ発生するのはわからないのです。

こんな問題も、サイズ固定にしてしまえば問題ないのですが・・・
それでは使い勝手が悪いので。

でも、よくVBとかでできた製品でサイズ変更してしまうとレイアウトが崩れるのがありますが、かっこ悪いですよね。大変なのはわかりますが・・・
(と言うと、今後自分の首もしめることに・・・)

この問題はEclipseのプラグインでアプリケーションを作成していたときにはあまり遭遇しなかったのですが・・
よりUIを自由にやろうとすると、このあたりの制御がプログラマに戻ってしまい大変ですね。
さらにFlexも、ActionScriptもはじめて半年もたっていない私には基本部分の理解不足を思い知らされます。

お仕事のご依頼・相談を承ります
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら

One Response to “flex:DataGridのカラムサイズを調整する”

Leave a Reply

お仕事のご依頼・相談
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら
ソフトウェア&ライブラリ




ライブラリ
airxmail(en)
AIR版メール送受信ライブラリ
airxzip
AIR版ZIP圧縮・解凍ライブラリ
執筆書籍
本、雑誌等

WEB記事:CodeZine
執筆記事はこちら
カレンダー
2009年5月
« 4月   6月 »
 123
45678910
11121314151617
18192021222324
25262728293031

カスタム検索
RSS
Add to Google < !–adsense–>
アーカイブ
カテゴリ
にほんブログ村 IT技術ブログへ