Gridを使ってみる

SwingでいうところのJTableにあたるGridを使ってみることにした。、まだExt GWTに慣れてないので新しくでてくるクラスの名前に戸惑っている感じ。一体どこから実装すればいいのかがまだわかってない。とりあえず少しずつ進めていくために今回はGridを使ってみることにした。

APIドキュメントでGrid見ると、ListStoreとColumnModelが必要なことがわかる。まずColumnの設定からだろと思い、ColumnModelを見ると、コンストラクタでColumnConfigのListを引数にとることがわかる。ColumnConfigを見ると、idとwidthを取るコンストラクタがあるのでこいつを使って初期化することにした。idは間違いなく表示用に使うと思ったので。それでListに追加してColumnModelのコンストラクタを呼び出す所までのソースを載せる。

List columnList = new ArrayList<ColumnConfig>();

columnList.add(new ColumnConfig("name", 100));
columnList.add(new ColumnConfig("os", 100));

ColumnModel model = new ColumnModel(columnList);

次にListStore。ModelDataを実装したクラスを引数にとるのだが、すでにライブラリで用意されてるはずなので、ModelDataを実装したクラス一覧からそれらしきクラスを探す。BaseListLoadConfigがそれっぽい名前なのでこいつを使ってみることにした。まぁ、今はsetとgetが使えればいいのでBaseModelDataでいいような気もするが。とりあえずListStoreに追加するところまでのソースを載せる。

ListStore<BaseListLoadConfig> store = new ListStore<BaseListLoadConfig>();

BaseListLoadConfig config1 = new BaseListLoadConfig();
config1.set("name", "d-kami");
config1.set("os", "Fedora 12");

BaseListLoadConfig config2 = new BaseListLoadConfig();
config2.set("name", "d-kami");
config2.set("os", "Windows 7");

store.add(config1);
store.add(config2);

最後にGrid。コンストラクタでさっき作った、ColumnModelとListStoreをコンストラクタに渡すだけ。

Grid<BaseListLoadConfig> grid = new Grid<BaseListLoadConfig>(store, model);

これで表示はできる。ヘッダの設定してないので、ヘッダが潰れてるけど今は気にしない。そのうち何かする。最後にウインドウに載せたスクリーンショットと、そのソースコード全体を載せておく

import java.util.List;
import java.util.ArrayList;

import com.google.gwt.core.client.EntryPoint;

import com.extjs.gxt.ui.client.widget.Window;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.data.BaseListLoadConfig;

public class MainEntryPoint implements EntryPoint {
    public MainEntryPoint(){
    }

    public void onModuleLoad(){

        List columnList = new ArrayList<ColumnConfig>();
        columnList.add(new ColumnConfig("name", 100));
        columnList.add(new ColumnConfig("os", 100));
        ColumnModel model = new ColumnModel(columnList);

        ListStore<BaseListLoadConfig> store = new ListStore<BaseListLoadConfig>();

        BaseListLoadConfig config1 = new BaseListLoadConfig();
        config1.set("name", "d-kami");
        config1.set("os", "Fedora 12");

        BaseListLoadConfig config2 = new BaseListLoadConfig();
        config2.set("name", "d-kami");
        config2.set("os", "Windows 7");

        store.add(config1);
        store.add(config2);

        Grid<BaseListLoadConfig> grid = new Grid<BaseListLoadConfig>(store, model);

        Window window = new Window();
        window.setHeading("Test");
        window.setSize(300, 300);
        window.setMaximizable(true);
        window.setMinimizable(true);
        window.add(grid);
        window.show();
    }
}