PDA

View Full Version : [CLOSED] Beta 4: Table: issue with resizing TableColumns



uwolfer
11 Jun 2008, 12:40 AM
There seems to be a problem with resizing columns in the table header: the items do not get resized at all. I have not been able to reproduce this issue with the demos though.
Please see the attached screenshot: 1st image shows initial state. 2nd image shows resized state. I have resized 2nd header column (moved to the right). All the item columns do not get resized.

Please see the example code below which produces the this wrong behavior.



ArrayList<TableColumn> columns = new ArrayList<TableColumn>();
ContentPanel content = new ContentPanel(new FitLayout());
content.setHeading("Available Models");
columns.add(new TableColumn("name", "Model", NiceGWT.GOLDEN_PERCENT_RIGHT));
columns.add(new TableColumn("backend", "Backend", NiceGWT.GOLDEN_PERCENT_LEFT));
final Table<RowSelectionModel> table = new Table<RowSelectionModel>(new TableColumnModel(columns));
final RowSelectionModel selectionModel = new RowSelectionModel(Style.SelectionMode.SINGLE);
table.setSelectionModel(selectionModel);
table.addListener(Events.SelectionChange, new Listener<TableEvent>() {
public void handleEvent(TableEvent evt) {
showResult((String)selectionModel.getSelectedItem().getValue(0));
}
});
content.add(table);
PersistBrowserModule.getService().getModels(new AsyncCallback<EntityTypeMetaData[]>() {
public void onFailure(Throwable caught) {
Shell.get().error("Error getting entity models", caught);
}
public void onSuccess(EntityTypeMetaData[] result) {
metaData = new HashMap<String, EntityTypeMetaData>();
for ( EntityTypeMetaData m : result ) {
Object[] values = new Object[] {
m.getName(), m.getBackend()
};
TableItem ti = new TableItem(values);
table.add(ti);
metaData.put(m.getName(), m);
}
}
});

darrellmeyer
12 Jun 2008, 11:41 AM
If you post complete test code in this format (http://extjs.com/forum/showthread.php?t=33778) I will take a look.

uwolfer
13 Jun 2008, 12:06 AM
For me it is also perfectly reproducible running slightly simplified code from GXT example locally. Please see the following example code.

Btw, using beta 5 now.



package com.extjs.gxt.samples.explorer.client.pages;

import ch.tocco.nice2.web.core.gwt.shell.client.ws.Workspace;
import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
import com.extjs.gxt.ui.client.Style.SelectionMode;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.table.Table;
import com.extjs.gxt.ui.client.widget.table.TableColumn;
import com.extjs.gxt.ui.client.widget.table.TableColumnModel;
import com.extjs.gxt.ui.client.widget.table.TableItem;
import com.extjs.gxt.ui.client.widget.toolbar.SeparatorToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.TextToolItem;
import com.extjs.gxt.ui.client.widget.toolbar.ToolBar;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.RootPanel;

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

public class ShellModule extends LayoutContainer implements EntryPoint {

public void onModuleLoad() {
setStyleAttribute("margin", "8px");

Viewport v = new Viewport();
v.setLayout(new FillLayout());
v.add(this);
RootPanel.get().add(v);
}

@Override
protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);

setLayout(new FlowLayout(10));

List<TableColumn> columns = new ArrayList<TableColumn>();

TableColumn col = new TableColumn("Company", 180);
col.setMinWidth(75);
col.setMaxWidth(300);
columns.add(col);

col = new TableColumn("Symbol", 75);
columns.add(col);

col = new TableColumn("Last", 75);
col.setMaxWidth(100);
col.setAlignment(HorizontalAlignment.RIGHT);
columns.add(col);

col = new TableColumn("Change", 75);
col.setAlignment(HorizontalAlignment.RIGHT);
columns.add(col);

col = new TableColumn("Last Updated", 100);
col.setAlignment(HorizontalAlignment.RIGHT);
columns.add(col);

TableColumnModel cm = new TableColumnModel(columns);

Table tbl = new Table(cm);
tbl.setSelectionMode(SelectionMode.MULTI);
tbl.setHorizontalScroll(true);

for (int i = 0; i < 7; i++) {
Object[] values = new Object[5];
values[0] = "0" + i;
values[1] = "1" + i;
values[2] = "2" + i;
values[3] = "3" + i;
values[4] = "4" + i;

TableItem item = new TableItem(values);
tbl.add(item);
}

ContentPanel panel = new ContentPanel();
panel.setCollapsible(true);
panel.setFrame(true);
panel.setAnimCollapse(false);
panel.setButtonAlign(HorizontalAlignment.CENTER);
panel.setIconStyle("icon-table");
panel.setHeading("Table Demo");
panel.setLayout(new FitLayout());
panel.add(tbl);
panel.setSize(575, 350);

// built in support for top component
ToolBar toolBar = new ToolBar();
toolBar.add(new TextToolItem("Add", "icon-add"));
toolBar.add(new SeparatorToolItem());
toolBar.add(new TextToolItem("Remove", "icon-delete"));
toolBar.add(new SeparatorToolItem());
toolBar.add(new TextToolItem("Configure", "icon-plugin"));
panel.setTopComponent(toolBar);

// add buttons
panel.addButton(new Button("Save"));
panel.addButton(new Button("Cancel"));

add(panel);
}
}

