PDA

View Full Version : [FIXED] Beta 4: Grid header height change on mouseover



gishmo
2 Mar 2012, 2:04 PM
Running this test shows a problem with the grid header.



package de.gishmo.gridheaderproblem.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.editor.client.Editor.Path;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootLayoutPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.core.client.ValueProvider;
import com.sencha.gxt.core.client.util.Margins;
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.ContentPanel;
import com.sencha.gxt.widget.core.client.TabItemConfig;
import com.sencha.gxt.widget.core.client.TabPanel;
import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer;
import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
import com.sencha.gxt.widget.core.client.container.Viewport;
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;


/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class GridHeaderProblem implements EntryPoint {



public interface PersonProperties extends PropertyAccess<Person> {
@Path("persNr")
ModelKeyProvider<Person> key();

ValueProvider<Person, Long> persNr();


ValueProvider<Person, String> name();


ValueProvider<Person, String> street();


ValueProvider<Person, String> plz();


ValueProvider<Person, String> ort();
}


private static final PersonProperties personProps = GWT.create(PersonProperties.class);


/**
* This is the entry point method.
*/
public void onModuleLoad() {
BorderLayoutContainer rootPanel = new BorderLayoutContainer();
rootPanel.setBorders(true);
rootPanel.setSize("100%", "100%");


ContentPanel cpNorth = new ContentPanel();
cpNorth.setHeadingText("Header");
cpNorth.add(new Label("Test Fieldset Resize"));
BorderLayoutData dataNorth = new BorderLayoutData(64);
dataNorth.setMargins(new Margins(2, 2, 2, 2));
rootPanel.setNorthWidget(cpNorth, dataNorth);


ContentPanel cpWest = new ContentPanel();
cpWest.setHeadingText("Navigation");
cpWest.add(new Label("West"));
BorderLayoutData dataWest = new BorderLayoutData(128);
dataWest.setMargins(new Margins(2, 2, 2, 2));
rootPanel.setWestWidget(cpWest, dataWest);

BorderLayoutData dataCenter = new BorderLayoutData();
dataCenter.setMargins(new Margins(2, 2, 2, 2));
rootPanel.setCenterWidget(this.asWidget(), dataCenter);


Viewport viewport = new Viewport();
viewport.add(rootPanel);

RootLayoutPanel.get().add(viewport);
}

private Widget asWidget() {
// Center-Panel
ContentPanel contentPanel = new ContentPanel();
contentPanel.setHeadingText("Center");
contentPanel.setBorders(false);
contentPanel.setBodyBorder(false);


// Tab-Panel
TabPanel tabPanel = new TabPanel();
tabPanel.setBorders(false);
tabPanel.setBodyBorder(true);
tabPanel.setTabScroll(true);
// Tab01
TabItemConfig tab01 = new TabItemConfig("Tab 01");
tab01.setClosable(false);
tab01.setEnabled(true);
tabPanel.add(this.createNewGrid(), tab01);
// Tab02
TabItemConfig tab02 = new TabItemConfig("Tab 02");
tab02.setClosable(false);
tab02.setEnabled(true);
VerticalLayoutContainer vlc = new VerticalLayoutContainer();
vlc.add(new Label("TEstLabel Row 01"), new VerticalLayoutData(1, 200));
vlc.add(this.createNewGrid(), new VerticalLayoutData(1, 1));
tabPanel.add(vlc, tab02);


contentPanel.add(tabPanel);


return contentPanel;
}


private Grid<Person> createNewGrid() {
// Grid Disponent bauen ... :-)
ColumnConfig<Person, String> ccName = new ColumnConfig<Person, String>(personProps.name(), 200, "Name");
ColumnConfig<Person, String> ccStrasse = new ColumnConfig<Person, String>(personProps.street(), 200, "Strasse");
ColumnConfig<Person, String> ccPlz = new ColumnConfig<Person, String>(personProps.plz(), 200, "Plz");
ColumnConfig<Person, String> ccOrt = new ColumnConfig<Person, String>(personProps.ort(), 200, "Ort");
List<ColumnConfig<Person, ?>> personList = new ArrayList<ColumnConfig<Person, ?>>();
personList.add(ccName);
personList.add(ccStrasse);
personList.add(ccPlz);
personList.add(ccOrt);
ColumnModel<Person> cmPerson = new ColumnModel<Person>(personList);
ListStore<Person> storePerson = new ListStore<Person>(personProps.key());
storePerson.add(new Person("Donald Duck", "Springfield Road 12", "12345", "Entenhausen"));
storePerson.add(new Person("Daisy Duck", "Springfield Road 12", "12345", "Entenhausen"));
Grid<Person> grid = new Grid<Person>(storePerson, cmPerson);
grid.getView().setForceFit(true);
grid.getView().setStripeRows(true);
grid.setBorders(false);
grid.getView().setAutoExpandColumn(ccName);
return grid;
}


public class Person {
public int persNr;

String name;
String street;
String plz;
String ort;



public Person(String name, String street, String plz, String ort) {
super();
this.name = name;
this.street = street;
this.plz = plz;
this.ort = ort;
}






public int getPersNr() {
return persNr;
}






public String getName() {
return name;
}






public String getStreet() {
return street;
}






public String getPlz() {
return plz;
}






public String getOrt() {
return ort;
}






public void setPersNr(int persNr) {
this.persNr = persNr;
}






public void setName(String name) {
this.name = name;
}






public void setStreet(String street) {
this.street = street;
}






public void setPlz(String plz) {
this.plz = plz;
}






public void setOrt(String ort) {
this.ort = ort;
}

}
}


