View Full Version : [FIXED] Problem with alignment of table content

5 Jun 2008, 4:35 AM

We are evaluating GWT to use it for programming rich-client web-applications.

Therefore we use your Ext GWT in Version gxt-1.0-beta4 (also evaluation and
for further use to BUY).

But we have some troubles with some widgets (special with IE6 SP2):
- We're using your "com.extjs.gxt.ui.client.widget.table.Table" and it looks
like, there is a bug with the layout. If the column header is longer than the
column data, the layout is not correctly aligned (column data is not at the
same alignement as the column header).

- Sometimes we received the following error showing some data on the table:
com.google.gwt.core.client.JavaScriptException: (TypeError): 'sd' is null or no
object number: -2146823281 description: 'sd' is null or no object


5 Jun 2008, 8:46 AM
First, download the beta4 again as there were some issues with the package. If you still have problems, then please post some sample code that shows the issues you are having. Also, a table must be sized in order to render properly, this can happen directly or by the table's containing container.

6 Jun 2008, 5:08 AM
I downloaded the beta4 today and compile with the gwt 1.5 rc1, and I'm having the same problem. I tryed to set the size of the container ContentPanel but doesn't help. The cells are not aligned to the column headers.

Besides there's a weird behaviour, each time i try to resize a column the table grows vertically (the rows are the same with same height but the horizontal scrollbar at the bottom keeps going further down).

What am I missing???

Here's the code snippet with the table:

protected void initialize() {
risorsePanelM = new ContentPanel();
List<TableColumn> columns = new ArrayList<TableColumn>();

TableColumn col = new TableColumn(RisorsaModel.COLUMN_COGNOMENOME, "Cognome e Nome", 150);

TableColumn distretto = new TableColumn(RisorsaModel.COLUMN_DISTRETTO, "Distretto", 50);

TableColumn zona = new TableColumn(RisorsaModel.COLUMN_ZONA, "Zona", 40);

TableColumn day = new TableColumn(RisorsaModel.COLUMN_DAY1, "25/05/2008", 80);

day = new TableColumn(RisorsaModel.COLUMN_DAY2, "26/05/2008", 80);

day = new TableColumn(RisorsaModel.COLUMN_DAY3, "27/05/2008", 80);

day = new TableColumn(RisorsaModel.COLUMN_DAY4, "28/05/2008", 80);

day = new TableColumn(RisorsaModel.COLUMN_DAY5, "29/05/2008", 80);

day = new TableColumn(RisorsaModel.COLUMN_DAY6, "30/05/2008", 80);

day = new TableColumn(RisorsaModel.COLUMN_DAY7, "01/06/2008", 80);

TableColumnModel tcm = new TableColumnModel(columns);

tableM = new Table(tcm);
tableM.setSelectionModel(new RowSelectionModel(SelectionMode.SINGLE));

ToolBar risorseToolbar = new ToolBar();
risorseToolbar.add(new TextToolItem("Edit", "icon-edit"));

ListStore<RisorsaModel> store = new ListStore<RisorsaModel>();
store.add(new RisorsaModel(12,"Bourne", "Jason", 4, 1));
store.add(new RisorsaModel(15,"Webb", "David", 4, 1));
TableBinder<RisorsaModel> binder = new TableBinder<RisorsaModel>(tableM, store);
risorsePanelM.setSize(700, 450);

9 Jun 2008, 1:43 AM
Please help, what's wrong with the table? The data in the columns are not aligned with the column headers.

I tryed to size the ContentPanel but nothing happens. I also tryed to fiddle with setMinWidth and setMaxWidth for each column but still doesn't solve the problem.

Also setVerticalLines(true) seems to have no effect, as you can see.

My application is heavily based on tables...

I'm using beta4 against gwt 1.5 rc1.

9 Jun 2008, 1:49 PM
In the future, please post your code using these guidelines (http://extjs.com/forum/showthread.php?t=37647).

After a quick scan, it looks like you have not assigned a layout to the content panel and therefore, the table's ui is never calculated.

Try adding this line:

risorsePanelM.setLayout(new FitLayout());

9 Jun 2008, 11:25 PM
Hi Darrel,
I did set the layout after posting the code. I tryed to follow the code in the Explorer example and I saw the missing layout. After adding it nothing changes. The columns are still not aligned with their headers.

Sorry for not posting the code correctly, but your link to the guidelines points to this thread, not to the guidelines, which I searched but couldn't find. If you could post it again I will have a look at them.

I tryed to size the content panel, the table itself, the columns, still nothing. I also tryed to remove the toolbar (top component).

Also I don't understand why tableM.setVerticalLines(true) doesn't work.

10 Jun 2008, 12:09 AM
guidelines are here...

12 Jun 2008, 1:46 AM
I found what's causing the misalignment !
It's the instruction


Once I removed it the column values are correctly aligned i.e. are rendered inside the column. That istruction causes misalignment and it doesn't show the vertical lines.

There is also another issue: is there a way to set the alignment of the label in the column header? I want them to be centered, like the values in the column but can't find anything in the api.

I am using GXT beta 5 with GWT 1.5rc1, java 1.5 Firefox and Explorer.

12 Jun 2008, 5:45 AM
thank you slupix for your tip. it works also for the ie6 sp2.
only for the last columns the problem still exists, when resizing.

12 Jun 2008, 11:37 AM
I found what's causing the misalignment !
It's the instruction

setVerticalLines(true); Fixed.

There is also another issue: is there a way to set the alignment of the label in the column header? I want them to be centered, like the values in the column but can't find anything in the api.Fixed.

Fixes are in SVN.