PDA

View Full Version : [Solved] GXT - Focus on a TextField in a FormPanel within a Window in IE



jyothsna
6 Jan 2011, 3:43 AM
We have a window with a form panel containing a single password field which is required. When the window is launched, the focus should be on the text field. To achieve this we have used field.focus() method. However in IE 7 or 8, the cursor is not seen within text field. Also a validation error is displayed next to the field.

This issue is seen only in IE 7 or 8. It works fine in Mozilla.

If the form panel is added to a normal content panel / Root panel, this issue is not seen.

Sample code:



public void onModuleLoad()
{
Button button = new Button("Distribute");

button.addSelectionListener(new SelectionListener<ButtonEvent>()
{
@Override
public void componentSelected(ButtonEvent ce)
{
Window window = new Window();
window.setWidth(400);
FormPanel formPanel = new FormPanel();

TextField<String> passwordField = new TextField<String>();
passwordField.setFieldLabel("xyz");
passwordField.setEmptyText("abcd");
passwordField.setAllowBlank(false);
passwordField.setMaxLength(255);
passwordField.setPassword(true);
passwordField.focus();

formPanel.add(passwordField);
window.add(formPanel);
window.show();
}
});

FormPanel formPanel = new FormPanel();

TextField<String> passwordField = new TextField<String>();
passwordField.setFieldLabel("xyz");
passwordField.setEmptyText("abcd");
passwordField.setAllowBlank(false);
passwordField.setMaxLength(255);
passwordField.setPassword(true);
passwordField.focus();

formPanel.add(passwordField);

RootPanel.get().add(button);
RootPanel.get().add(formPanel);

}
We have tried using field.clearInvalid() method after it has been rendered to remove the validation error. However that doesnt help.

Is there any work around to this issue ? When the window is launched we dont want the field to show a validation error and cursor to be visible within the field.

We are using GWT version: 2.0.3 and GXT version 2.1.0

The fix proposed below works only in the hosted mode. It does not work when the application is deployed on a remote server.

sven
6 Jan 2011, 1:22 PM
If you solve something, please post your solution here so that others have it too. You probably want to use setFOcusWidget on your Window

jyothsna
6 Jan 2011, 8:41 PM
Hi Sven, Using setFocusWidget worked.



Window window = new Window();
window.setWidth(400);
FormPanel formPanel = new FormPanel();

TextField<String> passwordField = new TextField<String>();
passwordField.setFieldLabel("xyz");
passwordField.setEmptyText("abcd");
passwordField.setAllowBlank(false);
passwordField.setMaxLength(255);
passwordField.setPassword(true);
// passwordField.focus(); - Comment this

formPanel.add(passwordField);
window.add(formPanel);

window.setFocusWidget(passwordField); // Added this line
window.show();

Sorry, I edited the post as [Solved] but did not update the post with the solution.

Thanks a lot for your help ! :)

jyothsna
10 Jan 2011, 5:13 AM
Hey sven,

The solution I have mention in this thread works only in the hosted mode. When the application is deployed on a remote server, IE 7 still shows a validation error on the field when the window is rendered. Any idea why this could be happening ?

jyothsna
12 Jan 2011, 1:37 AM
Solved !!. Issue was "passwordField.focus()" was not removed.

r7777
19 Aug 2011, 1:41 PM
Hi,

I am unable to get rid of the validation error when the window opens up. I have tried using setFocusWidget and it does put focus on the component, but still the validation error is there.

Window newUserWindow = new Window();
FormPanel form = new FormPanel();
TextField<String> domain = new TextField<String>();
domain.setFieldLabel("Domain Login asasa");
domain.setName("domainLogin");
domain.setAllowBlank(false);
form.add(domain);
newUserWindow.add(form);
newUserWindow.setFocusWidget(domain );
newUserWindow.show();

Whenever the window opens, the text field is highlighted in red. Can someone help me figure out how to fix this. Thanks in advance.

jyothsna
22 Aug 2011, 10:34 AM
Which browser and which version of GXT are you using ?

r7777
22 Aug 2011, 10:39 AM
The gxt version is 2.2.4. (gxt-2.2.4-gwt22.jar)
I have tried on IE7 and FireFox 5

Thanks

preetesh
10 Jun 2012, 9:55 PM
Thanks JYOTHSNA for sharing this !!!

Keep it up.

I used GXT and Browser versions as follows:

GXT Version: gxt-2.2.5-gwt22.jar
Browser Version: Internet Explorer 8.0

@ r7777: Remove "domain.setAllowBlank(false);" from your code which is causing red line around the Text-box.

Thanks !!!