Setting default focus on form field

[hiral]

Hi all

here I have below code of my login form. I need my default focus on user name field when for loads. And also it should not validate that field when focus is set. But if user move focus from user name to password and not fill up the user name then it should validate.

Here in my code I have used code like ...

Ext.getCmp('user_name').focus('', 10);

But it marks my field as invalid field and not giving chance to user to fill data

My entire code

Ext.ns('Example');
Example.Form = Ext.extend(Ext.form.FormPanel, {
 
    // configurables
    
     border:false
    ,frame:true
    ,labelWidth:80
    ,bodyStyle:'padding:20px 20px 0'
    ,url:script_path + 'login.php' 
    
    ,initComponent:function() 
    {
        
        // configure ourselves
        Ext.apply(this, {
             defaultType:'textfield'
            ,defaults:{anchor:'-24'}
            ,monitorValid:true
//            ,buttonAlign:'right'
            ,items:
            [{
                 name:'username'
                ,fieldLabel:'User Name'
                ,allowBlank:false
                ,id:'user_name'
                ,vtype:'alphanum'
                
            },{
                 name:'password'
                ,fieldLabel:'Password'
                ,inputType: 'password'
                ,allowBlank:false
                ,vtype:'alphanum'
                
            }]
            ,buttons:[{
                 text:'Log In'
                ,scope:this
                ,formBind:true
                ,handler:this.submit
            }]
            ,keys:[{
                 key:[10,13] // enter
                ,scope:this
                ,stopEvent:true
                ,fn:this.submit
            }]
        }); // eo apply
 
        // call parent
        Example.Form.superclass.initComponent.apply(this, arguments);
         
    } // eo function initComponent
    
    /**
     * Form onRender override
     */
    ,onRender:function() 
    {
 
        // call parent
        Example.Form.superclass.onRender.apply(this, arguments);

        // set wait message target
        this.getForm().waitMsgTarget = this.getEl();
        
        Ext.getCmp('user_name').focus('', 10);
         
    } // eo function onRender

    /**
     * Load button click handler
     */
    ,onLoadClick:function() 
    {
        this.load({
             url:this.url
            ,waitMsg:'Loading...'
            ,params:{mode:'load'}
        });
        // any additional load click processing here
    } // eo function onLoadClick
    
    /**
     * Submits the form. Called after Submit buttons is clicked
     * @private
     */
    ,submit:function() 
    {
        
        // form variable
        var basicForm = this.getForm();
        
        // If form validated then only allow to submit
        if(basicForm.isValid()){
            
            this.getForm().submit({
                 url:this.url
                ,scope:this
                ,method:'post'
                ,params:{mode:'checkUser'}
                ,success:this.onSuccess
                ,failure:function(form, action){                           
                      Ext.Msg.show({
                         title:'Invalid Login'
                        ,msg:'Invalid User Name or Password'
                        ,modal:true
                        ,icon:Ext.Msg.ERROR
                        ,buttons:Ext.Msg.OK
                    });
                    this.getForm().reset(); 
                    Ext.getCmp('user_name').focus('', 10);
                    
                 }
                ,waitMsg:'Loading Please wait...'            
            });
        }
        
    } // eo function submit

    /**
     * Success handler
     * @param {Ext.form.BasicForm} form
     * @param {Ext.form.Action} action
     * @private
     */
    ,onSuccess:function(form, action) 
    {
        window.location.href = "index.php";        
    } // eo function onSuccess

    /**
     * Shows Message Box with error
     * @param {String} msg Message to show
     * @param {String} title Optional. Title for message box (defaults to Error)
     * @private
     */
    ,showError:function(msg, title) 
    {
        title = title || 'Error';
        Ext.Msg.show({
             title:title
            ,msg:msg
            ,modal:true
            ,icon:Ext.Msg.ERROR
            ,buttons:Ext.Msg.OK
        });
    } // eo function showError
 
}); // eo extend
 
// register xtype
Ext.reg('exampleform', Example.Form);
 
Ext.BLANK_IMAGE_URL = ext_path + 'resources/images/default/s.gif';
 
// application main entry point
Ext.onReady(function() 
{
 
    Ext.QuickTips.init();

    // invalid markers to sides
    Ext.form.Field.prototype.msgTarget = 'side';
 
    var win = new Ext.Window
    ({
    
         id:'formloadsubmit-win'
        ,title:Ext.fly('page-title').dom.innerHTML
        ,layout:'fit'
        ,width:350
        ,height:170
        ,closable:false
        ,border:false
        ,draggable : false    
        ,resizable :false
        ,monitorValid:true
        ,items:{id:'formloadsubmit-form', xtype:'exampleform'}
    });

    win.show();
    
 
}); // eo function onReady
 
// eof

Many thanks
Hiral

[mystix]

http://extjs.com/docs/?class=Ext.for...r=clearInvalid

[hiral]

Hi mystix,

Thanks for replay. But I know the property which you linked here.

Should I use it like this ... If not like that then how?????????????

Ext.getCmp('user_name').focus('', 10);
Ext.getCmp('user_name').clearInvalid();

Thanks
Hiral

[mystix]

yes.

[charleshimmer]

I'm able to get my field to focus fine, but it only clears the invalid state for like .2 seconds and then marks it invalid again.

Here is my field

fieldLabel:'E-mail',
id:'email-info-email',
name: 'email',
allowBlank:false,
vtype:'email'

Here is how I am focusing my field

var email = 	Ext.getCmp('email-info-email');
email.focus('',10);
email.clearInvalid();

Any idea on why it won't keep the field clear of validation till the user is finished typing?

[Condor]

You'll have to defer the entire block, e.g.:

(function(){
	var email = Ext.getCmp('email-info-email');
	email.focus();
	email.clearInvalid();
}}.defer(10);

[charleshimmer]

That worked. Thanks for the help!

[ninoguba]

You'll have to defer the entire block, e.g.:

(function(){
    var email = Ext.getCmp('email-info-email');
    email.focus();
    email.clearInvalid();
}}.defer(10);

This solution doesn't work on IE8 / ExtJS 3.0. Please help. Thanks.

[stinie]

I'm able to get my field to focus fine, but it only clears the invalid state for like .2 seconds and then marks it invalid again.

Here is my field

fieldLabel:'E-mail',
id:'email-info-email',
name: 'email',
allowBlank:false,
vtype:'email'

Here is how I am focusing my field

var email = 	Ext.getCmp('email-info-email');
email.focus('',10);
email.clearInvalid();

Any idea on why it won't keep the field clear of validation till the user is finished typing?

thanks a lot. i just started to get better with extjs and this little snippet is of a great help for me.

i want to point out that this little method only works when the email-info-email element has an id.

{
    fieldLabel: 'E-mail',
    name: 'email-info-email',
    id: 'email-info-email',
}. {