Skip to content

Instantly share code, notes, and snippets.

@branflake2267
Created December 30, 2016 20:31
Show Gist options
  • Save branflake2267/e57c2a96bb854d8a3fe42bcfe5b80b5f to your computer and use it in GitHub Desktop.
Save branflake2267/e57c2a96bb854d8a3fe42bcfe5b80b5f to your computer and use it in GitHub Desktop.
GXT 4 grid view with custom appearance
import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.CssResource.Import;
import com.sencha.gxt.theme.triton.client.base.grid.Css3GridAppearance;
import com.sencha.gxt.widget.core.client.grid.GridView.GridStateStyles;
/**
* Custom appearance, with css overrides.
* TODO: CSS inherited from the triton theme. Change the packages to a theme to one of your included themes.
*/
public class CustomCss3GridAppearanceExt extends Css3GridAppearance {
public interface GridResourcesExt extends GridResources {
// ~~~ inherit a themes styles, then provide the custom styles too
@Source({ "com/sencha/gxt/theme/triton/client/base/grid/Css3Grid.gss", "customGridView.gss" })
@Import(GridStateStyles.class) // ~~~ provide custom styles for states
GridStyle css();
}
public CustomCss3GridAppearanceExt() {
super(GWT.<GridResources>create(GridResourcesExt.class));
}
}
/* Appearance css class overrides */
.grid-rowSelected .cell,
.grid-rowSelected .rowWrap,
.row .grid-cellSelected {
background-color: coral !important;
border-style: solid 1px coral;
border-color: coral;
}
package com.sencha.gxt.test.client.grid_custom_styles;
import java.io.Serializable;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.editor.client.Editor.Path;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.core.client.util.DateWrapper;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.data.shared.ModelKeyProvider;
import com.sencha.gxt.data.shared.PropertyAccess;
import com.sencha.gxt.widget.core.client.container.Viewport;
import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
import com.sencha.gxt.widget.core.client.grid.ColumnModel;
import com.sencha.gxt.widget.core.client.grid.Grid;
import com.sencha.gxt.widget.core.client.grid.GridView;
public class GridWithSelectionTest implements EntryPoint {
private static int COUNTER = 0;
private static final StockProperties props = GWT.create(StockProperties.class);
private Grid<Stock> grid;
@Override
public void onModuleLoad() {
Viewport vp = new Viewport();
vp.add(createGrid());
GWT.log("testadfadsfasdf");
RootPanel.get().add(vp);
}
public Grid<Stock> createGrid() {
ColumnConfig<Stock, String> nameCol = new ColumnConfig<Stock, String>(props.name(), 100, "Company");
ColumnConfig<Stock, String> symbolCol = new ColumnConfig<Stock, String>(props.symbol(), 100, "Symbol");
ColumnConfig<Stock, Double> lastCol = new ColumnConfig<Stock, Double>(props.last(), 100, "Last");
ColumnConfig<Stock, Double> changeCol = new ColumnConfig<Stock, Double>(props.change(), 100, "Change");
ColumnConfig<Stock, Date> lastTransCol = new ColumnConfig<Stock, Date>(props.lastTrans(), 100, "Last Updated");
List<ColumnConfig<Stock, ?>> columns = new ArrayList<ColumnConfig<Stock, ?>>();
columns.add(nameCol);
columns.add(symbolCol);
columns.add(lastCol);
columns.add(changeCol);
columns.add(lastTransCol);
ColumnModel<Stock> columnModel = new ColumnModel<Stock>(columns);
ListStore<Stock> store = new ListStore<Stock>(props.key());
store.addAll(getStocks());
// ~~~~ workaround - Custom grid appearance
// ~~~~ workaround - Or replace the appearance in the GWT module descriptor, instead of instantiating it this way
GridView<Stock> gridView = new GridView<Stock>(new CustomCss3GridAppearanceExt());
grid = new Grid<Stock>(store, columnModel, gridView);
grid.getView().setAutoExpandColumn(nameCol);
grid.setAllowTextSelection(true);
return grid;
}
public class Stock implements Serializable {
private Integer id;
private Double change;
private Date date = new Date();
private String industry = getType();
private Double last;
private String name;
private Double open;
private String symbol;
private boolean split = Boolean.valueOf(Math.random() > .5);
public Stock() {
this.id = Integer.valueOf(COUNTER++);
}
public Stock(String name, String symbol, double open, double last, Date date) {
this();
this.name = name;
this.symbol = symbol;
this.change = last - open;
this.open = open;
this.last = last;
this.date = date;
}
public Double getChange() {
return change;
}
public Integer getId() {
return id;
}
public String getIndustry() {
return industry;
}
public Double getLast() {
return last;
}
public Date getLastTrans() {
return date;
}
public String getName() {
return name;
}
public Double getOpen() {
return open;
}
/**
* Read-only property, based on other values
*
* @return the percent change
*/
public double getPercentChange() {
return getChange() / getOpen();
}
public String getSymbol() {
return symbol;
}
public boolean isSplit() {
return split;
}
public void setChange(Double change) {
this.change = change;
}
public void setId(Integer id) {
this.id = id;
}
public void setIndustry(String industry) {
this.industry = industry;
}
public void setLast(Double last) {
this.last = last;
}
public void setLastTrans(Date date) {
this.date = date;
}
public void setName(String name) {
this.name = name;
}
public void setOpen(Double open) {
this.open = open;
}
public void setSplit(boolean split) {
this.split = split;
}
public void setSymbol(String symbol) {
this.symbol = symbol;
}
public String toString() {
return getName();
}
private String getType() {
double r = Math.random();
if (r <= .25) {
return "Auto";
} else if (r > .25 && r <= .50) {
return "Media";
} else if (r > .5 && r <= .75) {
return "Medical";
} else {
return "Tech";
}
}
}
public List<Stock> getStocks() {
List<Stock> stocks = new ArrayList<Stock>();
stocks.add(new Stock("Apple Inc.", "AAPL", 125.64, 123.43, randomDate()));
stocks.add(new Stock("cisco Systems, Inc.", "CSCO", 25.84, 26.3, randomDate()));
stocks.add(new Stock("Cisco Inc.", "GOOG", 516.2, 512.6, randomDate()));
stocks.add(new Stock("Intel Corporation", "INTC", 21.36, 21.53, randomDate()));
stocks.add(new Stock("Level 3 Communications, Inc.", "LVLT", 5.55, 5.54, randomDate()));
stocks.add(new Stock("Microsoft Corporation", "MSFT", 29.56, 29.72, randomDate()));
stocks.add(new Stock("Nokia Corporation (ADR)", "NOK", 27.83, 27.93, randomDate()));
stocks.add(new Stock("Oracle Corporation", "ORCL", 18.73, 18.98, randomDate()));
return stocks;
}
private Date randomDate() {
DateWrapper w = new DateWrapper();
int r = (int) (Math.random() * 10) * 10;
w = w.addDays(-r);
return w.asDate();
}
public interface StockProperties extends PropertyAccess<Stock> {
@Path("symbol")
ModelKeyProvider<Stock> key();
ValueProvider<Stock, String> name();
ValueProvider<Stock, String> symbol();
ValueProvider<Stock, Double> last();
ValueProvider<Stock, Double> change();
ValueProvider<Stock, Date> lastTrans();
ValueProvider<Stock, String> industry();
}
}
@branflake2267
Copy link
Author

Example of the this:
screen shot 2016-12-30 at 12 29 45 pm

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment