Grid headers height change on mouseover

[stegg]

Required Information


Version(s) of Ext GWT
Ext GWT 3.0 Release Candidate 2


Browser versions and OS
any


Virtual Machine
No


Description
The height of the grid header increases when the mouse is moved over the grid header.
This issue only appears if the grid is placed in a TabPanel and not in the first tab item. You can try the test code and remove the first tab item (the label), after this, the first grid in the first tab item works as expected, but the issue is still reproducible in the second grid.

Run mode
development mode and production mode


Steps to reproduce the problem

1. Use the test code provided
2. Switch to tab "Grid1" or "Grid2"
3. Move with the mouse over the grid header

Expected result
The column is highlighted and the grid menu icon appears.


Actual result
The column is highlighted, the grid menu icon appears AND the height of the header increases.


Test case

package com.test.client;


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


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.data.shared.ListStore;
import com.sencha.gxt.data.shared.ModelKeyProvider;
import com.sencha.gxt.data.shared.PropertyAccess;
import com.sencha.gxt.widget.core.client.TabPanel;
import com.sencha.gxt.widget.core.client.grid.ColumnConfig;
import com.sencha.gxt.widget.core.client.grid.ColumnModel;
import com.sencha.gxt.widget.core.client.grid.Grid;


public class GridHeaderBug implements EntryPoint {
  @Override
  public void onModuleLoad() {
    TabPanel tabPanel = new TabPanel();
    tabPanel.add(new Label("..."), "Label");
    tabPanel.add(createGrid(), "Grid1");
    tabPanel.add(createGrid(), "Grid2");
    RootPanel.get().add(tabPanel);
  }


  private Grid<Client> createGrid() {
    ClientProperties props = GWT.create(ClientProperties.class);
    ColumnConfig<Client, String> nameColumn = new ColumnConfig<Client, String>(props.name(), 100, "Name");


    List<ColumnConfig<Client, ?>> columns = new ArrayList<ColumnConfig<Client, ?>>();
    columns.add(nameColumn);
    
    ListStore<Client> store = new ListStore<Client>(props.id());
    store.add(new Client(1, "Name1"));
    store.add(new Client(2, "Name2"));
    
    return new Grid<Client>(store, new ColumnModel<Client>(columns));
  }


  interface ClientProperties extends PropertyAccess<Client> {
    ModelKeyProvider<Client> id();


    ValueProvider<Client, String> name();
  }


  class Client {
    private final int id;
    private final String name;


    public Client(int id, String name) {
      this.id = id;
      this.name = name;
    }


    public int getId() {
      return id;
    }


    public String getName() {
      return name;
    }
  }
}

[gishmo]

As far as I know, it is already fixed in SVN.

http://www.sencha.com/forum/showthread.php?195188-Grid-headers-height-change-on-mouseover-if-you-have-more-than-one-grid

Frank

[stegg]

This is fixed in the release version.