Created
December 30, 2016 20:31
-
-
Save branflake2267/e57c2a96bb854d8a3fe42bcfe5b80b5f to your computer and use it in GitHub Desktop.
GXT 4 grid view with custom appearance
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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)); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Example of the this:
![screen shot 2016-12-30 at 12 29 45 pm](https://cloud.githubusercontent.com/assets/1326504/21572394/571deaa2-ce8d-11e6-9134-76645e8ca6f6.png)