Focus on text Field

[rehanazher]

Hi All,

I have some textfields on a form , after submitting the form if its a failure i want to set focus to a particular text field and select the text all text in the field.

i have tried following but not working:

Ext.getCmp('raddName').focus();
Ext.fly('raddName').focus();

where raddName is the id as well as the name of textfield.

Thanks in advance .

[Condor]

The first one should work if 'raddName' is the id of the TextField.

[rehanazher]

Hi Condor,

Thanks for the quick reply, below is my code I can not find it still working , can you please check it for any problem.

function NewRackType(){
		var Newrack = new Ext.FormPanel({
	 	labelWidth:90,
		url:'process.php', 
        frame:true, 
        title:'New Rack Type', 
		defaultType:'textfield',
		monitorValid:true,
		items:[{
			xtype: 'textfield',
			fieldLabel: 'Rack Type',
			labelStyle: 'font-weight:bolder;',
			name: 'raddName',
			id: 'raddName',
			allowBlank: false,
			width: 200
		},{
			xtype: 'hidden',
			name: 'newRack',
			width: 200,
			value: '1'
		}],
		// All the magic happens after the user clicks the button     
		buttons:[{ 
			text:'Add',
			formBind: true,	 
			handler:function(){ 
				Newrack.getForm().submit({ 
					method:'POST', 
					success:function(){ 
						Ext.Msg.alert('Status', 'PoP Added Sucessfully!', function(btn, text){
							if (btn == 'ok'){
								Newrack.getForm().reset(); 
							}
						});
					},
					failure:function(form, action){ 
						if(action.failureType == 'server'){ 
							obj = Ext.util.JSON.decode(action.response.responseText); 
							Ext.Msg.show({
								title: 'Error!',
  								msg: 'Add New Rack Type Failed! <br> '+obj.errors.reason,
								icon: Ext.MessageBox.ERROR,
								buttons: Ext.MessageBox.OK
							}); 
							Ext.getCmp('raddName').focus();
							//Ext.fly('raddName').focus();
						}else{ 
							Ext.Msg.show({
								title: 'Error!',
  								msg: 'Add New Rack Type Failed! <br> Server is Unreachable:'+action.response.responseText,
								icon: Ext.MessageBox.ERROR,
								buttons: Ext.MessageBox.OK
							});
					
							
						} 

					} 
				}); 
			} 
		},{
			text:'Reset',
			formBind: true,	 
			handler: function(){
				Newrack.getForm().reset();
			}
		},{
			text:'Close',
			//formBind: true,	 
			handler: function(){
				win.hide();
			}
		}
		] 		
	});
	  var win = new Ext.Window({
        layout:'fit',
        width:350,
		height: 220,
        closable: false,
        resizable: false,
        plain: true,
        border: false,
        items: [Newrack]
	});
	win.show();
}

[Condor]

Focus the textfield in the fn of the messagebox (the OK button needs the focus first).

[rehanazher]

Hi,

I am a newbie to EXtJS, can you please help with just putting a code help.

Thanks,

[Condor]

Ext.Msg.show({
    title: 'Error!',
    msg: 'Add New Rack Type Failed! <br> '+obj.errors.reason,
    icon: Ext.MessageBox.ERROR,
    buttons: Ext.MessageBox.OK,
    fn: function(btn){
        Ext.getCmp('raddName').focus();
    }
});

(now it gets the focus after you press OK)

[rehanazher]

Thanks Condor ,

Now focus is working but how to select the text in the text field.

Thanks again for your quick help.

[Condor]

Ext.getCmp('raddName').focus(true);

[rehanazher]

dumb me , should read the documents .

Thanks for the help Condor, its working now.