tab index

[sakaext]

Hi
While using tab index in a form to navigate within the form, the cursor is going out of the form
after the last tab index.Some time it goes to the list behind the form which is been deactivated when the form is loaded.
I would like to know if there is any way to circulate the cursor within the form it selfSo that the cursor would go to the tab index '1' after the tab index 'n' Where 'n' is the last tab index value in the form

[Condor]

You would need to add an <a> tag with zero height after the last field and add a focus event handler to it that focuses the first field again.

[sakaext]

thanks alot for the answer

You would need to add an <a> tag with zero height after the last field and add a focus event handler to it that focuses the first field again.

But could u tell me where exactly should i edit my code, this is my part of the code for the form which include tab indexs

var taskform = new Ext.FormPanel({
        id:'taskform',
        labelAlign: 'left',
        frame:'true',
        name:'taskform',
        renderTo:'taskform', 
        labelWidth:90,
        bodyStyle:'padding:0px',
       height:310,
       width: 570,
        items: [ 
            {
                        layout: 'form',
                        border:false,
                        items: [{ xtype:'hidden', name: 'task_due_date', id:'task_due_date',value:task_due_date},
         { xtype:'hidden', name: 'task_created_date', id:'task_created_date',value:task_created_date},
         { xtype:'hidden', name: 'task_created_by', id:'task_created_by',value:task_created_by},
     {},{
                        id:'task_subject',
                        name:'task_subject',
                        xtype:'textfield',
                        vtype:'tk',
                        labelSeparator:'',
                        allowBlank:false,                    
                        value:task_subject,
                        tabIndex:'1',
                        fieldLabel: '<font color=red>*</font>Task Name',                       
                        width:395
                    },  { layout:'column',
                border:false,
                items:[{
                        columnWidth:.5,
                        layout: 'form',
                        border:false,
                        items: [{  id:'dtcontact',
                                xtype:'datefield',
                                labelSeparator:'',
                                format: 'd-M-Y',
                                fieldLabel: 'Date created',
                                value:task_created_date,
                                width:120,
                                vtype: 'daterange1',
                                  ToDateField:'dtcontact',
                                  vtype: 'daterange2',
                                  toDateField:'dcontact',
                                  tabIndex:'2',
                                name: 'dtcontact'
                                ,listeners:{'change':function(){getsqlformate(this.value,'task_created_date')}}
                            },new Ext.form.ComboBox({
                  id:'assigned_to',
                name:'assigned_to',
               value:task_assigned_to,
                height:20,
                 width:120,               
                //editable:false,
                  tabIndex:'4',
                forceSelection:true,
                  labelSeparator:'',allowBlank:false,
             blankText:'Select Primary Person'
        ,fieldLabel:'<font color=red>*</font>Assigned To',
        mode:'local',
        displayField:'tx_nickname',
       valueField:'gu_user',triggerAction: 'all',
                store:primarysecondarypersonstore,
                listeners:{'change':dayDiff}

            }),   new Ext.form.ComboBox({
                                id:'task_status',
                                name:'task_status',
                               width:120,
                                tabIndex:'6',                                
                                blankText:'Billing Method is required',
                                value:task_status,
                                forceSelection:true,                              
                                labelSeparator:'',                             
                                 fieldLabel:'Task Status',
                                mode:'local',
                                displayField:'text',
                                valueField:'value',
                                triggerAction: 'all',
                                store:new Ext.data.SimpleStore({fields: ['value', 'text'],data: [
                                        ['Start', 'New'],['In Process', 'In Process'],['Finished', 'Finished']
                                    ]})
                            })
        
    ]
                    },{ columnWidth:.5,
                        layout: 'form',
                        border:false,
                        items: [{  id:'dcontact',
                                xtype:'datefield',
                                labelSeparator:'',
                                format: 'd-M-Y',
                                fieldLabel: 'Due Date',
                                value:task_due_date,
                                width:120,
                                vtype: 'daterange2',
                                fromDateField:'dtcontact',
                                  tabIndex:'3',
                                name: 'dcontact'
                                ,listeners:{'change':function(){getsqlformate1(this.value,'task_due_date')}}
                            },{
                                id:'task_list',
                                name:'task_list',
                                xtype:'textfield',
                               // allowBlank:false,
                                labelSeparator:'',
                                  tabIndex:'5',
                                  width:120,
                                fieldLabel: 'Task List',
                                value:task_list
                               }
                          
                    ]
                    }],
                 style: { marginBottom: '0px' }
            },{
                            xtype:'htmleditor',
                            id:'task_description',
                            value:describtion,
                              tabIndex:'7',
                            name:'task_description',
                            hideLabel:true,
                            height:100,
                            width:500
                        }
    ]}]
        ,
        buttons: [{
                text: 'Save',
                type:'Save',
                tabIndex:'8',
               handler: onFormSubmit
        
            },{  id:'close'
                ,text: 'Close',
                tabIndex:'9'
              ,handler: function(){Ext.getCmp("TaskFormWin").close();                    
                 } 
            }]
    });

[Eric24]

You would need to add an <a> tag with zero height after the last field and add a focus event handler to it that focuses the first field again.

@Condor: Can you elaborate a little on the <a> tag technique? I understand what you're saying conceptually, but I'm not clear on how to go about implementing it in a form. For example, why not just use a hidden (or maybe "invisible") form field?

[Condor]

Add this as your last field:

{
  xtype: 'box',
  height: 0,
  autoEl: {tag: 'a', href: '#', cn: ' '},
  listeners: {
    render: function(c){
      var form = c.findParentByType('form').getForm();
      c.mon(c.el, 'focus', function(){
        form.getForm().items.first().focus();
      });
    }
  }
}

Disclaimer: Completely untested code!

[Condor]

You could also have a look at my focusin/focusout feature request.

[Eric24]

Thanks! (I didn't see your feature request--can you point me to it?)

Also, on a related topic, would this be an case to use mon instead of on? If not, why not (i.e. how/when does the listener get cleaned up)?

[Condor]

Yes, I should have used 'mon' (old habits die hard).

Link: Support focusin and focus out events

[Eric24]

Tnx! (I'm still trying to figure out everywhere that mon is appropriate).