Happy Man

その3で作ったモデルクラス(Car)のリストをTableに表示してみます。
まずは、イメージが掴めるように、簡単に考えてみます。
＃多分、一番簡単なやり方だと思います。

その2で作ったAppView.javaに
Button
Text
Table
を追加します。
Button押したら、Tableにデータをロードして、
そのTableから1行選択し、選択内容をTextに表示します。
テーブル表示用のCarのリストは、130行目以下でテスト用に作っていて
85行目あたりでstoreに追加して、Tableにバインドしています。
ListStore
TableBinder

package com.gethapp.sample.mvc.client;

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

import com.extjs.gxt.ui.client.Events;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.SelectionMode;
import com.extjs.gxt.ui.client.binder.TableBinder;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.event.TableEvent;
import com.extjs.gxt.ui.client.mvc.AppEvent;
import com.extjs.gxt.ui.client.mvc.Controller;
import com.extjs.gxt.ui.client.mvc.View;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Text;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.table.DateTimeCellRenderer;
import com.extjs.gxt.ui.client.widget.table.Table;
import com.extjs.gxt.ui.client.widget.table.TableColumn;
import com.extjs.gxt.ui.client.widget.table.TableColumnModel;
import com.extjs.gxt.ui.client.widget.table.TableItem;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.user.client.Random;
import com.google.gwt.user.client.ui.RootPanel;

public class AppView extends View {
  private Viewport v;
  private ContentPanel cp;

  //コンポーネント追加
  private Table table;
  private Text text;
  private Button button;

  public AppView(Controller controller) {
    super(controller);
  }

  protected void initialize() {
    v=new Viewport();
    cp=new ContentPanel();

    //テーブルを作る
    List<TableColumn> columns = getColumns();
    TableColumnModel cm = new TableColumnModel(columns);
    table = new Table(cm);
    table.setSelectionMode(SelectionMode.SINGLE);
    table.setWidth(400);
    table.setHeight(250);

    //テーブルの行選択時
    table.addListener(Events.SelectionChange, new Listener<TableEvent>() {
      public void handleEvent(TableEvent te) {
        List<TableItem> tiList = (List<TableItem>) te.selected;
        if (tiList.size() == 1) {
          TableItem ti = tiList.get(0);

          //選択行の１カラム目は車名。これでOK?
          String name = (String) ti.getValue(0);

          //テーブルの下に配置したTextに車名を表示
          text.setText(name);
        }
      }
    });

    //車名表示用
    text=new Text();		

    //store
    final ListStore<Car> store = new ListStore<Car>();

    //tableとstoreをTableBinderで結びつける
    final TableBinder<Car> binder = new TableBinder<Car>(table, store);

    //ボタンとクリックイベント
    button = new Button("load", new SelectionListener<ComponentEvent>() {
      @Override
      public void componentSelected(ComponentEvent ce) {
        table.removeAll();
        store.add(getCarList());//storeにCarのListを追加
        binder.init();
      }
    });

    cp.add(button);
    cp.add(text);
    cp.add(table);
    v.add(cp);
    RootPanel.get().add(v);
  }

  //このAppViewが処理する必要があるイベントごとにハンドラを記述する
  protected void handleEvent(AppEvent event) {
    switch (event.type) {
    case App.EVENT_INIT:
      break;
    }
  }

  //Tableのカラムを定義
  private List<TableColumn> getColumns() {
    List<TableColumn> columns = new ArrayList<TableColumn>();

    TableColumn col = new TableColumn("name", "Name", 150);
    col.setAlignment(HorizontalAlignment.CENTER);
    col.setMinWidth(75);
    col.setMaxWidth(300);
    columns.add(col);

    col = new TableColumn("price", "Price", 50);
    col.setAlignment(HorizontalAlignment.RIGHT);
    columns.add(col);

    col = new TableColumn("mDate", "ManufacturingDate", 100);
    col.setAlignment(HorizontalAlignment.RIGHT);
    col.setRenderer(new DateTimeCellRenderer("yyyy"));
    columns.add(col);

    return columns;
  }

  //テーブルの表示用車リストを取り出したテスト。。。。
  private List<Car> getCarList() {
    List<Car> l = new ArrayList<Car>();
    int start = Random.nextInt(10);
    DateTimeFormat format=DateTimeFormat.getFormat("yyyy");
    for (int i=start;i<start +10;i++) {
      Car c = new Car("car_name"+i, i*100, format.parse((1995+i)+""));
      l.add(c);
    }
    return l;
  }

}