GridStoreBindingExample.java

/*
 * Ext GWT - Ext for GWT
 * Copyright(c) 2007-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
package com.extjs.gxt.samples.client.examples.binding;

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

import com.extjs.gxt.samples.resources.client.TestData;
import com.extjs.gxt.samples.resources.client.model.Stock;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.Style.SelectionMode;
import com.extjs.gxt.ui.client.binding.FormBinding;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionChangedEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.store.Store;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.DateField;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.NumberField;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnData;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.grid.GridCellRenderer;
import com.extjs.gxt.ui.client.widget.layout.RowData;
import com.extjs.gxt.ui.client.widget.layout.RowLayout;
import com.extjs.gxt.ui.client.widget.table.NumberCellRenderer;
import com.google.gwt.i18n.client.DateTimeFormat;
import com.google.gwt.i18n.client.NumberFormat;
import com.google.gwt.user.client.Element;

public class GridStoreBindingExample extends LayoutContainer {

  private FormBinding formBindings;

  @SuppressWarnings("unchecked")
  @Override
  protected void onRender(Element parent, int index) {
    super.onRender(parent, index);
    setStyleAttribute("margin", "10px");

    ContentPanel cp = new ContentPanel();

    cp.setHeading("Form Bindings");
    cp.setFrame(true);
    cp.setSize(800, 400);
    cp.setLayout(new RowLayout(Orientation.HORIZONTAL));

    final Grid<Stock> grid = createGrid();
    grid.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
    grid.getSelectionModel().addListener(Events.SelectionChange,
        new Listener<SelectionChangedEvent<Stock>>() {
          public void handleEvent(SelectionChangedEvent<Stock> be) {
            if (be.getSelection().size() > 0) {
              formBindings.bind((ModelData) be.getSelection().get(0));
            } else {
              formBindings.unbind();
            }
          }
        });
    cp.add(grid, new RowData(.6, 1));

    FormPanel panel = createForm();
    formBindings = new FormBinding(panel, true);
    formBindings.setStore((Store) grid.getStore());

    cp.add(panel, new RowData(.4, 1));

    cp.setButtonAlign(HorizontalAlignment.START);
//    if (LocaleInfo.getCurrentLocale().isRTL())
//    	cp.getButtonBar().add(new FillToolItem()); // we want to be aligned to the right so we add space.
    cp.addButton(new Button("Reset", new SelectionListener<ButtonEvent>() {
      @Override
      public void componentSelected(ButtonEvent ce) {
        grid.getStore().rejectChanges();
      }
    }));
    cp.addButton(new Button("Commit", new SelectionListener<ButtonEvent>() {
      @Override
      public void componentSelected(ButtonEvent ce) {
        grid.getStore().commitChanges();
      }
    }));
    add(cp);
  }

  private FormPanel createForm() {
    FormPanel panel = new FormPanel();
    panel.setHeaderVisible(false);

    TextField<String> name = new TextField<String>();
    name.setName("name");
    name.setFieldLabel("Name");
    panel.add(name);

    TextField<String> symbol = new TextField<String>();
    symbol.setName("symbol");
    symbol.setFieldLabel("Symbol");
    panel.add(symbol);

    NumberField open = new NumberField();
    open.setName("last");
    open.setFieldLabel("Last");
    panel.add(open);

    NumberField change = new NumberField();
    change.setName("change");
    change.setFieldLabel("Change");
    change.setFormat(NumberFormat.getDecimalFormat());
    panel.add(change);

    DateField last = new DateField();
    last.setName("date");
    last.setFieldLabel("Updated");
    panel.add(last);

    return panel;
  }

  private Grid<Stock> createGrid() {
    final NumberFormat currency = NumberFormat.getCurrencyFormat();
    final NumberFormat number = NumberFormat.getFormat("0.00");
    final NumberCellRenderer<Grid<Stock>> numberRenderer = new NumberCellRenderer<Grid<Stock>>(
        currency);

    GridCellRenderer<Stock> change = new GridCellRenderer<Stock>() {

      public String render(Stock model, String property, ColumnData config, int rowIndex,
          int colIndex, ListStore<Stock> store, Grid<Stock> grid) {
        double val = (Double) model.get(property);
        String style = val < 0 ? "red" : "green";
        return "<span style='color:" + style + "'>" + number.format(val) + "</span>";
      }
    };

    GridCellRenderer<Stock> gridNumber = new GridCellRenderer<Stock>() {
      public String render(Stock model, String property, ColumnData config, int rowIndex,
          int colIndex, ListStore<Stock> store, Grid<Stock> grid) {
        return numberRenderer.render(null, property, model.get(property));
      }
    };

    List<ColumnConfig> configs = new ArrayList<ColumnConfig>();

    ColumnConfig column = new ColumnConfig();
    column.setId("name");
    column.setHeader("Company");
    column.setWidth(200);
    configs.add(column);

    column = new ColumnConfig();
    column.setId("symbol");
    column.setHeader("Symbol");
    column.setWidth(75);
    configs.add(column);

    column = new ColumnConfig();
    column.setId("last");
    column.setHeader("Last");
    column.setAlignment(HorizontalAlignment.END);
    column.setWidth(75);
    column.setRenderer(gridNumber);
    configs.add(column);

    column = new ColumnConfig("change", "Change", 90);
    column.setAlignment(HorizontalAlignment.END);
    column.setRenderer(change);
    configs.add(column);

    column = new ColumnConfig("date", "Last Updated", 90);
    column.setAlignment(HorizontalAlignment.END);
    column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());
    configs.add(column);

    ListStore<Stock> store = new ListStore<Stock>();
    store.setMonitorChanges(true);
    store.add(TestData.getStocks());

    ColumnModel cm = new ColumnModel(configs);

    Grid<Stock> grid = new Grid<Stock>(store, cm);
    grid.getView().setEmptyText("sdfd");
    grid.setBorders(false);
    grid.setAutoExpandColumn("name");
    grid.setBorders(true);

    return grid;
  }
}