PDA

View Full Version : Focus on text Field



rehanazher
23 Jul 2009, 5:23 AM
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
23 Jul 2009, 5:24 AM
The first one should work if 'raddName' is the id of the TextField.

rehanazher
23 Jul 2009, 5:45 AM
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
23 Jul 2009, 6:00 AM
Focus the textfield in the fn of the messagebox (the OK button needs the focus first).

rehanazher
23 Jul 2009, 6:03 AM
Hi,

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

Thanks,

Condor
23 Jul 2009, 6:09 AM
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
23 Jul 2009, 6:13 AM
Thanks Condor ,

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

Thanks again for your quick help.

Condor
23 Jul 2009, 6:15 AM
Ext.getCmp('raddName').focus(true);

rehanazher
23 Jul 2009, 6:18 AM
dumb me:(( , should read the documents .

Thanks for the help Condor, its working now.

ssh_hameed
28 Nov 2013, 11:00 PM
Hi Friends

Am using tab panel, it contain 3 tabs with tbar text box. If select anyone panel, focus to that panel text box. But it not woking when page load and press tab panel Only. Am used like this
Ext.getCmp('id_text').focus(true);
Ext.getCmp('id_text').focus().

Its working after when press any button in that panel. Not working only when change that tab,

listeners: {
'tabchange': function (tabPanel, tab) {
Ext.getCmp('id_text').focus(true);
// Ext.getCmp('id_text').focus().
}
}


thanx advance.............