PDA

View Full Version : GXT Grid / Cell Filled



restey
5 Jun 2009, 10:31 AM
All, I am using GXT not JS and rendering a simple Grid. Please look at the image posted. Notice that columns 0100 and 0200 are padded with whitespace.

How can I adjust the cell padding between columns. I would like the columns to visually merge.

Fill the entire cell
Overlap any cell seperators
Make the grid look like a contiguous bar

Here's the code:

public class GridExample extends LayoutContainer
{
public GridExample()
{
setLayout(new FlowLayout(10));

GridCellRenderer<ATO> colorRender = new GridCellRenderer<ATO>()
{
public String render(ATO model, String property, ColumnData config,
int rowIndex, int colIndex, ListStore<ATO> store, Grid<ATO> grid)
{
return "<div style='background-color:" + "#00FF00" + "'>" + "."
+ "</div>";
}
};

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

ColumnConfig column = new ColumnConfig("name", "Unit", 100);
configs.add(column);

column = new ColumnConfig("01", "0100", 100);
column.setRenderer(colorRender);
configs.add(column);

column = new ColumnConfig("02", "0200", 100);
column.setRenderer(colorRender);
configs.add(column);

ListStore<ATO> store = new ListStore<ATO>();
store.add(TestData.getATOs());

ColumnModel cm = new ColumnModel(configs);

ContentPanel cp = new ContentPanel();
cp.setBodyBorder(false);
cp.setHeading("Waterfall Chart");
cp.setButtonAlign(HorizontalAlignment.CENTER);
cp.setLayout(new FitLayout());
cp.setSize(400, 400);

Grid<ATO> grid = new Grid<ATO>(store, cm);
grid.setStyleAttribute("borderTop", "none");
grid.setAutoExpandColumn("name");
grid.setBorders(true);
cp.add(grid);

add(cp);
}

keithshep
19 Jun 2009, 9:41 AM
Here is what I came up with for the same kind of thing. Ignore all the alignment bug stuff... I was reusing a test case i built

It could be more efficient if I made use of a hash map instead of doing config.style.contains, but this seems to work fine.



package test.client;

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

import com.extjs.gxt.ui.client.data.BaseListLoadResult;
import com.extjs.gxt.ui.client.data.BaseListLoader;
import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.data.ListLoadResult;
import com.extjs.gxt.ui.client.data.MemoryProxy;
import com.extjs.gxt.ui.client.data.Model;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
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.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;

/**
* Test showing column alignment bug in GXT 2.0 M2 (works fine in M1)
*/
public class Test implements EntryPoint
{
private static final int DEFAULT_COL_WIDTH = 100;

////////////////////////////////////////////////////////////////////////////
// Long column names seem to be the cause of the alignment bug
////////////////////////////////////////////////////////////////////////////
private static final String COLUMN_NAME_PREFIX = "Look! I'm column #: ";
// private static final String COLUMN_NAME_PREFIX = "Col:";

private static final String SPECIAL_CSS_STYLE = "background-color:#D0D0D0;";

/**
* {@inheritDoc}
*/
public void onModuleLoad()
{
RootPanel.get().add(new MyContainer());
}

private class MyContainer extends LayoutContainer
{
/**
* {@inheritDoc}
*/
@Override
protected void onRender(Element parent, int index)
{
super.onRender(parent, index);

GridCellRenderer<Model> greyCellRenderer = new GridCellRenderer<Model>()
{
/**
* {@inheritDoc}
*/
public String render(
Model model,
String property,
ColumnData config,
int rowIndex,
int colIndex,
ListStore<Model> store,
Grid<Model> grid)
{
if(config.style == null)
{
config.style = SPECIAL_CSS_STYLE;
}
else if(!config.style.contains(SPECIAL_CSS_STYLE))
{
config.style = SPECIAL_CSS_STYLE + config.style;
}

return model.get(property);
}
};

List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
for(int colIndex = 0; colIndex < 50; colIndex++)
{
boolean special = colIndex % 10 < 3;
ColumnConfig currCol = new ColumnConfig(
"col" + colIndex,
COLUMN_NAME_PREFIX + 1 /*+ (special ? "<br/>I'm Special" : "")*/,
DEFAULT_COL_WIDTH);
if(special)
{
currCol.setRenderer(greyCellRenderer);
}
columns.add(currCol);
}

List<BaseModel> rows = new ArrayList<BaseModel>();

for(int rowIndex = 0; rowIndex < 100; rowIndex++)
{
final BaseModel baseModel = new BaseModel();
for(int colIndex = 0; colIndex < 50; colIndex++)
{
baseModel.set("col" + colIndex, "value: " + rowIndex + "." + colIndex);
}
rows.add(baseModel);
}

BaseListLoadResult<BaseModel> loadResult =
new BaseListLoadResult<BaseModel>(rows);

final BaseListLoader<ListLoadResult<Model>> loader =
new BaseListLoader<ListLoadResult<Model>>(
new MemoryProxy<BaseListLoadResult<BaseModel>>(loadResult));

final Grid<Model> grid = new Grid<Model>(
new ListStore<Model>(loader),
new ColumnModel(columns));

grid.setLoadMask(true);
grid.setBorders(true);
grid.setHeight(300);
grid.setWidth(600);

loader.load();

this.add(grid);
}
}
}

restey
22 Jun 2009, 5:14 AM
keithshep, thank you so much for posting the entire coding example. This is exactly what I was looking for. Thank you so much. Bobby