Please enter your password of your account at the remote wiki below.
/!\ You should trust both wikis because the password could be read by the particular administrators.

Clear message
Locked History Actions

GWT/Widget/DataGrid

DataGrid

CellTableでは大きな行数のデータを表示しようとすると様々な不都合が生じる(CellTableを参照)。 DataGridでは、PageSizeを設定する必要はあるが(PageSizeを超えるデータは無視されてしまう。おそらくページングをしなければ表示されない)、勝手にスクロールバーがついてくれ、列ヘッダは固定してくれるので圧倒的に楽である。

参考

サンプル

DataGridの使えなさ

  • DataGridでもgetVisibleRange(),getVisibleItemCount()の値は、実際にユーザに見える行数を表しているわけではなく、全データ数になってしまう。このため、大量のデータの一部のみをスクロールバーで移動しながらオンデマンドで必要なデータを取得するということはできない。結局、ページングでしかこのような仕組みは実現できないようだ(が、ページングの場合には、ブラウザのリサイズによって表示行数が変わるという問題が残る)。

しかし、GXTでもこの事情は同じようだ。以下はGXTのサンプル

import java.util.*;

import com.extjs.gxt.ui.client.data.*;
import com.extjs.gxt.ui.client.store.*;
import com.extjs.gxt.ui.client.widget.grid.*;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.google.gwt.core.client.*;
import com.google.gwt.user.client.ui.*;

public class ImageViewer implements EntryPoint {
  
  class ModelDataAdapter implements  ModelData {
    public <X> X get(String property) { throw new RuntimeException(); }
    public Map<String, Object> getProperties() { throw new RuntimeException(); }
    public Collection<String> getPropertyNames() { throw new RuntimeException(); }
    public <X> X remove(String property) { throw new RuntimeException(); }
    public <X> X set(String property, X value) { throw new RuntimeException(); }
  }
 
  public void onModuleLoad() {
    RootLayoutPanel rootPanel = RootLayoutPanel.get();

    ColumnModel model = 
        new ColumnModel(Arrays.asList(new ColumnConfig[] { new ColumnConfig("title", 500) }));
    ListStore<ModelData> store = new ListStore<ModelData>();
    for (int i = 0; i < 1000; i++) {
      final int index = i;
      store.add(new ModelDataAdapter() {
        public String get(String name) {
          System.out.println("" + index);
          return name + index;
        }
      });
    }
    Grid<ModelData> grid = new Grid<ModelData>(store, model);

    rootPanel.add(grid);
    grid.setSize("640px", "480px");
  }
}

結局のところ、これはブラウザの情報の取得制限に関わる問題のようだ(あくまでも想像)。つまり、

  • ブラウザ画面がリサイズしたとき、「表」を表示する領域の大きさを把握することができないか、あるいはその中に表示可能な行数を決定することができない。
  • そこで、「ページサイズ」つまりページングをせずに表示可能な行数は固定的に決定するしかない。
  • 一つの「ページ」中の行データは一度に取得する必要がある。ページ全体を表示するのにスクロールが必要だとしても、未表示の部分をオンデマンドで取得する、というわけにはいかない。