1. #1
    Sencha User
    Join Date
    Feb 2010
    Posts
    16
    Vote Rating
    0
    jyothsna is on a distinguished road

      0  

    Exclamation [Solved] GXT - Focus on a TextField in a FormPanel within a Window in IE

    [Solved] GXT - Focus on a TextField in a FormPanel within a Window in IE


    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:

    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.
    Last edited by jyothsna; 12 Jan 2011 at 1:37 AM. Reason: Solved

  2. #2
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    If you solve something, please post your solution here so that others have it too. You probably want to use setFOcusWidget on your Window

  3. #3
    Sencha User
    Join Date
    Feb 2010
    Posts
    16
    Vote Rating
    0
    jyothsna is on a distinguished road

      0  

    Default


    Hi Sven, Using setFocusWidget worked.

    Code:
                    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 !

  4. #4
    Sencha User
    Join Date
    Feb 2010
    Posts
    16
    Vote Rating
    0
    jyothsna is on a distinguished road

      0  

    Default


    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 ?

  5. #5
    Sencha User
    Join Date
    Feb 2010
    Posts
    16
    Vote Rating
    0
    jyothsna is on a distinguished road

      0  

    Default


    Solved !!. Issue was "passwordField.focus()" was not removed.

  6. #6
    Sencha User
    Join Date
    Aug 2011
    Posts
    2
    Vote Rating
    0
    r7777 is on a distinguished road

      0  

    Default Validation error on Window.show()

    Validation error on Window.show()


    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.

  7. #7
    Sencha User
    Join Date
    Feb 2010
    Posts
    16
    Vote Rating
    0
    jyothsna is on a distinguished road

      0  

    Default


    Which browser and which version of GXT are you using ?

  8. #8
    Sencha User
    Join Date
    Aug 2011
    Posts
    2
    Vote Rating
    0
    r7777 is on a distinguished road

      0  

    Default


    The gxt version is 2.2.4. (gxt-2.2.4-gwt22.jar)
    I have tried on IE7 and FireFox 5

    Thanks

  9. #9
    Ext GWT Premium Member
    Join Date
    Sep 2011
    Location
    Bangalore, INDIA
    Posts
    8
    Vote Rating
    0
    preetesh is on a distinguished road

      0  

    Smile setFocusWidget() is working for me

    setFocusWidget() is working for me


    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 !!!

Similar Threads

  1. how focus textfield that was added in a window?
    By diegolovison in forum Ext GWT: Discussion
    Replies: 10
    Last Post: 27 Oct 2010, 9:54 AM
  2. Cannot get focus into a TextField in a popup window?
    By the.jxc in forum Ext 3.x: Help & Discussion
    Replies: 20
    Last Post: 11 Aug 2010, 6:09 AM
  3. [Solved] Window.show and TextField focus
    By mohaaron in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 10 Aug 2010, 2:56 PM
  4. How to properly focus TextField in FormPanel
    By c.mallwitz in forum Ext GWT: Help & Discussion (1.x)
    Replies: 0
    Last Post: 27 Nov 2008, 1:16 PM
  5. Focus is not in textfield after changing the window
    By lukas.wappler in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 8 Aug 2008, 5:18 AM

Thread Participants: 3