PDA

View Full Version : [FIXED] Beta 4: Wrong error mark position in TextField after tabbing



gishmo
4 Mar 2012, 4:14 AM
A text field with a validator shows in case of error after validation an error mark behind the field and reduce the length of the textfield.

32366

Switching to "Tab 02" and going back to "Tab 01" destroys the rendering of the error mark.

32367

browser: FireFox 10
OS: Mac OS X 10.7.3

code of the test case:



package de.gishmo.errormarkproblemtab.client;


import com.google.gwt.core.client.EntryPoint;
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.Style.Side;
import com.sencha.gxt.core.client.util.Margins;
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.HorizontalLayoutContainer;
import com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData;
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.form.FieldLabel;
import com.sencha.gxt.widget.core.client.form.FieldSet;
import com.sencha.gxt.widget.core.client.form.FormPanel;
import com.sencha.gxt.widget.core.client.form.TextField;
import com.sencha.gxt.widget.core.client.form.validator.EmptyValidator;


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




/**
* 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);
// Portal-Tab (immer vorhanden)
TabItemConfig tab01 = new TabItemConfig("Tab 01");
tab01.setClosable(false);
tab01.setEnabled(true);
tabPanel.add(this.buildForms01(), tab01);
// Portal-Tab (immer vorhanden)
TabItemConfig tab02 = new TabItemConfig("Tab 02");
tab02.setClosable(false);
tab02.setEnabled(true);
tabPanel.add(this.buildForms02(), tab02);


contentPanel.add(tabPanel);


return contentPanel;
}


private FormPanel buildForms01() {
HorizontalLayoutContainer fieldContainer = new HorizontalLayoutContainer();


FieldSet fsAnschrift = new FieldSet(){
@Override
protected void onResize(int width, int height) {
super.onResize(width, height);
this.getContainerTarget().setWidth(width-this.getElement().getFrameWidth(Side.LEFT, Side.RIGHT), true);
}
};
fsAnschrift.setCollapsible(false);
fsAnschrift.setHeadingText("Anschrift");
fieldContainer.add(fsAnschrift, new HorizontalLayoutData(1, -1, new Margins(4)));
// VerticalPanel fuer die Fields im Fieldset
VerticalLayoutContainer fcAnschrift = new VerticalLayoutContainer();
fcAnschrift.setBorders(false);
// Felder
TextField tf = new TextField();
tf.addValidator(new EmptyValidator<String>());
fcAnschrift.add(new FieldLabel(tf, "Name"), new VerticalLayoutData(1, -1));
fcAnschrift.add(new FieldLabel(new TextField(), "Plz"), new VerticalLayoutData(1, -1));
fcAnschrift.add(new FieldLabel(new TextField(), "Ort"), new VerticalLayoutData(1, -1));
// FieldSet fuellen ...
fsAnschrift.add(fcAnschrift);


// Fuer die Farbe
BorderLayoutContainer bc = new BorderLayoutContainer();
bc.setSize("100%", "100%");
BorderLayoutData bcCenter = new BorderLayoutData();
bcCenter.setMargins(new Margins(0));
bc.setCenterWidget(fieldContainer, bcCenter);



FormPanel formPanel = new FormPanel();
formPanel.add(bc);

return formPanel;
}


private FormPanel buildForms02() {
HorizontalLayoutContainer fieldContainer = new HorizontalLayoutContainer();
fieldContainer.setBorders(false);


VerticalLayoutContainer fieldContainerRight = new VerticalLayoutContainer();
fieldContainerRight.setBorders(false);

FieldSet fsKategorie = new FieldSet(){
@Override
protected void onResize(int width, int height) {
super.onResize(width, height);
this.getContainerTarget().setWidth(width-this.getElement().getFrameWidth(Side.LEFT, Side.RIGHT), true);
}
};
fsKategorie.setCollapsible(false);
fsKategorie.setHeadingText("Kategorie");
fieldContainer.add(fsKategorie, new HorizontalLayoutData(1, -1, new Margins(4)));
// VerticalPanel fuer die Fields im Fieldset
VerticalLayoutContainer fcKategorie = new VerticalLayoutContainer();
fcKategorie.setBorders(false);
// Felder
fcKategorie.add(new FieldLabel(new TextField(), "Art"), new VerticalLayoutData(1, -1));
fcKategorie.add(new FieldLabel(new TextField(), "Status"), new VerticalLayoutData(1, -1));
fcKategorie.add(new FieldLabel(new TextField(), "Referenz"), new VerticalLayoutData(1, -1));
// FieldSet fuellen ...
fsKategorie.add(fcKategorie);

// Fuer die Farbe
BorderLayoutContainer bc = new BorderLayoutContainer();
bc.setSize("100%", "100%");
BorderLayoutData bcCenter = new BorderLayoutData();
bcCenter.setMargins(new Margins(0));
bc.setCenterWidget(fieldContainer, bcCenter);



FormPanel formPanel = new FormPanel();
formPanel.add(bc);

return formPanel;
}


}

darrellmeyer
16 Mar 2012, 10:21 AM
This issue is fixed in SVN. Thanks for providing the test case.

You can see this behavior here:

http://sencha.com/examples-dev/#ExamplePlace:formsexample beta4 broken
http://staging.sencha.com:8080/examples-dev/#ExamplePlace:formsexample current fixed

WesleyMoy
28 Mar 2012, 2:28 PM
This bug has been fixed in the Ext GWT 3.0 Release Candidate. Please upgrade your copy of Ext GWT and try your test case again. Because we've now deployed the RC Explorer Demo to http://www.sencha.com/examples-dev/, the comparison links Darrell posted above will no longer show a difference. While we're confident that we've addressed this issue, please reply if you notice any continued problems after upgrading. Again, thanks for taking the time to report this bug.