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,

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

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,

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

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.

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();
                }
        }

---

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

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

Gracia!!!

Quote:

---

Originally Posted by Animal

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

---

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

Regards
Mayur