Created
January 5, 2017 21:24
-
-
Save branflake2267/c16f6b9029347b3e70d89912aed8cc9d to your computer and use it in GitHub Desktop.
GXT 4 override the row and cell selected styles at runtime
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.ClientBundle; | |
import com.google.gwt.resources.client.CssResource; | |
public interface GridResources extends ClientBundle { | |
public GridResources INSTANCE = GWT.create(GridResources.class); | |
public interface GridStyles extends CssResource { | |
String gridRowSelected(); | |
String gridCellSelected(); | |
} | |
@Source("GridStyles.gss") | |
public GridStyles styles(); | |
} |
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
.gridRowSelected td { | |
background-color: red; | |
} | |
.gridCellSelected { | |
} |
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_selected_css; | |
import java.io.Serializable; | |
import java.util.ArrayList; | |
import java.util.Date; | |
import java.util.List; | |
import com.google.gwt.cell.client.AbstractCell; | |
import com.google.gwt.core.client.EntryPoint; | |
import com.google.gwt.core.client.GWT; | |
import com.google.gwt.dom.client.Element; | |
import com.google.gwt.editor.client.Editor.Path; | |
import com.google.gwt.safehtml.shared.SafeHtmlBuilder; | |
import com.google.gwt.safehtml.shared.SafeHtmlUtils; | |
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.GridSelectionModel; | |
import com.sencha.gxt.widget.core.client.grid.GridView; | |
public class GridWithCustomSelectStyleExample implements EntryPoint { | |
// ~~~ override GridView | |
public class GridViewExt<M> extends GridView<M> { | |
public GridViewExt() { | |
super(); | |
GridResources.INSTANCE.styles().ensureInjected(); | |
} | |
// ~~~~ Define style | |
public String getRowSelectedStyle() { | |
return GridResources.INSTANCE.styles().gridRowSelected(); | |
} | |
// ~~~~ Define style | |
public String getCellSelectedStyle() { | |
return GridResources.INSTANCE.styles().gridCellSelected(); | |
} | |
// ~~~~ override onSelect | |
@Override | |
protected void onRowSelect(int rowIndex) { | |
Element row = getRow(rowIndex); | |
if (row != null) { | |
onRowOut(row); | |
getAppearance().onRowSelect(row, true); | |
// row.addClassName(states.rowSelected()); | |
row.addClassName(getRowSelectedStyle()); | |
} | |
} | |
// ~~~~ override on desdelect | |
@Override | |
protected void onRowDeselect(int rowIndex) { | |
Element row = getRow(rowIndex); | |
if (row != null) { | |
getAppearance().onRowSelect(row, false); | |
getAppearance().onRowHighlight(row, false); | |
// row.removeClassName(states.rowSelected()); | |
row.removeClassName(getRowSelectedStyle()); | |
} | |
} | |
@Override | |
protected void onCellSelect(int row, int col) { | |
Element cell = getCell(row, col); | |
if (cell != null) { | |
getAppearance().onCellSelect(cell, true); | |
// cell.addClassName(states.cellSelected()); | |
cell.addClassName(getCellSelectedStyle()); | |
} | |
} | |
@Override | |
protected void onCellDeselect(int row, int col) { | |
Element cell = getCell(row, col); | |
if (cell != null) { | |
getAppearance().onCellSelect(cell, false); | |
//cell.removeClassName(states.cellSelected()); | |
cell.removeClassName(getCellSelectedStyle()); | |
} | |
} | |
} | |
private static int COUNTER = 0; | |
private static final StockProperties props = GWT.create(StockProperties.class); | |
@Override | |
public void onModuleLoad() { | |
Viewport viewport = new Viewport(); | |
RootPanel.get().add(viewport); | |
viewport.add(createGrid()); | |
} | |
private 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"); | |
nameCol.setCell(new AbstractCell<String>() { | |
@Override | |
public void render(com.google.gwt.cell.client.Cell.Context context, String value, SafeHtmlBuilder sb) { | |
sb.append(SafeHtmlUtils.fromString(value)); | |
} | |
}); | |
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 use extended grid view that overrides methods on row | |
// select and deselect | |
GridView<Stock> gridView = new GridViewExt<Stock>(); | |
GridSelectionModel<Stock> sm = new GridSelectionModel<Stock>(); | |
final Grid<Stock> grid = new Grid<Stock>(store, columnModel, gridView); | |
grid.setSelectionModel(sm); | |
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"; | |
} | |
} | |
} | |
private List<Stock> getStocks() { | |
List<Stock> stocks = new ArrayList<Stock>(); | |
stocks.add(new Stock("Apple Inc. <font>font tag</font>", "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:
![screen shot 2017-01-05 at 1 23 58 pm](https://cloud.githubusercontent.com/assets/1326504/21698077/4022fa10-d34a-11e6-9c82-300ca38bd21e.png)