1. #1
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    3
    gslender is on a distinguished road

      0  

    Default [FIXED] Window blocks and Form label/field aligns

    [FIXED] Window blocks and Form label/field aligns


    The following snippet shows two (2) bugs

    1) window blocks and stops UI in the login form. Once you show the window, and close it, the form is no longer visible

    2) login form fields and labels are not aligned correctly

    Code:
    package com.mycompany.gxt.client;
    
    import com.extjs.gxt.ui.client.Events;
    import com.extjs.gxt.ui.client.Style.HorizontalAlignment;
    import com.extjs.gxt.ui.client.event.ButtonEvent;
    import com.extjs.gxt.ui.client.event.ComponentEvent;
    import com.extjs.gxt.ui.client.event.SelectionListener;
    import com.extjs.gxt.ui.client.util.KeyNav;
    import com.extjs.gxt.ui.client.widget.button.Button;
    import com.extjs.gxt.ui.client.widget.form.CheckBox;
    import com.extjs.gxt.ui.client.widget.form.Field;
    import com.extjs.gxt.ui.client.widget.form.FormPanel;
    import com.extjs.gxt.ui.client.widget.form.TextArea;
    import com.extjs.gxt.ui.client.widget.form.TextField;
    import com.extjs.gxt.ui.client.widget.form.Validator;
    import com.extjs.gxt.ui.client.widget.form.FormPanel.LabelAlign;
    import com.extjs.gxt.ui.client.widget.layout.CenterLayout;
    import com.extjs.gxt.ui.client.widget.layout.FillLayout;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.LayoutContainer;
    import com.extjs.gxt.ui.client.widget.Viewport;
    import com.extjs.gxt.ui.client.widget.Window;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.ui.RootPanel;
    
    public class ModalCloseWindowTest implements EntryPoint {
    
            public void onModuleLoad() {
                
                ContentPanel cp = new ContentPanel();
                cp.setHeading("Test");
                cp.setSize(600,400);
                Button test = new Button("test");
                SelectionListener listener = new SelectionListener() 
                {
                    public void componentSelected(ComponentEvent be) 
                    {
                        RegisterWindow rw = new RegisterWindow();
                        rw.show();
                    }
                };  
                test.removeAllListeners();
                test.addSelectionListener(listener);
                cp.add(test);
                
                LoginContainer lc = new LoginContainer();
                cp.add(lc);
                
                final Viewport vp = new Viewport();
                vp.add(cp);
                vp.layout();
    
                RootPanel.get().add(vp);
                
            }
            
            public class RegisterWindow extends Window 
            {    
                public RegisterWindow()
                {
                    super();
                    setClosable(true);
                    setModal(true);  
                    setHeading("Registration");
                    setWidth(500);
                    setLayout(new FillLayout());
                        
    
                    final FormPanel panel = new FormPanel();        
                    panel.setHeaderVisible(false);
                    panel.setFieldWidth(300);  
                    panel.setLabelWidth(100);  
                    panel.setLabelAlign(LabelAlign.RIGHT);
                    panel.setButtonAlign(HorizontalAlignment.RIGHT);  
                       
                    final TextField firstnameTxtFld = new TextField();  
                    firstnameTxtFld.setFieldLabel("First Name");
                    firstnameTxtFld.setEmptyText("Your first name");
                    firstnameTxtFld.setAllowBlank(false);
                    firstnameTxtFld.setSelectOnFocus(true);
                    panel.add(firstnameTxtFld);  
    
                    final TextField lastnameTxtFld = new TextField();  
                    lastnameTxtFld.setFieldLabel("Last Name");
                    lastnameTxtFld.setEmptyText("Your last name");
                    lastnameTxtFld.setAllowBlank(false);
                    lastnameTxtFld.setSelectOnFocus(true);
                    panel.add(lastnameTxtFld);  
    
                    final TextField emailTxtFld = new TextField();  
                    emailTxtFld.setFieldLabel("Email");
                    emailTxtFld.setEmptyText("A valid email address");
                    emailTxtFld.setAllowBlank(false);
                    emailTxtFld.setSelectOnFocus(true);
                    panel.add(emailTxtFld);  
    
                    final TextField usernameTxtFld = new TextField();  
                    usernameTxtFld.setFieldLabel("Username");
                    usernameTxtFld.setEmptyText("Provide a username");
                    usernameTxtFld.setAllowBlank(false);
                    usernameTxtFld.setSelectOnFocus(true);
                    panel.add(usernameTxtFld);  
                    
                    final TextField pwd1TxtFld = new TextField();
                    pwd1TxtFld.setPassword(true);
                    pwd1TxtFld.setAllowBlank(false);
                    pwd1TxtFld.setFieldLabel("Password");    
                    pwd1TxtFld.setSelectOnFocus(true);
                    panel.add(pwd1TxtFld);  
    
                    final TextField pwd2TxtFld = new TextField();
                    pwd2TxtFld.setPassword(true);
                    pwd2TxtFld.setFieldLabel("Password (again)");
                    pwd2TxtFld.setSelectOnFocus(true);
                    pwd2TxtFld.setValidator(new Validator(){
                        public String validate(Field field, String value) {
                            if (!value.equals((String)pwd1TxtFld.getValue())) return "Passwords do not match";
                            return null;
                        }});
                    panel.add(pwd2TxtFld);  
                    
                    final TextArea termsTxtArea = new TextArea();
                    termsTxtArea.setFieldLabel("Terms & <br>Conditions");
                    termsTxtArea.setValue("Standard Terms and Conditions\n\nPLEASE READ VERY CAREFULLY THESE TERMS AND CONDITIONS AND THE WEBSITE BEFORE REGISTERING. PARTICIPATION INDICATES THAT YOU ACCEPT THESE TERMS AND CONDITIONS. IF YOU DO NOT ACCEPT THESE TERMS AND CONDITIONS, PLEASE DO NOT REGISTER FOR OR PARTICIPATE IN THIS ONLINE PROGRAM.");
                    termsTxtArea.setReadOnly(true);
                    termsTxtArea.setHeight(200);
                    panel.add(termsTxtArea);  
    
                    final CheckBox accepttermsChkBox = new CheckBox();  
                    accepttermsChkBox.setFieldLabel("Agreement");
                    accepttermsChkBox.setBoxLabel("I accept the Terms & Conditions above");
                    panel.add(accepttermsChkBox);  
                    
                    final Button registerBtn = new Button("Register");
                    panel.addButton(registerBtn);  
    
                    registerBtn.addSelectionListener(new SelectionListener() 
                    {  
                        public void componentSelected(ComponentEvent ce) 
                        {
                            Boolean value = (Boolean)accepttermsChkBox.getValue();
                            
                        }   
                    });   
                    
                    add(panel);
                }
            }
            
            public class LoginContainer extends LayoutContainer 
            {            
                public LoginContainer()
                {
                    super();                
                    setLayout(new CenterLayout());
                    
                    final FormPanel panel = new FormPanel();        
                    panel.setHeading("Login");
                    panel.setFrame(true);  
                    panel.setFieldWidth(100);  
                    panel.setLabelWidth(50);  
                    panel.setLabelAlign(LabelAlign.RIGHT);
                    panel.setButtonAlign(HorizontalAlignment.RIGHT);  
                    panel.setWidth(270);  
                    panel.setStyleAttribute("padding", "20"); 
                                       
                    final TextField userTxtFld = new TextField();  
                    userTxtFld.setFieldLabel("Username");
                    userTxtFld.setEmptyText("Username");
                    userTxtFld.setAllowBlank(false);
                    userTxtFld.setSelectOnFocus(true);
                    panel.add(userTxtFld);  
                       
                    final TextField pwdTxtFld = new TextField();
                    pwdTxtFld.setPassword(true);
                    pwdTxtFld.setFieldLabel("Password");    
                    panel.add(pwdTxtFld);  
                    
                    final Button loginBtn = new Button("Login");
                    panel.addButton(loginBtn);  
                    
                    add(panel);        
                                    
                    new KeyNav(panel) {
                        @Override
                        public void onEnter(ComponentEvent ce)
                        {
                            loginBtn.fireEvent(Events.Select, new ButtonEvent(loginBtn));
                        }
                    };
                }
            }
    }

  2. #2
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    1) window blocks and stops UI in the login form. Once you show the window, and close it, the form is no longer visible
    Fix is in SVN.
    2) login form fields and labels are not aligned correctly
    You need to increase your label width.

Thread Participants: 1