Select tab "Tab 01" and move the mouse over the grid header. The grid header does not change its size.

Select tab "Tab 02" and move the mouse over the grid header. The height of the grid header exceeds.

FF 10 OS X 10.3

gishmo
3 Mar 2012, 3:56 AM
And here the screenshots:

32352

This happens if you place a Grid inside a VerticalLayoutContainer and that inside a TabPanel:

32353

The header size first looks good. After you move the mouse over the grid, the header is changed.

john.bester
10 Mar 2012, 3:41 AM
I have the same issue. When moving mouse over header cells, the height of the header gets smaller. More specific, if you move the mouse from side to side across column headers, the header rows shrinks every time the cursor touches the last column. In other words, when you move mouse from the right-most column header to the left-most column, it shrinks when the cursor enters into the left-most column. Similarly, when you move the mouse from left to right, the header shrinks when the mouse cursor enters the right-most column. This keeps on happening until none of the header text is visible any more. I am using Google Chrome 17.0.963.65 on Linux. I just did a test on Firefox 10.0.2 and there this does not seem to be an issue.

gishmo
10 Mar 2012, 5:50 AM
I made a small movie (http://www.hossfeld-solutions.de/download/GridProblemMouseOver.mp4), that shows the issue.

WesleyMoy
15 Mar 2012, 12:23 AM
Thanks for the detailed test case, screenshots, and video. I was able to completely reproduce the issue with your test case. I've filed a bug against the team and will update this thread once the issue has been properly investigated and fixed.

gdlm
2 May 2012, 4:25 AM
Is this one fixed in GXT 3.0.0 or not?

At least in our case, using GXT 3.0.0, I no longer experience the problem.
But on the other side, [EXTGWT-1654] is not mentioned among the bug fixes of 3.0.0

:-/ Confusing... :s
Please clarify.

gishmo
2 May 2012, 4:40 AM
It is solved!

WesleyMoy
2 May 2012, 8:11 AM
Apologies for missing this in the release notes. Fixing of this bug was deferred to GXT 3.1, but we later decided to tackle it for 3.0. For some reason, the version targetted for fixing this bug was never set back to 3.0.0. (You'll see this same discrepancy in the header for this thread.) As a result, our collation of bugs for the release notes missed this bug.

If you continue to notice any problems with this issue in Sencha GXT 3.0.0 (which, in my testing in OS X 10.7 and FF 11, I don't), please let me know with a reply in this thread.

gdlm
2 May 2012, 10:44 PM
Hi Wesley,
Thanks for the clarification/explanation.
So [EXTGWT-1916] (http://www.sencha.com/forum/showthread.php?195188-Grid-headers-height-change-on-mouseover-if-you-have-more-than-one-grid&p=793271) - which is also not mentioned in the release notes - is also fixed then, I presume?

kataria.mx
2 Jul 2013, 10:09 PM
We are experiencing this issue on version 3.0.1, Windows 7, FF 21

branflake2267
5 Jul 2013, 5:06 PM
This has been fixed in 3.0.5. Would you be able to try 3.0.5?
EXTGWT-2771 covered this issue.

Brandon

gishmo
6 Jul 2013, 1:30 AM
3.0.5 tested with OS X 10.8, FF 22 & Chrome. works fine!
Can't reproduce this problem on windows 7 & FF 22

@kataria.mx:
can you provide a test case that shows the problem?