1. #1
    Ext User sakaext's Avatar
    Join Date
    Jul 2009
    Posts
    18
    Vote Rating
    0
    sakaext is on a distinguished road

      0  

    Exclamation tab index

    tab index


    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

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    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.

  3. #3
    Ext User sakaext's Avatar
    Join Date
    Jul 2009
    Posts
    18
    Vote Rating
    0
    sakaext is on a distinguished road

      0  

    Thumbs up Tab index

    Tab index


    thanks alot for the answer

    Quote Originally Posted by Condor View Post
    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

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

  4. #4
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    528
    Vote Rating
    0
    Eric24 is on a distinguished road

      0  

    Default


    Quote Originally Posted by Condor View Post
    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?

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      1  

    Default


    Add this as your last field:
    Code:
    {
      xtype: 'box',
      height: 0,
      autoEl: {tag: 'a', href: '#', cn: '&#160;'},
      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!
    Last edited by Condor; 26 Oct 2010 at 4:27 AM. Reason: on -> mon

  6. #6
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

  7. #7
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    528
    Vote Rating
    0
    Eric24 is on a distinguished road

      0  

    Default


    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)?

  8. #8
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


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

    Link: Support focusin and focus out events

  9. #9
    Ext JS Premium Member
    Join Date
    May 2008
    Posts
    528
    Vote Rating
    0
    Eric24 is on a distinguished road

      0  

    Default


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

Thread Participants: 2