1. #1
    Sencha User Venkateswara Rao's Avatar
    Join Date
    Oct 2007
    Location
    Visakhapatnam, Andhara Pradesh, India
    Posts
    35
    Vote Rating
    0
    Venkateswara Rao is on a distinguished road

      0  

    Default How to setup tabindex for form fields

    How to setup tabindex for form fields


    Hi ,

    could you please let me know, how I can set tab index for form fields for auto-focus?


    thanks in advance for your help,

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

  3. #3
    Sencha User Venkateswara Rao's Avatar
    Join Date
    Oct 2007
    Location
    Visakhapatnam, Andhara Pradesh, India
    Posts
    35
    Vote Rating
    0
    Venkateswara Rao is on a distinguished road

      0  

    Default


    Hi Animal,

    HTML Code:
    items: [{
                     fieldLabel: 'User Name',
                name: 'username',
                width:125,
                allowBlank:false,
                tabIndex:1
                },{
                     fieldLabel: 'Password',
    	    inputType:'password',
                name: 'pwd',
                allowBlank:false,			
                width:125,
                tabIndex:2
                }
            ]
    I tried that but no use, I am not able to identify, where the focus is going after username, after pressing tab 3 times then only am able to focus into password field. Also may I know how can I set autofocus to username field ?

    Thanks in Advance for help,

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,502
    Vote Rating
    47
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    I don't understand, can you post an example page which will drop into the examples/* directory?

  5. #5
    Sencha User Venkateswara Rao's Avatar
    Join Date
    Oct 2007
    Location
    Visakhapatnam, Andhara Pradesh, India
    Posts
    35
    Vote Rating
    0
    Venkateswara Rao is on a distinguished road

      0  

    Default


    Hi Animal,

    I attached the zip folder which is having 3 files view1.html, FeedViewer1.js FeedPanel1.js could you please check by placing examples/feedviewer folder. Just try for navigation from username to password field using tab.



    Thanks in advance for your valuable time and help.
    Attached Files

  6. #6
    Sencha User fangzhouxing's Avatar
    Join Date
    Mar 2007
    Posts
    468
    Vote Rating
    1
    fangzhouxing is on a distinguished road

      1  

    Default


    hi, Venkateswara Rao, my code:

    Code:
    var tn = 1;
    。。。
    	fldName = new Ext.form.TextField( {
    			fieldLabel : '值',
    			id : 'option-name',
    			tabIndex : tn++
    		});
    		fldName.on('specialkey', onEnter);
    		
    		fldDescrip = new Ext.form.TextField( {
    			fieldLabel : '名称',
    			id : 'option-descrip',
    			tabIndex : tn++
    		});
    		fldDescrip.on('specialkey', onEnter);
    
    		formPanel = new Ext.FormPanel( {
    			border : false,
    			labelWidth : 70,
    			labelPad : 5,
    			bodyStyle : 'padding: 20px 50px',
    			frame : false,
    			items : [fldName, fldDescrip]
    		});
    。。。
            
    	function initFocus() {
    		var f = Ext.get(adding ? 'option-name' : 'option-descrip');
    		f.focus.defer(100, f);
    	}
    
    	//User can press Enter or Tab Key to navigate
    	function onEnter(elem, e) {
    		if (e.getKey() === e.ENTER) {
    			var f = formPanel.form.items.itemAt(this.tabIndex);
    			if (f && !f.disabled) {
    				f.focus();
    			} else {
    				if (adding)   <---------------- navigate to button
    					okBtn.focus();
    				else
    					okHideBtn.focus();
    			}
    			e.stopEvent();
    		}
    	}

  7. #7
    Ext JS Premium Member
    Join Date
    Apr 2008
    Location
    Munich, Germany
    Posts
    24
    Vote Rating
    0
    msnajdr is on a distinguished road

      0  

    Default


    Hey Venkateswara Rao,
    i run into the same problem with my application. Have you solved it?
    Greets Martin

  8. #8
    Sencha User
    Join Date
    Oct 2010
    Location
    India, Bombay
    Posts
    9
    Vote Rating
    0
    saddanand is on a distinguished road

      0  

    Default


    Hi all, even i am facing the same issue,with my form.. tabIndex:1 or tabIndex:2. doesnot seem to work....

    Gracia!!!

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Posts
    38
    Vote Rating
    -5
    mayur_satasiya can only hope to improve

      0  

    Default




    Thanks Animal , It's Working. Thanks a lot.

    Regards
    Mayur