[CLOSED] Beta 4: Table: issue with resizing TableColumns

[uwolfer]

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]

If you post complete test code in this format I will take a look.

[uwolfer]

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]

HostMode

[darrellmeyer]

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]

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.