How to setup tabindex for form fields

[Venkateswara Rao]

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,

[Animal]

http://extjs.com/deploy/dev/docs/?cl...ember=tabIndex

[Venkateswara Rao]

Hi Animal,

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,

[Animal]

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

[Venkateswara Rao]

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.

[fangzhouxing]

hi, Venkateswara Rao, my 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();
		}
	}

[mayur_satasiya]

http://extjs.com/deploy/dev/docs/?cl...ember=tabIndex

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

Regards
Mayur