PDA

View Full Version : How to set focus for textfield



titu
26 Jul 2010, 9:49 AM
I need to focus a textfield programmatically. There is no method in the Sencha touch api to focus a textfield as ExtJS api. Can anybody please help me?

titu
5 Aug 2010, 8:51 PM
I have got the solution. We can use the following JavaScript code to focus a field:


document.forms['formName'].fieldID.focus();

evant
5 Aug 2010, 9:22 PM
Not like that.



myField.fieldEl.dom.focus();

titu
5 Aug 2010, 11:48 PM
Evan, Your way to put focus is much better than mine. Because no need to get the form.

Thanks Evan!

ssdesign
6 Aug 2010, 12:22 AM
What is fieldEl?

titu
6 Aug 2010, 12:58 AM
When I debug code for a textfield I found the following for 'fieldEl':

Ext.getCmp('searchField').fieldEl.dom

<input id=?"ext-gen1093" type=?"text" name=?"searchField" class=?"x-input-text">?

And for 'el' I found the following:

Ext.getCmp('searchField').el.dom

<div id=?"searchField" class=?"x-field x-field-text" >?
<input id=?"ext-gen1093" type=?"text" name=?"searchField" class=?"x-input-text">?
<div class=?"x-field-mask" id=?"ext-gen1094">?</div>?
</div>?

That is, 'fieldEl' returns only the component while 'el' returns the top level element representing the component

ssdesign
6 Aug 2010, 1:10 AM
Does not work for me.

I have a form which is using Fieldset.

this.formBase = {
scroll: false,
standardSubmit : false,
items: [
{
xtype: 'fieldset',
title: 'Create New',
instructions: 'Please enter the desired name.',
defaults: {
required: true,
labelAlign: 'left'
},
items: [{
xtype: 'textfield',
name : 'name',
label: 'Name',
id: 'nameid',
autoCapitalize : false
}]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
items: [
{
xtype: 'spacer'
},
{
text: 'Save',
ui: 'action',
handler: function() {
if(form.getValues().name == "")
{
createEmpty();
}
else
{
form.hide({type : 'fade'});
database.Main.createNewFont(form.getValues().name);
}
}
}
]
}
]
};
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
height: 200,
width: 400
});
this.form = new Ext.form.FormPanel(formBase);


Later in the code i do this to show the form:

form.show({type : 'fade'});
alert(Ext.getCmp('name').fieldEl.dom);

This gives me:
x 687 Uncaught TypeError: Cannot read property 'fieldEl' of undefined

twh
17 Aug 2010, 3:27 PM
The above code "myField.fieldEl.dom.focus();" doesn't work unless you define the field as its own object. For example, defining 'email' as an object works:


var email = new Ext.form.TextField({
xtype : 'textfield',
name : 'email',
fieldLabel : 'Your e-mail address:',
placeHolder : 'e-mail',
labelAlign : 'top',
});

var form = Ext.form.FormPanel({
items: [email],
});


But including it inline in the form panel doesn't:


var form = Ext.form.FormPanel({
items: [
{
xtype : 'textfield',
name : 'email',
fieldLabel : 'Your e-mail address:',
placeHolder : 'e-mail',
labelAlign : 'top',
},
],
});

I thought you could add fieldEl: 'email', to the inline object, but that didn't work.

evant
17 Aug 2010, 3:36 PM
var form = Ext.form.FormPanel({
items: [
{
itemId: 'email',
xtype : 'textfield',
name : 'email',
fieldLabel : 'Your e-mail address:',
placeHolder : 'e-mail',
labelAlign : 'top',
},
],
});
form.getComponent('email').fieldEl.dom.focus();

cabennett85
17 Aug 2010, 4:05 PM
Is there an equivalent method to remove focus from the textfield so that the onscreen ipad keyboard will hide itself?

evant
17 Aug 2010, 4:08 PM
blur is the opposite of focus.

WallTearer
19 Jan 2012, 10:48 AM
Do you guys have any luck of making this work on the iPhone?
I've tried to create textfields in different ways as you were showing here, but still focus() is working only when I test in Chrome.
The code for setting focus is:

App.views.form.getComponent(nodeId).fieldEl.dom.focus();
Btw, in the iPhone Safari debug log I can see that the field was successfully found, but method doesn't work in some reason.

amritmishra
3 Jul 2012, 7:42 PM
for hiding the keyboard use:
window.blur();
or
document.activeElement.blur();


but I am having problem with showing keyboard when view changes. Setting the focus to textfield works only in chrome not in the device.
field.fieldEl.dom.focus();

amritmishra
3 Jul 2012, 7:44 PM
yes same here. its works in chrome perfectly not in the iPhone

Alexey_Shaposhnikov
13 Jul 2012, 5:07 AM
what you think about this -> http://docs.sencha.com/touch/2-0/#!/api/Ext.field.Text-method-fireEvent

mlourdes
15 Dec 2012, 6:00 PM
I am trying to set the focus , like in the example , but the far I can go is .element
not fieldEl , either el .

how can I get fieldEl from element ?