ColumnGroupingExample.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.grid;

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

import com.extjs.gxt.samples.resources.client.Resources;
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.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Slider;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
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.grid.HeaderGroupConfig;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
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;
import com.google.gwt.user.client.ui.FlexTable;

public class ColumnGroupingExample extends LayoutContainer {

  private NumberFormat currency = NumberFormat.getCurrencyFormat();
  private NumberFormat number = NumberFormat.getFormat("0.00");
  private NumberCellRenderer<Grid<Stock>> numberRenderer;
  private GridCellRenderer<Stock> change;
  private GridCellRenderer<Stock> gridNumber;
  private VerticalPanel vp;

  @Override
  protected void onRender(Element parent, int index) {
    super.onRender(parent, index);
    numberRenderer = new NumberCellRenderer<Grid<Stock>>(currency);
    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>";
      }
    };

    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));
      }
    };

    vp = new VerticalPanel();
    vp.setSpacing(20);

    createGrid(false);
    createGrid(true);

    add(vp);
  }

  private void createGrid(boolean widget) {
    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(100);
    configs.add(column);

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

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

    column = new ColumnConfig("date", 125);
    if (widget) {
      Button btn = new Button("Updated");
      btn.addListener(Events.OnClick, new Listener<ButtonEvent>() {
        public void handleEvent(ButtonEvent be) {
          // stop column from getting click and causing sort
          be.cancelBubble();
        }
      });
      btn.setStyleAttribute("float", "left");
      column.setWidget(btn, "Last Updated");
    } 
    else {
      column.setAlignment(HorizontalAlignment.CENTER);
      column.setHeader("Last Updated");
    }

    column.setDateTimeFormat(DateTimeFormat.getShortDateFormat());
    configs.add(column);

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

    ColumnModel cm = new ColumnModel(configs);

    cm.addHeaderGroup(0, 0, new HeaderGroupConfig("Header Grouping Example", 1, 5));
    cm.addHeaderGroup(1, 2, new HeaderGroupConfig("Stock Performance", 1, 2));

    if (widget) {
      Slider s = new Slider();
      s.setWidth(100);

      // ugly, but centers slider
      FlexTable tbl = new FlexTable();
      tbl.setWidth("100%");
      tbl.setHTML(0, 0, " ");
      tbl.setHTML(0, 1, "<span style='white-space: nowrap;font-size: 11px'>Slide Me:  </span>");
      tbl.setWidget(0, 2, s);
      tbl.setHTML(0, 3, " ");
      tbl.getCellFormatter().setWidth(0, 0, "50%");
      tbl.getCellFormatter().setWidth(0, 3, "50%");
      cm.addHeaderGroup(1, 0, new HeaderGroupConfig(tbl, 1, 2));
    } else {
      cm.addHeaderGroup(1, 0, new HeaderGroupConfig("Stock Information", 1, 2));
    }

    ContentPanel cp = new ContentPanel();
    cp.setBodyBorder(false);
    cp.setIcon(Resources.ICONS.table());
    cp.setHeading(widget ? "Column Grouping with Widget" : "Column Grouping");
    cp.setButtonAlign(HorizontalAlignment.CENTER);
    cp.setLayout(new FitLayout());
    cp.setSize(600, 300);

    Grid<Stock> grid = new Grid<Stock>(store, cm);
    grid.setStyleAttribute("borderTop", "none");
    grid.getView().setForceFit(true);
    grid.setBorders(true);
    cp.add(grid);

    vp.add(cp);
  }
}