2011年10月31日月曜日

flexigridで高さを動的に変更する

webアプリ作るのにflexigridを使い中。
上に検索項目があって下にグリッドを出すような画面で
document.readyやwindow.resizeの時にwindow.heightを元にして計算して下いっぱいにグリッドを出してやりたいんだけれども、
どうも高さをセットする、というメソッドがない。
ググってみてもいまいち情報が見つからない。

How to change the hight of the flexigrid dynamically
http://groups.google.com/group/flexigrid/browse_thread/thread/cdc162a440de5cff/541acdc8a8052871
放置されてたり、適当ぶっこいてる奴がいたりはしたが。

仕方なくソース読んで無理やり実装してみた。
function gridAutoSize(){
    var windowHeight = $(window).height();
    var gridTop = $('#grid').offset().top;
    grid = $('#grid')[0].grid;
    p = $('#grid')[0].p;
    hfoot = $(grid.pDiv).height() + $(grid.vDiv).height();
    newH = windowHeight - gridTop - (hfoot + 30);
    grid.bDiv.style.height = newH + 'px';
    p.height = newH;
    grid.fixHeight();
}
[0]とかpとかgrid.bDivとp.heightの二ヶ所同じ値セットとかなんなのって感じだけど
表一個の画面ではひとまずそれっぽい動きはしてる模様。
ちなみにhfootの「grid.pDiv」はページャ、「grid.vDiv」は表の下の高さ変えられる引っ張り部分。
なのでその辺を無効にしてると何か起こるかも。
あと30は単なる表の下余白。

0 件のコメント:

コメントを投稿