Webflash
13 Jun 2008, 4:24 AM
HostMode

darrellmeyer
13 Jun 2008, 9:04 AM
I have tested your code and everything works fine. I looked at your screenshot and noticed that the text in the column headers has no padding. Are you using any additional CSS? The column header text should not look like it does in your screen shot. Also, browser version and OS would be helpful.

uwolfer
16 Jun 2008, 12:15 AM
No, I'm not using any additional CSS. The result of the code posted above produces the result shown in screenshot.

Tested with Firefox 3 RC 2 and GWT Shell, both on Linux.

darrellmeyer
16 Jun 2008, 8:50 AM
Linux is not supported. I may try to take a look at the issue at a later time.

uwolfer
16 Jun 2008, 11:40 PM
Okay, I'm surprised to hear that... I can nowhere find such a statement. I thought cross-browser support means also cross-plattform. We are using such a framework because we *need* cross browser and plattform support.

Anyway, this bug is perfectly reproducible with:
Webkit
Firefox 3 on Win XP and Linux

Though it works with IE 7 on Win XP.

One thing because of the styles: We are just adding "ext-all.css" in our HTML. Not more. All icons ("setIconStyle") are missing. Is that okay?

gslender
17 Jun 2008, 1:07 AM
I tested it on WinXP SP2 and it looks fine as per attachment.

Tested in ...

* hosted ie7
* compiled ie7
* compiled ff2
* compiled ff3

so it would be hard to fix when its looking fine... /:)

As we only have the code snippet, and not your entire build/launch environment, perhaps zip up your eclipse project for this test code snippet and post back, otherwise its environmental and you may need to find the issue locally.. sorry :-?

cheers,
grant

uwolfer
17 Jun 2008, 1:18 AM
gslender: It looks exactly the same for me as it does for you. Margin in title looks wrong for you too, as Darell told me.
Also, could you please try to resize one column, and check if it looks broken for you (see my first screenshot).

And yes, I have already looked into the output, and everything seems to look good.

gslender
17 Jun 2008, 1:26 AM
Margin in title looks wrong for you too, as Darell told me.

That is because of this line...
panel.setIconStyle("icon-table"); remove it !!


Also, could you please try to resize one column, and check if it looks broken for you (see my first screenshot).

Not broken - as I said before - tested fine in all browsers.


And yes, I have already looked into the output, and everything seems to look good.

What output? I'm asking that you if you want further help, post a zip version of your eclipse project that has this code snippet in it (that isn't working for you) and I'll check to see if I can find anything that might be causing it - that is all I can do (or anyone I think) !!

gslender
17 Jun 2008, 1:51 AM
I know what it is.... its the doctype in the HTML

set yours to...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">


DARRELL - you are going to have to address this as GWT1.5 sets the doctype to something else... I think as per this thread...
http://extjs.com/forum/showthread.php?t=38334

uwolfer
17 Jun 2008, 3:09 AM
Right, the doctype was the problem.

Thanks a lot, gslender.

Darrell, I think this should be documented somewhere (probably in the setup.txt file).

darrellmeyer
17 Jun 2008, 5:38 AM
I added the doctype to setup.txt and to the help center docs.