PDA

View Full Version : ErrorIcon does not show up after resizing page



r_q_d
14 May 2009, 7:15 AM
I developed a little bit complicated page, inside this page, I have a field that have some special validation rule. when user inputs value and clicks the submit button, a validator will be triggered and show errorIcon, when user mouse over the errorIcon, the detailed error message will show up as attached picture (with-error-msg.GIF) shows.

here is the code:



...
HorizontalPanel hPanel = new HorizontalPanel();
txtValue = new TextField<String>();
txtValue.setAllowBlank(false);
txtValue.setValidateOnBlur(false);
txtValue.setValidator(new Validator<String, Field<String>>() {
public String validate(Field<String> field, String value) {
if (value.length() < 5) {
return "<p class='text-error'><b>Invalid input</b><br/><br/>length must be 5 or more</p>";
}
return null;
}
});

hPanel.add(txtValue);
Button btnSubmit = new Button("Submit");
btnSubmit.addSelectionListener(new SelectionListener<ComponentEvent>() {
@Override
public void componentSelected(ComponentEvent ce) {
if (!txtValue.isValid()) {
return;
}
txtValue.clearInvalid();
...
}
});
hPanel.add(btnSubmit);
All these behavior works fine before I do a browser resizing. after I resize the browser, the errorIcon disappear. further button click will never bring the errorIcon back, as the picture (no-error-msg.GIF) shows.

the errorMsg the validator return is of format

<p class='text-error'><b>primaryMessage</b><br/><br/>secondaryError</p>

first I doubt about the errorMsg is little compilcated, so I removed the html tags and only return plain text error message, but I still got the same problem.

I developed a very simple gxt page, but I could not re-produce this behaviour.

the field is added to a HorizontalPanel not FormPanel, I don't know if this makes a difference.

Anybody can help about where to look at this?

Thanks.

r_q_d
14 May 2009, 9:47 AM
Finally I found the root cause of the problem, it's the Viewport. Here is the test code that will show that without Viewport, it works, but after put the content into a Viewport, then errorIcon will disappear after resizing.




public class TestErrorIcon {
private static TextField<String> txtValue = null;
public static Container generateContainer(){
HorizontalPanel hPanel = new HorizontalPanel();
hPanel.setSpacing(30);

txtValue = new TextField<String>();
txtValue.setAllowBlank(false);
txtValue.setValidateOnBlur(false);
txtValue.setValidator(new Validator<String, Field<String>>() {
public String validate(Field<String> field, String value) {
if (value != null && value.length() < 5) {
return "must be 5 or more";
}
return null;
}
});
hPanel.add(txtValue);

Button btnSubmit = new Button("Submit");
btnSubmit.addSelectionListener(new SelectionListener<ComponentEvent>() {
public void componentSelected(ComponentEvent ce) {
if (!txtValue.validate()) {
return;
}
txtValue.clearInvalid();

MessageBox.info("your input is ", txtValue.getRawValue(), null);
}
});

hPanel.add(btnSubmit);

//if do not use Viewport, then errorIcon works
//return hPanel;

//If use Viewport, then errorIcon does not work after resizing
Viewport viewport=new Viewport();
viewport.add(hPanel);
return viewport;
}
}