[FIXED][GXT 2.0 M2] Grid Column Alignment

[keithshep]

- Detailed description of the problem:
Something changed in the grid column alignment code between M2 and M1. Now if I have grid column header names that are longer than the set column width the alignment gets messed up (header names will not line up with table columns).

- GXT version: 2.0 M2

- Host mode/web mode/both: occurs in both hosted and web mode

- Browser and version: Hosted Browser and FF 3.0.10

- Operating System: Mac OS 10.5.7

- Sample code


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.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
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:";

/**
* {@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);

List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
columns.add(new ColumnConfig(
"col1",
COLUMN_NAME_PREFIX + 1,
DEFAULT_COL_WIDTH));
columns.add(new ColumnConfig(
"col2",
COLUMN_NAME_PREFIX + 2,
DEFAULT_COL_WIDTH));
columns.add(new ColumnConfig(
"col3",
COLUMN_NAME_PREFIX + 1,
DEFAULT_COL_WIDTH));

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

for(int i = 0; i < 3; i++)
{
final BaseModel baseModel = new BaseModel();
baseModel.set("col1", "value: " + i + ".0");
baseModel.set("col2", "value: " + i + ".1");
baseModel.set("col3", "value: " + i + ".2");
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);
}
}
}

[keithshep]

Is there any feedback on this issue?

Thanks
-Keith

[darrellmeyer]

Fixed in SVN.

[kostyat]

Darrel,

Unfortunatelly, Grid Column Alighnment is still broken in Ext GWT. I've attached 2 screenshots showing the issue in both 2.2.5 demo on sencha's web site and while playing with 3.0.0 b3. I can see this issue in Firefox (since version 3 or 4 up until now, I have version 10) and IE version 8

It looks like the alignment gets worse proportinally to the number of columns added to the table. I'm about to start working on a new application that is heavy on grids with multiple columns, but this single issue would definitelly stop me from recommending Ext GWT for using on this project. Ext GXT seems to be a great choice if somebody wants to get more than pure GWT components can offer. One of the main reasons for this switch would be more advanced grid functionality, however the column alignment works fine in GWT so we have no choice but to stay with GWT instead.

Regards,
K

[Vadim Kolesnikov]

I'm used GXT version 2.2.5.
http://www.sencha.com/forum/showthread.php?177768-Grid-method-setColumnLines(true)-offset-by-1px-the-header-lines.-Bug-How-to-fix