Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: How to set focus for textfield

  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Bangladesh
    Posts
    38
    Vote Rating
    0
      0  

    Question 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
      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
    18,609
    Vote Rating
    874
      0  

    Default

    Not like that.

    Code:
    myField.fieldEl.dom.focus();
    Evan Trimboli
    Twitter - @evantrimboli

  4. #4
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Bangladesh
    Posts
    38
    Vote Rating
    0
      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
      0  

    Default

    What is fieldEl?

  6. #6
    Ext JS Premium Member
    Join Date
    Nov 2008
    Location
    Bangladesh
    Posts
    38
    Vote Rating
    0
      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
      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
      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
    18,609
    Vote Rating
    874
      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
    Twitter - @evantrimboli

  10. #10
    Ext User
    Join Date
    Jul 2010
    Posts
    17
    Vote Rating
    0
      0  

    Default

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

Page 1 of 2 12 LastLast

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •