Results 1 to 1 of 1

Thread: [Open] Form field id lead the field render error while Window show two times

    Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1

    Exclamation [Open] Form field id lead the field render error while Window show two times

    I found a bug cause field render error while the Window show two times.
    My ExtJS versioin is 3.3.1

    The Javascript code is following:

    Code:
    Ext.apply(Ext.form.VTypes, {  
        postNum:function(v) {  
            return /^[1-9]\d{5}$/.test(v);  
        },  
        postNumText: 'Post Error',  
        password : function(val, field) {  
            if (field.initialPassField) {  
                var pwd = Ext.getCmp(field.initialPassField);  
                    return (val == pwd.getValue());  
            }  
        return true;  
        },  
        passwordText : 'Password are not same',  
            emailvalidator : function(val, field) {  
                if (field.initialField) {  
                    var em = Ext.getCmp(field.initialField);  
                    return (val == em.getValue());  
                }  
            return true;  
            },  
        emailvalidatorText : 'email are not same',
        username: function(value, field){        
            var conn = new Ext.data.Connection();
            conn.request({
                url: 'ajax/userVarify.php',
                method: 'GET',
                params: {'account': value},
                success: function(response, options){
                    var res = Ext.util.JSON.decode(response.responseText);   
                        if(res.success == false){      
                            field.markInvalid('This username is invalid!');                
                        }
                        else{
                            field.clearInvalid();
                        }
                },
                failure: function(f,a){                
                    Ext.Msg.show({title: 'error', msg: 'connection error!',});
                }
            });
            return true;
        },
        usernameText: 'username is be taken'
    });
    
    userForm = function(win){
        var thisForm = this;
        userForm.superclass.constructor.call(this, {
            labelWidth: 75, // label settings here cascade unless overridden
            url: 'ajax/registerUser.php',
            modal: true,
            frame:true,
            title: 'Register a user',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},
            defaultType: 'textfield',
            
            items: [{
                    fieldLabel: 'userName',
                    name: 'username',
                    allowBlank:false,
                    invalidText : 'Username had been taken',   
                    width : 230,   
                    validationEvent : 'blur',
                    vtype: 'username'
                    },{
                    fieldLabel: 'Password',
                    inputType: 'password',
                    name: 'password',
                    id: 'password',
                    allowBlank:false
                    },{
                    fieldLabel: 'RePassword',
                    inputType: 'password',
                    name: 'Re-password',
                    allowBlank:false,
                    initialPassField:'password',
                    vtype: 'password'
                    },{
                    fieldLabel: 'Email',
                    name: 'Email',
                    allowBlank:false,
                    regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
                    regexText: 'Email format error'
                    }],
    
            buttons: [
                {
                text: 'Register',
                waitMsg: 'registing...',
                handler: function(){
                    thisForm.getForm().submit({
                        success: function(f,a){
                            Ext.Msg.alert('Success', 'It worked');
                            },
                        failure: function(f,a){
                            Ext.Msg.alert('Warning', 'Error');
                            }
                        });
                    }
                },{
                text: 'Reset',
                handler: function(){
                    thisForm.getForm().reset();
                    }
                },{
                text: 'Cancel',
                handler: function(){
                    win.hide();
                    }
                }
            ],
            keys: [{
                key: [Ext.EventObject.ENTER],
                handler: function(){
                    registerForm.getForm().submit({
                        success: function(f,a){
                            Ext.Msg.alert('Success', 'It worked');
                        },
                        failure: function(f,a){
                            Ext.Msg.alert('Warning', 'Error');
                        }
                    });
                }
            }]
        });
    };
    
    Ext.extend(userForm, Ext.FormPanel);
    
    userFormWin = function(){
        var insideForm = new userForm(this);
        userFormWin.superclass.constructor.call(this, {
            layout:'fit',
            width:370,
            height:300,
            //resizable: false,
            plain: true,
            modal: true,
            border: false,
            closeAction: 'hide',
            items: [insideForm]
        });
    };
    Ext.extend(userFormWin, Ext.Window);
    The HTML code is following:

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>ExtBug Example</title>
    
        <!-- ** CSS ** -->
        <!-- base library -->
        <link rel="stylesheet" type="text/css" href="css/ext/ext-all-notheme.css" />
        <link rel="stylesheet" type="text/css" href="css/ext/xtheme-gray.css" />
        <script type="text/javascript" src="js/ext/ext-base.js"></script>
    
        <!-- ExtJS library: all widgets -->
        <script type="text/javascript" src="js/ext/ext-all-debug.js"></script>
        <script type="text/javascript" src="js/extBug.js"></script>
    </head>
    <body></body>
    </html>
    If the field password has id attribute, at first time the window shows normally:
    with_id_first.jpg
    But if it open second window, something wrong.
    with_id_second.jpg

    After deleted the password id field, everything is fine.
    But the password validation can not work.
    without_id.jpg
    Last edited by billy3321; 24 May 2011 at 6:01 AM. Reason: fix wrong words...

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •