logo

サイト内検索
ココログ最強検索 by 暴想

最近のトラックバック

無料ブログはココログ

« ココログへフォルダーごと一括アップロードする | トップページ | Gwt Ext 特定のHTMLエレメントの属性を調整する »

GwtExt Gridの特定行までスクロールする

  • ソースを表示して文中のリンクをクリックすると該当行が選択されます。
  • GwtExtの実装例ですが、ext.jsでも同じ考えで行けると思います。
     

スクロール可能なGridの場合、表示されるたびにスクロール位置が最初に戻って不便だったりしませんか?
上記でも使用している「ソースの表示」機能で、ある特定のまでプログラムからスクロールさせる方法実装しましたので紹介します。

上記「ソースの表示」ボタンを押すと現れるソースはこのソースの表示機能自体を実現しているソースです。この中で特定行までスクロールする機能の部分は以下のところ(170-185)

// スクロール位置調整
Element[] es = Ext.get(gp.getId()).query(
		"*[class*=x-grid3-row-table]");
Element con = Ext.get(gp.getId()).child(
		"*[class*=x-grid3-scroller]");
int p = is[0];
if (p > 2) {
	p = p - 2;
}
int ep = is[is.length - 1];
if (ep < es.length - 3) {
	ep = ep + 2;
}
w.setPosition(w.getPosition()[0], Ext.getDoc().getScroll()[1]);
new ExtElement(es[p]).scrollIntoView(con, true);
new ExtElement(es[ep]).scrollIntoView(con, true);

Gridの各行はx-grid3-row-tableというCSSのクラスが設定されているので、170-172のようにExtElementのqueryメソッドを発行するとGrid gpの配下の該当のCSSが設定されているElementの配列が取れます。つまりこれが、全行の配列になります。一方、int配列isに選択すべき行番号が入っています。多少上下に余裕を持ったところに位置づけたいので前後2行ずつ足し引きしてスクロール範囲に入れたい範囲の上限行と下限行をp,epに得ます。
実際に、スクロールするのは184-185。conはExtElementのchildメソッドでスクロールをしているコンテナのエレメントを捕まえたものです。scrollIntoViewメソッドでconの中のes[p]とes[ep]を表示エリアに出せ!とやって出来上がりです。
なお183は現在のブラウザー自体の縦スクロール位置にソースのWindowを持ってくる処理です。Ext.getDoc().getScroll()で現在のブラウザー自体のスクロール位置が取れるので、縦方向のみそこに位置づけしております。

ちなみに、queryやchildメソッドで引数にしている

"*[class*=x-grid3-scroller]"

という文字列はCSS selectorというもので、HTML上の特定のエレメントを捕まえるための文法でたとえばこの辺↓
http://pigs.sourceforge.jp/wiki/index.php?CSS%2Fselector

に説明があります。

« ココログへフォルダーごと一括アップロードする | トップページ | Gwt Ext 特定のHTMLエレメントの属性を調整する »

ext.js」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1482716/39211836

この記事へのトラックバック一覧です: GwtExt Gridの特定行までスクロールする:

« ココログへフォルダーごと一括アップロードする | トップページ | Gwt Ext 特定のHTMLエレメントの属性を調整する »