1. #1
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Bangladesh
    Posts
    38
    Vote Rating
    0
    titu is on a distinguished road

      0  

    Question How to set focus for textfield

    How to set focus for textfield


    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?

  2. #2
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Bangladesh
    Posts
    38
    Vote Rating
    0
    titu is on a distinguished road

      0  

    Default


    I have got the solution. We can use the following JavaScript code to focus a field:

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

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,991
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Not like that.

    Code:
    myField.fieldEl.dom.focus();
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Bangladesh
    Posts
    38
    Vote Rating
    0
    titu is on a distinguished road

      0  

    Default


    Evan, Your way to put focus is much better than mine. Because no need to get the form.

    Thanks Evan!

  5. #5
    Sencha User
    Join Date
    Jun 2010
    Posts
    132
    Vote Rating
    0
    ssdesign is on a distinguished road

      0  

    Default


    What is fieldEl?

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Bangladesh
    Posts
    38
    Vote Rating
    0
    titu is on a distinguished road

      0  

    Default


    When I debug code for a textfield I found the following for 'fieldEl':
    Code:
    Ext.getCmp('searchField').fieldEl.dom
    
    <input id=​"ext-gen1093" type=​"text" name=​"searchField" class=​"x-input-text">


    And for 'el' I found the following:
    Code:
    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

  7. #7
    Sencha User
    Join Date
    Jun 2010
    Posts
    132
    Vote Rating
    0
    ssdesign is on a distinguished road

      0  

    Default


    Does not work for me.

    I have a form which is using Fieldset.
    Code:
    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:
    Code:
    form.show({type : 'fade'});
    alert(Ext.getCmp('name').fieldEl.dom);
    This gives me:
    x 687 Uncaught TypeError: Cannot read property 'fieldEl' of undefined

  8. #8
    Ext User
    Join Date
    Aug 2010
    Posts
    13
    Vote Rating
    0
    twh is on a distinguished road

      0  

    Default


    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:

    Code:
    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:

    Code:
    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.

  9. #9
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,991
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Code:
    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();
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  10. #10
    Ext User
    Join Date
    Jul 2010
    Posts
    17
    Vote Rating
    0
    cabennett85 is on a distinguished road

      0  

    Default


    Is there an equivalent method to remove focus from the textfield so that the onscreen ipad keyboard will hide itself?

Similar Threads

  1. Textfield sometimes not getting focus
    By yanfa01 in forum Ext GWT: Discussion
    Replies: 2
    Last Post: 6 May 2010, 12:23 AM
  2. set focus on a textfield
    By Stephan123 in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 2 Nov 2009, 8:30 AM
  3. Set focus on a textfield
    By dinosauro in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 10 Sep 2008, 5:58 PM
  4. set focus on textfield doesn't work
    By Ricardo72 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 31 Jan 2008, 3:39 AM
  5. Set Focus for textfield ....??
    By xucloudy in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 23 Dec 2007, 4:31 AM

Thread Participants: 8